{loaderContent}
diff --git a/src/LoginProvider.component.scss b/src/LoginProvider.component.scss
index eb08be3..0002fb7 100755
--- a/src/LoginProvider.component.scss
+++ b/src/LoginProvider.component.scss
@@ -1,3 +1,3 @@
.ar-LoginProvider {
- width: 30rem;
+ min-width: 25rem;
}
diff --git a/src/LoginProvider.tsx b/src/LoginProvider.tsx
index 9653945..075be43 100755
--- a/src/LoginProvider.tsx
+++ b/src/LoginProvider.tsx
@@ -10,9 +10,7 @@ const LoginProvider = (props: LoginProviderProps): JSX.Element => {
return (
@@ -21,7 +19,7 @@ const LoginProvider = (props: LoginProviderProps): JSX.Element => {
size={ArSizes.SMALL}
classes="position-absolute top-0 end-0"
content="Close"
- onClick={() => setRightPanelContent({ name: "" })}
+ onClick={() => setRightPanelContent({ componentName: "" })}
/>
)
diff --git a/src/Main.component.scss b/src/Main.component.scss
index d4b5673..01b94c8 100755
--- a/src/Main.component.scss
+++ b/src/Main.component.scss
@@ -1,7 +1,8 @@
.ar-Main {
.ar-Drawer {
transition: width 0.3s;
- width: 15%;
+ min-width: 15%;
+ max-width: 20%;
&.collapsed {
width: 3.5rem;
}
diff --git a/src/Main.tsx b/src/Main.tsx
index 77bba99..6971084 100755
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,4 +1,5 @@
import { ArPlacement, MainProps } from "@armco/types"
+import { usePanelContent } from "@armco/utils/hooks"
import ErrorBoundary from "./ErrorBoundary"
import SidePanel from "./SidePanel"
import Content from "./Content"
@@ -7,34 +8,50 @@ import "./Main.component.scss"
const Main = (props: MainProps): JSX.Element => {
const {
+ classes,
contentClasses,
drawerContent,
+ drawerTitle,
mainContent,
hideSidepanelCloseButton,
- rightPanelContent,
- leftPanelContent,
rightPanelHeader,
leftPanelHeader,
} = props
+
+ const { panelContent: leftPanelContent } = usePanelContent(true)
+ const { panelContent: rightPanelContent } = usePanelContent(false)
+
return (
-
+
{drawerContent && (
-
+
{drawerContent}
)}
@@ -44,8 +61,10 @@ const Main = (props: MainProps): JSX.Element => {
diff --git a/src/MenuButton.tsx b/src/MenuButton.tsx
index 86e8aa8..15902d3 100644
--- a/src/MenuButton.tsx
+++ b/src/MenuButton.tsx
@@ -5,9 +5,10 @@ import {
ArPopoverPositions,
ArPopoverSlots,
ArPopoverTriggers,
+ ArSizes,
ArThemes,
ListItemContent,
- MenuButtonProps,
+ MenuButtonProps,
} from "@armco/types"
import Icon from "@armco/icon"
import List from "./List"
@@ -24,15 +25,16 @@ const demoSplitOptions: Array = [
const MenuButton = (props: MenuButtonProps) => {
const {
buttonProps,
- containerClasses,
- demo,
+ classes,
+ demo,
splitButtonClasses,
splitOptions,
splitPopoverVersion,
splitTrigger,
theme,
} = props
- const { color, disabled, variant, content, preIcon, postIcon, size } = buttonProps || {}
+ const { color, disabled, variant, content, preIcon, postIcon, size = ArSizes.SMALL } =
+ buttonProps || {}
const [hovered, setHovered] = useState()
const useSplitOptions = demo
? typeof splitOptions === "string" && splitOptions === "true"
@@ -71,17 +73,15 @@ const MenuButton = (props: MenuButtonProps) => {
return (
{
- setHovered(true)
- }}
- onMouseLeave={(e) => {
- setHovered(false)
- }}
+ className={`d-inline-flex${classes ? " " + classes : ""}`}
+ onMouseEnter={(e) => {
+ setHovered(true)
+ }}
+ onMouseLeave={(e) => {
+ setHovered(false)
+ }}
>
- {hasButton &&
}
+ {hasButton &&
}
{useSplitOptions && (
{
closeOnSelfClick,
contentClasses,
contentMatchAnchorWidth,
- demo,
disabled,
hideMarker,
invertBg,
@@ -109,14 +108,12 @@ const PopoverV2 = (props: PopoverProps): JSX.Element => {
popAtPointer && trigger === ArPopoverTriggers.CLICK
? clickCoordinatesRef.current
: null,
- demo,
topOffset,
)
setPopoverLeftTop(leftTop)
setPopoverPosition(usePosition)
}, [
contentMatchAnchorWidth,
- demo,
hideMarker,
popAtPointer,
position,
@@ -158,17 +155,7 @@ const PopoverV2 = (props: PopoverProps): JSX.Element => {
if (trigger === ArPopoverTriggers.CLICK && popoverVisible) {
document.addEventListener("mousedown", listener)
- const iframe = document.querySelector("iframe")
- if (iframe) {
- iframe.contentWindow?.document.addEventListener("mousedown", listener)
- }
- return () => {
- document.removeEventListener("click", listener)
- const iframe = document.querySelector("iframe")
- if (iframe) {
- iframe.contentWindow?.document.removeEventListener("click", listener)
- }
- }
+ return () => document.removeEventListener("click", listener)
}
}, [trigger, popoverVisible, onClose])
@@ -288,7 +275,6 @@ const PopoverV2 = (props: PopoverProps): JSX.Element => {
classes={`position-fixed popover-container${
popoverVisible ? " z-3000" : " invisible"
}`}
- demo={demo}
styles={popoverLeftTop || {}}
>
{
- const { children, classes, container, demo, styles } = props
+ const { children, classes, container, styles } = props
const [portal, setPortal] = useState()
useEffect(() => {
@@ -15,23 +14,18 @@ const Portal = (props: PortalProps) => {
useEffect(() => {
if (portal) {
- const doc = getDocumentElement(demo)
- if (doc) {
- const root = doc.getElementById("root")
- if (root) {
- root.appendChild(portal as HTMLElement)
- }
+ const root = document.getElementById("root")
+ if (root) {
+ root.appendChild(portal as HTMLElement)
}
return () => {
- if (doc) {
- const root = doc.getElementById("root")
- if (root) {
- root.removeChild(portal as HTMLElement)
- }
+ const root = document.getElementById("root")
+ if (root) {
+ root.removeChild(portal as HTMLElement)
}
}
}
- }, [portal, demo])
+ }, [portal])
useEffect(() => {
if (portal) {
diff --git a/src/ProgressiveBarChart.tsx b/src/ProgressiveBarChart.tsx
index 3e7408d..4931f2e 100755
--- a/src/ProgressiveBarChart.tsx
+++ b/src/ProgressiveBarChart.tsx
@@ -6,6 +6,8 @@ import { adaptToProgressiveChart } from "@armco/utils/adapters"
import Icon from "@armco/icon"
import "./ProgressiveBarChart.component.scss"
+const HighchartsReactComp = HighchartsReact as any
+
const ProgressiveBarChart = (props: ProgressiveBarChartProps): JSX.Element => {
const {
data,
@@ -133,7 +135,7 @@ const ProgressiveBarChart = (props: ProgressiveBarChartProps): JSX.Element => {
/>
)
}
diff --git a/src/ScrollPagination.tsx b/src/ScrollPagination.tsx
index ef67081..bdacb05 100755
--- a/src/ScrollPagination.tsx
+++ b/src/ScrollPagination.tsx
@@ -2,23 +2,18 @@ import { MutableRefObject, useEffect, useRef, useState } from "react"
import { v4 as uuid } from "uuid"
import { FunctionType, ObjectType, ScrollPaginationProps } from "@armco/types"
import { get } from "@armco/utils/network"
-import { getWindowElement, getDocumentElement } from "@armco/utils/domHelper"
import Icon from "@armco/icon"
import "./ScrollPagination.component.scss"
function isElementInViewport(el: HTMLElement, demo?: boolean): boolean {
const rect = el.getBoundingClientRect()
- const windowObj = getWindowElement(demo)
- const documentObj = getDocumentElement(demo)
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
- (windowObj?.innerHeight ||
- documentObj?.documentElement.clientHeight ||
- 0) &&
+ (window.innerHeight || document.documentElement.clientHeight || 0) &&
rect.right <=
- (windowObj?.innerWidth || documentObj?.documentElement.clientWidth || 0)
+ (window.innerWidth || document.documentElement.clientWidth || 0)
)
}
diff --git a/src/SidePanel.tsx b/src/SidePanel.tsx
index 7dc58ad..0822dbc 100755
--- a/src/SidePanel.tsx
+++ b/src/SidePanel.tsx
@@ -39,9 +39,9 @@ const SidePanel = memo((props: SidePanelProps): JSX.Element | null => {
: !placement || placement === ArPlacement.RIGHT
? "right"
: "left"
- return component || (componentName && SelectedComponent) ? (
+ return component || SelectedComponent ? (
{
content="Close"
classes="position-absolute top-0 end-0"
variant={ArButtonVariants.LINK}
- onClick={() => setRightPanelContent({ name: "" })}
+ onClick={() => setRightPanelContent({ componentName: "" })}
/>
)}
diff --git a/src/Tab.component.scss b/src/Tab.component.scss
index 1ce12ad..b765c55 100755
--- a/src/Tab.component.scss
+++ b/src/Tab.component.scss
@@ -17,6 +17,10 @@
// background-color: var(--ar-bg-selected);
}
+ &.compact {
+ max-height: 2rem;
+ }
+
&.minimal {
&:hover {
color: var(--ar-color-secondary);
diff --git a/src/Tab.tsx b/src/Tab.tsx
index 9829335..85a46c7 100755
--- a/src/Tab.tsx
+++ b/src/Tab.tsx
@@ -35,14 +35,12 @@ const Tab = memo(
// Wrap with a setTimeout to delay calculation of tab bounds
// since tab bounds change after icons are added from API
setTimeout(() => {
- const selectedTabDimensions =
- tabRef.current && tabRef.current.getBoundingClientRect()
- let selectedWidth, selectedLeft
- if (selectedTabDimensions) {
- selectedWidth = selectedTabDimensions.width
- selectedLeft = tabRef.current.offsetLeft
+ if (tabRef.current) {
+ const selectedTabDimensions = tabRef.current.getBoundingClientRect()
+ const selectedWidth = selectedTabDimensions.width
+ const selectedLeft = tabRef.current.offsetLeft
+ bubbleDimensions(selectedWidth, selectedLeft)
}
- bubbleDimensions(selectedWidth, selectedLeft)
}, 0)
}
}, [isActive, bubbleDimensions])
diff --git a/src/TabBar.component.scss b/src/TabBar.component.scss
index 3c8c73c..8ffb0f2 100755
--- a/src/TabBar.component.scss
+++ b/src/TabBar.component.scss
@@ -15,6 +15,10 @@
}
}
+ &.compact {
+ height: 2rem;
+ }
+
&.minimal {
height: 2rem;
font-size: 0.7rem;
diff --git a/src/TabBar.tsx b/src/TabBar.tsx
index 02efad9..8e148fc 100755
--- a/src/TabBar.tsx
+++ b/src/TabBar.tsx
@@ -34,7 +34,7 @@ const TabBar = (props: TabBarProps): JSX.Element => {
theme,
...rest
} = props
- const [activeTab, setActiveTabASync] = useState
()
+ const [activeTab, setActiveTabAsync] = useState()
const [hoveredTab, setHoveredTab] = useState<{
data: TabProps
element: Element
@@ -44,7 +44,7 @@ const TabBar = (props: TabBarProps): JSX.Element => {
const useData = data || (demo && dummyData)
const setActiveTab = (activeTab: ObjectType) => {
- setActiveTabASync((currentActiveTab) =>
+ setActiveTabAsync((currentActiveTab) =>
activeTab.id === ""
? activeTab
: {
diff --git a/src/Table.tsx b/src/Table.tsx
index c024c46..fbb3c9f 100755
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -1,5 +1,11 @@
-import { CSSProperties, useMemo } from "react"
-import { Column, useTable } from "react-table"
+import { CSSProperties, ReactNode, useMemo } from "react"
+import {
+ AccessorFnColumnDef,
+ AccessorKeyColumnDef,
+ flexRender,
+ getCoreRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
import {
ArTableLayouts,
ObjectType,
@@ -8,19 +14,20 @@ import {
} from "@armco/types"
import "./Table.component.scss"
-const dummyColumns: Array> = [
- { Header: "S. No.", accessor: "sNo" },
+const dummyColumns: Array<
+ | AccessorKeyColumnDef
+ | AccessorFnColumnDef
+> = [
+ { header: "S. No.", accessorKey: "sNo" },
{
- Header: "Name",
- accessor: "name",
- classes: "text-start ps-3",
- style: { width: "7rem" },
- } as Column,
- { Header: "Description", accessor: "about" },
- { Header: "Type", accessor: "type" },
- { Header: "Status", accessor: "status" },
- { Header: "Assignee", accessor: "assignee" },
- { Header: "Actions" },
+ header: "Name",
+ accessorKey: "name",
+ },
+ { header: "Description", accessorKey: "about" },
+ { header: "Type", accessorKey: "type" },
+ { header: "Status", accessorKey: "status" },
+ { header: "Assignee", accessorKey: "assignee" },
+ { header: "Actions", accessorKey: "actions" },
]
const dummyData: Array = [
@@ -109,11 +116,12 @@ const Table = (props: TableProps) => {
[],
)
const useData = data ? data : demo ? dummyData : []
- const { getTableProps, headerGroups, rows, prepareRow } =
- useTable({
- columns: useColumns,
- data: useData,
- })
+
+ const table = useReactTable({
+ data: useData,
+ columns: useColumns,
+ getCoreRowModel: getCoreRowModel(),
+ })
const layoutConfig: ObjectType =
LAYOUT_CONFIGS[layout || ArTableLayouts.NORMAL]
@@ -125,38 +133,48 @@ const Table = (props: TableProps) => {
layout ? " " + layout : ""
} ${layoutConfig.fontClass as string}`}
>
-
+
- {headerGroups?.map((headerGroup) => (
-
- {headerGroup.headers.map((column) => (
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
|
- {column.render("Header")}
+ {
+ flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ ) as ReactNode
+ }
|
))}
))}
- {rows?.map((row, i) => {
- prepareRow(row)
+ {table.getRowModel().rows?.map((row, i) => {
return (
-
- {row.cells.map((cell) => {
+
+ {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
+ {row.getVisibleCells().map((cell) => {
return (
|
- {cell.render("Cell")}
+ {
+ flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext(),
+ ) as ReactNode
+ }
|
)
})}
diff --git a/src/Text.component.scss b/src/Text.component.scss
index 2aa11e2..b557c7b 100755
--- a/src/Text.component.scss
+++ b/src/Text.component.scss
@@ -4,6 +4,7 @@
--text-shadow: none;
--text-overflow: auto;
--text-animation: scrollText 10s linear infinite;
+ white-space: pre;
position: relative;
line-height: 1.1rem;
min-height: 1.1rem;
diff --git a/src/Text.tsx b/src/Text.tsx
index a971d50..faa9b8d 100755
--- a/src/Text.tsx
+++ b/src/Text.tsx
@@ -7,7 +7,6 @@ import {
TextFormat,
TextProps,
} from "@armco/types"
-import { getDocumentElement, getWindowElement } from "@armco/utils/domHelper"
import Tooltip from "./Tooltip"
import Chunk from "./Chunk"
import "./Text.component.scss"
@@ -57,9 +56,9 @@ const Text = (props: TextProps): JSX.Element => {
width,
...rest
} = props
- const { chunks, cursorPosition, startContainer, id, text } = descriptor
+ const { chunks, cursorPosition, startContainer, id, text } = descriptor || {}
const [contentEditable, setContentEditable] = useState()
- const textContentRef = useRef()
+ const textContentRef = useRef("")
const textElementRef = useRef(null)
const [isOverflowing, setIsOverflowing] = useState()
const [animationDuration, setAnimationDuration] = useState("5s")
@@ -152,10 +151,8 @@ const Text = (props: TextProps): JSX.Element => {
}, [animationDuration, hasOverflowScrollEffect, style, alignment, width])
useEffect(() => {
- const docObj = getDocumentElement(demo)
- const winObj = getWindowElement(demo)
- const range = docObj?.createRange()
- const sel = winObj?.getSelection()
+ const range = document.createRange()
+ const sel = window.getSelection()
const textNode = startContainer || textElementRef.current?.firstChild
if (textNode && sel && range) {
diff --git a/src/TextInput.tsx b/src/TextInput.tsx
index c5d1b7c..f08e4f8 100755
--- a/src/TextInput.tsx
+++ b/src/TextInput.tsx
@@ -16,6 +16,7 @@ const TextInput = (props: TextInputProps): JSX.Element => {
const {
action,
actionIcon,
+ actionIconElement,
assistiveContent,
classes,
containerClasses,
@@ -54,10 +55,12 @@ const TextInput = (props: TextInputProps): JSX.Element => {
}, [value])
const assistiveContentRender = assistiveContent ? (
- "content" in assistiveContent && "onClick" in assistiveContent ? (
+ typeof assistiveContent === "object" &&
+ "content" in assistiveContent &&
+ "onClick" in assistiveContent ? (
@@ -68,7 +71,15 @@ const TextInput = (props: TextInputProps): JSX.Element => {
const labelRender = (
-
+
diff --git a/src/AppAndToolsSelector.tsx b/src/AppAndToolsSelector.tsx
index 5ad73c6..ecdca3b 100755
--- a/src/AppAndToolsSelector.tsx
+++ b/src/AppAndToolsSelector.tsx
@@ -26,10 +26,12 @@ const AppTile = (props: AppTileProps) => {
size: "2rem",
colors: {
fillColor: theme === ArThemes.LIGHT1 ? "#777" : "#bbb",
+ strokeColor: theme === ArThemes.LIGHT1 ? "#777" : "#bbb",
hoverFillColor: theme === ArThemes.LIGHT1 ? "black" : "white",
},
}}
icon={icon}
+ fillPath
/>
{label}
diff --git a/src/ArIconsViewer.component.scss b/src/ArIconsViewer.component.scss
index 34c825f..3653f42 100755
--- a/src/ArIconsViewer.component.scss
+++ b/src/ArIconsViewer.component.scss
@@ -1,5 +1,6 @@
.ar-ArIconsViewer {
grid-template-columns: minmax(10rem, 1fr);
+ color: #0b8dfa;
.ar-ScrollPagination__items-container.compact, .ar-ScrollPagination__items-container.comfy {
.ar-ArIconsViewer__icon-container:hover {
diff --git a/src/ArIconsViewer.tsx b/src/ArIconsViewer.tsx
index 0663d55..2f77d0f 100755
--- a/src/ArIconsViewer.tsx
+++ b/src/ArIconsViewer.tsx
@@ -21,7 +21,7 @@ import Tooltip from "./Tooltip"
import "./ArIconsViewer.component.scss"
const pageApi =
- STATIC_HOST[process.env.NODE_ENV as "development" | "production"] +
+ STATIC_HOST[process.env.NODE_ENV] +
ENDPOINTS.STATIC.ICON.ROOT +
ENDPOINTS.STATIC.ICON.PAGE
diff --git a/src/BrowserIncompatibility.tsx b/src/BrowserIncompatibility.tsx
index 2b2f3b7..aa86d87 100755
--- a/src/BrowserIncompatibility.tsx
+++ b/src/BrowserIncompatibility.tsx
@@ -1,6 +1,7 @@
import { v4 as uuid } from "uuid"
import { ArThemes, BrowserIncompatibilityProps } from "@armco/types"
import { copyToClipboard } from "@armco/utils/helper"
+import { useTheme } from "@armco/utils/hooks"
import Icon from "@armco/icon"
import Alert from "./Alert"
import Link from "./Link"
@@ -9,7 +10,8 @@ import "./BrowserIncompatibility.component.scss"
const BrowserIncompatibility = (
props: BrowserIncompatibilityProps,
): JSX.Element => {
- const { applicationName, moreLink, theme } = props
+ const { applicationName, moreLink } = props
+ const { theme } = useTheme()
const demoDummyLink = "https://notabuck.com/armco-design-system/docs/devices"
const demoAppName = '"My Awesome App"'
const helpLink = moreLink || demoDummyLink
diff --git a/src/BubbleChart.tsx b/src/BubbleChart.tsx
index 491ca5c..5c30367 100755
--- a/src/BubbleChart.tsx
+++ b/src/BubbleChart.tsx
@@ -1,11 +1,9 @@
import { useEffect, useRef } from "react"
import Highcharts from "highcharts"
-import HighchartsMore from "highcharts/highcharts-more"
+import "highcharts/highcharts-more"
import { BubbleChartProps, ObjectType } from "@armco/types"
import "./BubbleChart.component.scss"
-HighchartsMore(Highcharts)
-
const BubbleChart = (props: BubbleChartProps): JSX.Element => {
const { clickHandler, data } = props
const chartRef = useRef(null)
diff --git a/src/Button.tsx b/src/Button.tsx
index 5498166..d212498 100755
--- a/src/Button.tsx
+++ b/src/Button.tsx
@@ -13,7 +13,6 @@ const Button = (props: ButtonProps) => {
const {
classes,
color,
- containerClasses,
contentClasses,
contentStyles,
content,
@@ -45,7 +44,7 @@ const Button = (props: ButtonProps) => {
variant === ArButtonVariants.LINK ||
variant === ArButtonVariants.LINKHOVEREFFECT
) {
- setColor = "black"
+ setColor = theme === ArThemes.DARK1 ? "white" : "black"
} else if (variant === ArButtonVariants.SECONDARY) {
setColor = hovered
? theme === ArThemes.DARK1
@@ -81,7 +80,9 @@ const Button = (props: ButtonProps) => {
{...rest}
>
{preIcon && (
-
+