boreal-ui 0.0.59 → 0.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/{Breadcrumbs-Bh_Ocv4_.js → Breadcrumbs-C2IzEdls.js} +3 -2
- package/dist/core/Breadcrumbs-C2IzEdls.js.map +1 -0
- package/dist/core/{Breadcrumbs-BUc98niR.cjs → Breadcrumbs-CALCSPkH.cjs} +3 -2
- package/dist/core/Breadcrumbs-CALCSPkH.cjs.map +1 -0
- package/dist/core/Breadcrumbs.cjs.js +1 -1
- package/dist/core/Breadcrumbs.js +1 -1
- package/dist/core/{CommandPalette-D_b1iV5A.js → CommandPalette-CDrgdLqM.js} +2 -2
- package/dist/core/{CommandPalette-D_b1iV5A.js.map → CommandPalette-CDrgdLqM.js.map} +1 -1
- package/dist/core/{CommandPalette-BzC-BGaJ.cjs → CommandPalette-va8rXgrv.cjs} +2 -2
- package/dist/core/{CommandPalette-BzC-BGaJ.cjs.map → CommandPalette-va8rXgrv.cjs.map} +1 -1
- package/dist/core/CommandPalette.cjs.js +1 -1
- package/dist/core/CommandPalette.js +1 -1
- package/dist/core/Tabs-BFn-TRKL.cjs +226 -0
- package/dist/core/Tabs-BFn-TRKL.cjs.map +1 -0
- package/dist/core/Tabs-DkdkDwei.js +227 -0
- package/dist/core/Tabs-DkdkDwei.js.map +1 -0
- package/dist/core/Tabs.cjs.js +1 -1
- package/dist/core/Tabs.js +1 -1
- package/dist/core/{TagInput-DjlwO3Sm.cjs → TagInput-BeMxm2HH.cjs} +26 -14
- package/dist/core/TagInput-BeMxm2HH.cjs.map +1 -0
- package/dist/core/{TagInput-DsB37n5J.js → TagInput-D8BA-iET.js} +27 -15
- package/dist/core/TagInput-D8BA-iET.js.map +1 -0
- package/dist/core/TagInput.cjs.js +1 -1
- package/dist/core/TagInput.js +1 -1
- package/dist/core/{TextArea-CIdsUIzt.js → TextArea-FZ2to7QC.js} +3 -1
- package/dist/core/TextArea-FZ2to7QC.js.map +1 -0
- package/dist/core/{TextArea-BJGUr6r_.cjs → TextArea-tRdQdCYT.cjs} +3 -1
- package/dist/core/TextArea-tRdQdCYT.cjs.map +1 -0
- package/dist/core/TextArea.cjs.js +1 -1
- package/dist/core/TextArea.js +1 -1
- package/dist/core/{TextInput-BIy9JDCI.js → TextInput-BiB2ml8J.js} +3 -1
- package/dist/core/TextInput-BiB2ml8J.js.map +1 -0
- package/dist/core/{TextInput-Bn1SMCPR.cjs → TextInput-DK7uh51U.cjs} +3 -1
- package/dist/core/TextInput-DK7uh51U.cjs.map +1 -0
- package/dist/core/TextInput.cjs.js +1 -1
- package/dist/core/TextInput.js +1 -1
- package/dist/core/{Timeline-BulLz34H.js → Timeline-C-FaSSxr.js} +3 -2
- package/dist/core/Timeline-C-FaSSxr.js.map +1 -0
- package/dist/core/{Timeline-Dd4Rr21W.cjs → Timeline-CM31Cti_.cjs} +3 -2
- package/dist/core/Timeline-CM31Cti_.cjs.map +1 -0
- package/dist/core/Timeline.cjs.js +1 -1
- package/dist/core/Timeline.js +1 -1
- package/dist/core/boreal-ui.css +0 -487
- package/dist/core/index.cjs.js +7 -7
- package/dist/core/index.js +7 -7
- package/dist/next/{Breadcrumbs-BlFi63K8.cjs → Breadcrumbs-DBT6uVwY.cjs} +3 -2
- package/dist/next/Breadcrumbs-DBT6uVwY.cjs.map +1 -0
- package/dist/next/{Breadcrumbs-D9BMYEZi.js → Breadcrumbs-hXIVEQX-.js} +3 -2
- package/dist/next/Breadcrumbs-hXIVEQX-.js.map +1 -0
- package/dist/next/Breadcrumbs.cjs.js +1 -1
- package/dist/next/Breadcrumbs.js +1 -1
- package/dist/next/{CommandPalette-GeFIL9EG.js → CommandPalette-C4Bchj4Y.js} +2 -2
- package/dist/next/{CommandPalette-GeFIL9EG.js.map → CommandPalette-C4Bchj4Y.js.map} +1 -1
- package/dist/next/{CommandPalette-CJhd23B2.cjs → CommandPalette-DzEKlStj.cjs} +2 -2
- package/dist/next/{CommandPalette-CJhd23B2.cjs.map → CommandPalette-DzEKlStj.cjs.map} +1 -1
- package/dist/next/CommandPalette.cjs.js +1 -1
- package/dist/next/CommandPalette.js +1 -1
- package/dist/next/Tabs-BEskeiYq.js +256 -0
- package/dist/next/Tabs-BEskeiYq.js.map +1 -0
- package/dist/next/Tabs-bFqyifwl.cjs +255 -0
- package/dist/next/Tabs-bFqyifwl.cjs.map +1 -0
- package/dist/next/Tabs.cjs.js +1 -1
- package/dist/next/Tabs.js +1 -1
- package/dist/next/{TagInput-BBDft9tw.js → TagInput-CHNJ9Cdh.js} +27 -15
- package/dist/next/TagInput-CHNJ9Cdh.js.map +1 -0
- package/dist/next/{TagInput-BdKQoh2d.cjs → TagInput-DjX8Z4-o.cjs} +26 -14
- package/dist/next/TagInput-DjX8Z4-o.cjs.map +1 -0
- package/dist/next/TagInput.cjs.js +1 -1
- package/dist/next/TagInput.js +1 -1
- package/dist/next/{TextArea-n9HgwyJE.js → TextArea-BDOiqHNv.js} +3 -1
- package/dist/next/TextArea-BDOiqHNv.js.map +1 -0
- package/dist/next/{TextArea-rwkjK4Rf.cjs → TextArea-uz-lx3iR.cjs} +3 -1
- package/dist/next/TextArea-uz-lx3iR.cjs.map +1 -0
- package/dist/next/TextArea.cjs.js +1 -1
- package/dist/next/TextArea.js +1 -1
- package/dist/next/{TextInput-DPArjoEr.cjs → TextInput-CKv7Umxo.cjs} +3 -1
- package/dist/next/TextInput-CKv7Umxo.cjs.map +1 -0
- package/dist/next/{TextInput-dwn3uD65.js → TextInput-D0zTOb7y.js} +3 -1
- package/dist/next/TextInput-D0zTOb7y.js.map +1 -0
- package/dist/next/TextInput.cjs.js +1 -1
- package/dist/next/TextInput.js +1 -1
- package/dist/next/{Timeline-9947mxJO.js → Timeline-DOB2jvQw.js} +3 -2
- package/dist/next/Timeline-DOB2jvQw.js.map +1 -0
- package/dist/next/{Timeline-3bNOgI6C.cjs → Timeline-Dknnqv8w.cjs} +3 -2
- package/dist/next/Timeline-Dknnqv8w.cjs.map +1 -0
- package/dist/next/Timeline.cjs.js +1 -1
- package/dist/next/Timeline.js +1 -1
- package/dist/next/boreal-ui.css +64 -550
- package/dist/next/index.cjs.js +7 -7
- package/dist/next/index.js +7 -7
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Breadcrumbs/Breadcrumbs.types.d.ts +5 -0
- package/dist/types/components/Breadcrumbs/Breadcrumbs.types.d.ts.map +1 -1
- package/dist/types/components/Breadcrumbs/BreadcrumbsBase.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.types.d.ts +11 -5
- package/dist/types/components/Tabs/Tabs.types.d.ts.map +1 -1
- package/dist/types/components/Tabs/TabsBase.d.ts.map +1 -1
- package/dist/types/components/Tabs/core/Tabs.d.ts.map +1 -1
- package/dist/types/components/TagInput/TagInput.types.d.ts +5 -0
- package/dist/types/components/TagInput/TagInput.types.d.ts.map +1 -1
- package/dist/types/components/TagInput/TagInputBase.d.ts.map +1 -1
- package/dist/types/components/TextArea/TextArea.types.d.ts +6 -1
- package/dist/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/dist/types/components/TextArea/TextAreaBase.d.ts.map +1 -1
- package/dist/types/components/TextInput/TextInput.types.d.ts +6 -1
- package/dist/types/components/TextInput/TextInput.types.d.ts.map +1 -1
- package/dist/types/components/TextInput/TextInputBase.d.ts.map +1 -1
- package/dist/types/components/Timeline/Timeline.types.d.ts +5 -0
- package/dist/types/components/Timeline/Timeline.types.d.ts.map +1 -1
- package/dist/types/components/Timeline/TimelineBase.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/core/Breadcrumbs-BUc98niR.cjs.map +0 -1
- package/dist/core/Breadcrumbs-Bh_Ocv4_.js.map +0 -1
- package/dist/core/Tabs-BheAr-wE.cjs +0 -212
- package/dist/core/Tabs-BheAr-wE.cjs.map +0 -1
- package/dist/core/Tabs-CUDoy3wZ.js +0 -213
- package/dist/core/Tabs-CUDoy3wZ.js.map +0 -1
- package/dist/core/TagInput-DjlwO3Sm.cjs.map +0 -1
- package/dist/core/TagInput-DsB37n5J.js.map +0 -1
- package/dist/core/TextArea-BJGUr6r_.cjs.map +0 -1
- package/dist/core/TextArea-CIdsUIzt.js.map +0 -1
- package/dist/core/TextInput-BIy9JDCI.js.map +0 -1
- package/dist/core/TextInput-Bn1SMCPR.cjs.map +0 -1
- package/dist/core/Timeline-BulLz34H.js.map +0 -1
- package/dist/core/Timeline-Dd4Rr21W.cjs.map +0 -1
- package/dist/next/Breadcrumbs-BlFi63K8.cjs.map +0 -1
- package/dist/next/Breadcrumbs-D9BMYEZi.js.map +0 -1
- package/dist/next/Tabs-Bur4oYVF.js +0 -264
- package/dist/next/Tabs-Bur4oYVF.js.map +0 -1
- package/dist/next/Tabs-D-5VRbfh.cjs +0 -263
- package/dist/next/Tabs-D-5VRbfh.cjs.map +0 -1
- package/dist/next/TagInput-BBDft9tw.js.map +0 -1
- package/dist/next/TagInput-BdKQoh2d.cjs.map +0 -1
- package/dist/next/TextArea-n9HgwyJE.js.map +0 -1
- package/dist/next/TextArea-rwkjK4Rf.cjs.map +0 -1
- package/dist/next/TextInput-DPArjoEr.cjs.map +0 -1
- package/dist/next/TextInput-dwn3uD65.js.map +0 -1
- package/dist/next/Timeline-3bNOgI6C.cjs.map +0 -1
- package/dist/next/Timeline-9947mxJO.js.map +0 -1
|
@@ -9,6 +9,7 @@ import { B as Button } from "./Button-CC0Q_XPy.js";
|
|
|
9
9
|
const ELLIPSIS_LABEL = "…";
|
|
10
10
|
const BreadcrumbsBase = ({
|
|
11
11
|
items,
|
|
12
|
+
ariaLabel = "Breadcrumbs",
|
|
12
13
|
theme = getDefaultTheme(),
|
|
13
14
|
rounding = getDefaultRounding(),
|
|
14
15
|
shadow = getDefaultShadow(),
|
|
@@ -60,7 +61,7 @@ const BreadcrumbsBase = ({
|
|
|
60
61
|
return /* @__PURE__ */ jsx(
|
|
61
62
|
"nav",
|
|
62
63
|
{
|
|
63
|
-
"aria-label":
|
|
64
|
+
"aria-label": ariaLabel,
|
|
64
65
|
"data-testid": testId ? `${testId}-nav-container` : void 0,
|
|
65
66
|
className: breadcrumbsClass,
|
|
66
67
|
children: /* @__PURE__ */ jsx(
|
|
@@ -191,4 +192,4 @@ export {
|
|
|
191
192
|
Breadcrumbs as B,
|
|
192
193
|
ELLIPSIS_LABEL as E
|
|
193
194
|
};
|
|
194
|
-
//# sourceMappingURL=Breadcrumbs-
|
|
195
|
+
//# sourceMappingURL=Breadcrumbs-C2IzEdls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs-C2IzEdls.js","sources":["../../src/components/Breadcrumbs/Breadcrumbs.types.ts","../../src/components/Breadcrumbs/BreadcrumbsBase.tsx","../../src/components/Breadcrumbs/core/Breadcrumbs.tsx"],"sourcesContent":["import {\r\n RoundingType,\r\n ShadowType,\r\n SizeType,\r\n StateType,\r\n ThemeType,\r\n} from \"@/types/types\";\r\n\r\n/**\r\n * A breadcrumb item used to define a single step in the navigation path.\r\n */\r\nexport interface Breadcrumb {\r\n /**\r\n * The display label for the breadcrumb.\r\n */\r\n label: string;\r\n\r\n /**\r\n * Optional URL the breadcrumb should link to.\r\n * If not provided, it is rendered as plain text.\r\n */\r\n href?: string;\r\n}\r\n\r\n/**\r\n * Props for the Breadcrumbs component.\r\n */\r\nexport interface BreadcrumbsProps {\r\n /**\r\n * An array of breadcrumb items.\r\n */\r\n items: Breadcrumb[];\r\n\r\n /**\r\n * Accessible label for the breadcrumb navigation.\r\n * Defaults to \"Breadcrumbs\".\r\n */\r\n ariaLabel?: string;\r\n\r\n /**\r\n * Disables interaction and styles as disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional custom separator node between breadcrumb items.\r\n * Defaults to a right chevron icon.\r\n */\r\n separator?: React.ReactNode;\r\n\r\n /**\r\n * Theme style to apply to the breadcrumbs\r\n * ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear').\r\n */\r\n theme?: ThemeType;\r\n\r\n /**\r\n * Rounding style to apply to the breadcrumbs\r\n * ('none' | 'small' | 'medium' | 'large' | 'full').\r\n */\r\n rounding?: RoundingType;\r\n\r\n /**\r\n * Shadow style to apply to the breadcrumbs\r\n * ('none' | 'light' | 'medium' | 'strong' | 'intense').\r\n */\r\n shadow?: ShadowType;\r\n\r\n /**\r\n * State of the breadcrumbs\r\n * ('success' | 'error' | 'warning' | 'disabled' | '').\r\n * Used for visual feedback.\r\n */\r\n state?: StateType;\r\n\r\n /**\r\n * Size of the breadcrumbs\r\n * ('xs' | 'small' | 'medium' | 'large' | 'xl').\r\n */\r\n size?: SizeType;\r\n\r\n /**\r\n * Additional class name for custom styling.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Whether to use the outline style.\r\n */\r\n outline?: boolean;\r\n\r\n /**\r\n * Maximum number of visible items before collapsing into an ellipsis.\r\n */\r\n maxVisible?: number;\r\n\r\n /**\r\n * Optional test ID for testing frameworks.\r\n */\r\n \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * Label used to represent collapsed breadcrumb items.\r\n */\r\nexport const ELLIPSIS_LABEL = \"…\";\r\n\r\nexport interface BreadcrumbsBaseProps extends BreadcrumbsProps {\r\n classMap: Record<string, string>;\r\n LinkComponent?: React.ElementType;\r\n ButtonComponent: React.ElementType;\r\n}\r\n","import React, { useMemo, useState } from \"react\";\r\nimport {\r\n Breadcrumb,\r\n BreadcrumbsBaseProps,\r\n ELLIPSIS_LABEL,\r\n} from \"./Breadcrumbs.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ArrowRightIcon } from \"../../Icons/index\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport const BreadcrumbsBase: React.FC<BreadcrumbsBaseProps> = ({\r\n items,\r\n ariaLabel = \"Breadcrumbs\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n separator,\r\n classMap,\r\n disabled = false,\r\n size = getDefaultSize(),\r\n outline = false,\r\n className = \"\",\r\n maxVisible,\r\n LinkComponent = \"a\",\r\n ButtonComponent = \"button\",\r\n \"data-testid\": testId = \"breadcrumbs\",\r\n}) => {\r\n const [isExpanded, setIsExpanded] = useState(false);\r\n const handleExpand = () => setIsExpanded(true);\r\n\r\n if (!items || items.length === 0) return null;\r\n\r\n const visibleItems: Breadcrumb[] = useMemo(() => {\r\n if (isExpanded || !maxVisible || items.length <= maxVisible) return items;\r\n const first = items[0];\r\n const lastItems = items.slice(items.length - (maxVisible - 2));\r\n return [first, { label: ELLIPSIS_LABEL }, ...lastItems];\r\n }, [items, isExpanded, maxVisible]);\r\n\r\n const breadcrumbsClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.breadcrumbs,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n disabled && classMap.disabled,\r\n outline && classMap.outline,\r\n className,\r\n ),\r\n [\r\n theme,\r\n state,\r\n size,\r\n shadow,\r\n rounding,\r\n disabled,\r\n outline,\r\n className,\r\n classMap,\r\n ],\r\n );\r\n\r\n return (\r\n <nav\r\n aria-label={ariaLabel}\r\n data-testid={testId ? `${testId}-nav-container` : undefined}\r\n className={breadcrumbsClass}\r\n >\r\n <ol\r\n className={classMap.list}\r\n data-testid={testId ? `${testId}-nav-list` : undefined}\r\n itemScope\r\n itemType=\"https://schema.org/BreadcrumbList\"\r\n >\r\n {visibleItems.map((item, index) => {\r\n const isLast = index === visibleItems.length - 1;\r\n const isEllipsis = item.label === ELLIPSIS_LABEL;\r\n\r\n const itemClassName = combineClassNames(\r\n classMap.item,\r\n isExpanded && !isEllipsis && classMap.item_animate,\r\n isLast && classMap.item_active,\r\n );\r\n\r\n return (\r\n <li\r\n data-testid={testId ? `${testId}-nav-item` : undefined}\r\n key={`${item.label}-${item.href ?? index}`}\r\n className={itemClassName}\r\n itemProp=\"itemListElement\"\r\n itemScope\r\n itemType=\"https://schema.org/ListItem\"\r\n >\r\n {isEllipsis ? (\r\n <ButtonComponent\r\n theme=\"clear\"\r\n size=\"xs\"\r\n className={classMap.ellipsis}\r\n aria-label=\"Show all breadcrumbs\"\r\n aria-expanded={isExpanded}\r\n onClick={disabled ? undefined : handleExpand}\r\n disabled={disabled}\r\n tabIndex={disabled ? -1 : 0}\r\n data-testid={testId ? `${testId}-ellipsis` : undefined}\r\n >\r\n {item.label}\r\n </ButtonComponent>\r\n ) : item.href && !isLast ? (\r\n disabled ? (\r\n // Disabled: render non-interactive label for links\r\n <span\r\n className={classMap.link_disabled}\r\n title={item.label}\r\n itemProp=\"name\"\r\n data-testid={\r\n testId ? `${testId}-nav-item-label` : undefined\r\n }\r\n >\r\n {item.label}\r\n </span>\r\n ) : (\r\n <LinkComponent\r\n href={item.href}\r\n className={classMap.link}\r\n title={item.label}\r\n itemProp=\"item\"\r\n data-testid={\r\n testId ? `${testId}-nav-item-label` : undefined\r\n }\r\n >\r\n <span itemProp=\"name\" className={classMap.link_label}>\r\n {item.label}\r\n </span>\r\n </LinkComponent>\r\n )\r\n ) : (\r\n <span\r\n className={classMap.current}\r\n itemProp=\"name\"\r\n aria-current=\"page\"\r\n data-testid={\r\n testId ? `${testId}-nav-item-current` : undefined\r\n }\r\n >\r\n {item.label}\r\n </span>\r\n )}\r\n\r\n {!isLast && (\r\n <span className={classMap.separator} aria-hidden=\"true\">\r\n {separator ?? <ArrowRightIcon />}\r\n </span>\r\n )}\r\n <meta itemProp=\"position\" content={`${index + 1}`} />\r\n </li>\r\n );\r\n })}\r\n </ol>\r\n </nav>\r\n );\r\n};\r\n\r\nBreadcrumbsBase.displayName = \"BreadcrumbsBase\";\r\n","import React from \"react\";\r\nimport \"./Breadcrumbs.scss\";\r\nimport { BreadcrumbsBase } from \"../BreadcrumbsBase\";\r\nimport { BreadcrumbsProps } from \"../Breadcrumbs.types\";\r\nimport { Button } from \"../../../index.core\";\r\n\r\nconst classes = {\r\n breadcrumbs: \"breadcrumbs\",\r\n\r\n primary: \"breadcrumbs_primary\",\r\n secondary: \"breadcrumbs_secondary\",\r\n tertiary: \"breadcrumbs_tertiary\",\r\n quaternary: \"breadcrumbs_quaternary\",\r\n\r\n success: \"breadcrumbs_success\",\r\n warning: \"breadcrumbs_warning\",\r\n error: \"breadcrumbs_error\",\r\n\r\n clear: \"breadcrumbs_clear\",\r\n\r\n outline: \"breadcrumbs_outline\",\r\n disabled: \"breadcrumbs_disabled\",\r\n\r\n shadowNone: \"breadcrumbs_shadow-None\",\r\n shadowLight: \"breadcrumbs_shadow-Light\",\r\n shadowMedium: \"breadcrumbs_shadow-Medium\",\r\n shadowStrong: \"breadcrumbs_shadow-Strong\",\r\n shadowIntense: \"breadcrumbs_shadow-Intense\",\r\n\r\n roundNone: \"breadcrumbs_round-None\",\r\n roundSmall: \"breadcrumbs_round-Small\",\r\n roundMedium: \"breadcrumbs_round-Medium\",\r\n roundLarge: \"breadcrumbs_round-Large\",\r\n\r\n xs: \"breadcrumbs_xs\",\r\n small: \"breadcrumbs_small\",\r\n medium: \"breadcrumbs_medium\",\r\n large: \"breadcrumbs_large\",\r\n xl: \"breadcrumbs_xl\",\r\n\r\n list: \"breadcrumbs_list\",\r\n item: \"breadcrumbs_item\",\r\n item_animate: \"breadcrumbs_item_animate\",\r\n item_active: \"breadcrumbs_item_active\",\r\n ellipsis: \"breadcrumbs_ellipsis\",\r\n link: \"breadcrumbs_link\",\r\n link_label: \"breadcrumbs_link_label\",\r\n current: \"breadcrumbs_current\",\r\n separator: \"breadcrumbs_separator\",\r\n separator_icon: \"breadcrumbs_separator_icon\",\r\n};\r\n\r\nconst Breadcrumbs: React.FC<BreadcrumbsProps> = (props) => {\r\n return (\r\n <BreadcrumbsBase {...props} classMap={classes} ButtonComponent={Button} />\r\n );\r\n};\r\nBreadcrumbs.displayName = \"Breadcrumbs\";\r\nexport default Breadcrumbs;\r\n"],"names":[],"mappings":";;;;;;;;AAyGO,MAAM,iBAAiB;ACzFvB,MAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,gBAAA;AAAA,EACR,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO,eAAA;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,SAAS;AAC1B,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,eAAe,MAAM,cAAc,IAAI;AAE7C,MAAI,CAAC,SAAS,MAAM,WAAW,EAAG,QAAO;AAEzC,QAAM,eAA6B,QAAQ,MAAM;AAC/C,QAAI,cAAc,CAAC,cAAc,MAAM,UAAU,WAAY,QAAO;AACpE,UAAM,QAAQ,MAAM,CAAC;AACrB,UAAM,YAAY,MAAM,MAAM,MAAM,UAAU,aAAa,EAAE;AAC7D,WAAO,CAAC,OAAO,EAAE,OAAO,eAAA,GAAkB,GAAG,SAAS;AAAA,EACxD,GAAG,CAAC,OAAO,YAAY,UAAU,CAAC;AAElC,QAAM,mBAAmB;AAAA,IACvB,MACE;AAAA,MACE,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,IAAI;AAAA,MACb,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD,YAAY,SAAS;AAAA,MACrB,WAAW,SAAS;AAAA,MACpB;AAAA,IAAA;AAAA,IAEJ;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAY;AAAA,MACZ,eAAa,SAAS,GAAG,MAAM,mBAAmB;AAAA,MAClD,WAAW;AAAA,MAEX,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,SAAS;AAAA,UACpB,eAAa,SAAS,GAAG,MAAM,cAAc;AAAA,UAC7C,WAAS;AAAA,UACT,UAAS;AAAA,UAER,UAAA,aAAa,IAAI,CAAC,MAAM,UAAU;AACjC,kBAAM,SAAS,UAAU,aAAa,SAAS;AAC/C,kBAAM,aAAa,KAAK,UAAU;AAElC,kBAAM,gBAAgB;AAAA,cACpB,SAAS;AAAA,cACT,cAAc,CAAC,cAAc,SAAS;AAAA,cACtC,UAAU,SAAS;AAAA,YAAA;AAGrB,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAa,SAAS,GAAG,MAAM,cAAc;AAAA,gBAE7C,WAAW;AAAA,gBACX,UAAS;AAAA,gBACT,WAAS;AAAA,gBACT,UAAS;AAAA,gBAER,UAAA;AAAA,kBAAA,aACC;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAM;AAAA,sBACN,MAAK;AAAA,sBACL,WAAW,SAAS;AAAA,sBACpB,cAAW;AAAA,sBACX,iBAAe;AAAA,sBACf,SAAS,WAAW,SAAY;AAAA,sBAChC;AAAA,sBACA,UAAU,WAAW,KAAK;AAAA,sBAC1B,eAAa,SAAS,GAAG,MAAM,cAAc;AAAA,sBAE5C,UAAA,KAAK;AAAA,oBAAA;AAAA,kBAAA,IAEN,KAAK,QAAQ,CAAC,SAChB;AAAA;AAAA,oBAEE;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAW,SAAS;AAAA,wBACpB,OAAO,KAAK;AAAA,wBACZ,UAAS;AAAA,wBACT,eACE,SAAS,GAAG,MAAM,oBAAoB;AAAA,wBAGvC,UAAA,KAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,sBAGR;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAM,KAAK;AAAA,sBACX,WAAW,SAAS;AAAA,sBACpB,OAAO,KAAK;AAAA,sBACZ,UAAS;AAAA,sBACT,eACE,SAAS,GAAG,MAAM,oBAAoB;AAAA,sBAGxC,UAAA,oBAAC,UAAK,UAAS,QAAO,WAAW,SAAS,YACvC,eAAK,MAAA,CACR;AAAA,oBAAA;AAAA,kBAAA,IAIJ;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW,SAAS;AAAA,sBACpB,UAAS;AAAA,sBACT,gBAAa;AAAA,sBACb,eACE,SAAS,GAAG,MAAM,sBAAsB;AAAA,sBAGzC,UAAA,KAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAIT,CAAC,UACA,oBAAC,QAAA,EAAK,WAAW,SAAS,WAAW,eAAY,QAC9C,UAAA,aAAa,oBAAC,gBAAA,CAAA,CAAe,GAChC;AAAA,kBAEF,oBAAC,UAAK,UAAS,YAAW,SAAS,GAAG,QAAQ,CAAC,GAAA,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,cAlE9C,GAAG,KAAK,KAAK,IAAI,KAAK,QAAQ,KAAK;AAAA,YAAA;AAAA,UAqE9C,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,gBAAgB,cAAc;ACtK9B,MAAM,UAAU;AAAA,EACd,aAAa;AAAA,EAEb,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EAEP,OAAO;AAAA,EAEP,SAAS;AAAA,EACT,UAAU;AAAA,EAEV,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EAEZ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,IAAI;AAAA,EAEJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAClB;AAEA,MAAM,cAA0C,CAAC,UAAU;AACzD,6BACG,iBAAA,EAAiB,GAAG,OAAO,UAAU,SAAS,iBAAiB,QAAQ;AAE5E;AACA,YAAY,cAAc;"}
|
|
@@ -10,6 +10,7 @@ const Button = require("./Button-zvElXSem.cjs");
|
|
|
10
10
|
const ELLIPSIS_LABEL = "…";
|
|
11
11
|
const BreadcrumbsBase = ({
|
|
12
12
|
items,
|
|
13
|
+
ariaLabel = "Breadcrumbs",
|
|
13
14
|
theme = borealStyleConfig.getDefaultTheme(),
|
|
14
15
|
rounding = borealStyleConfig.getDefaultRounding(),
|
|
15
16
|
shadow = borealStyleConfig.getDefaultShadow(),
|
|
@@ -61,7 +62,7 @@ const BreadcrumbsBase = ({
|
|
|
61
62
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
63
|
"nav",
|
|
63
64
|
{
|
|
64
|
-
"aria-label":
|
|
65
|
+
"aria-label": ariaLabel,
|
|
65
66
|
"data-testid": testId ? `${testId}-nav-container` : void 0,
|
|
66
67
|
className: breadcrumbsClass,
|
|
67
68
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -190,4 +191,4 @@ const Breadcrumbs = (props) => {
|
|
|
190
191
|
Breadcrumbs.displayName = "Breadcrumbs";
|
|
191
192
|
exports.Breadcrumbs = Breadcrumbs;
|
|
192
193
|
exports.ELLIPSIS_LABEL = ELLIPSIS_LABEL;
|
|
193
|
-
//# sourceMappingURL=Breadcrumbs-
|
|
194
|
+
//# sourceMappingURL=Breadcrumbs-CALCSPkH.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs-CALCSPkH.cjs","sources":["../../src/components/Breadcrumbs/Breadcrumbs.types.ts","../../src/components/Breadcrumbs/BreadcrumbsBase.tsx","../../src/components/Breadcrumbs/core/Breadcrumbs.tsx"],"sourcesContent":["import {\r\n RoundingType,\r\n ShadowType,\r\n SizeType,\r\n StateType,\r\n ThemeType,\r\n} from \"@/types/types\";\r\n\r\n/**\r\n * A breadcrumb item used to define a single step in the navigation path.\r\n */\r\nexport interface Breadcrumb {\r\n /**\r\n * The display label for the breadcrumb.\r\n */\r\n label: string;\r\n\r\n /**\r\n * Optional URL the breadcrumb should link to.\r\n * If not provided, it is rendered as plain text.\r\n */\r\n href?: string;\r\n}\r\n\r\n/**\r\n * Props for the Breadcrumbs component.\r\n */\r\nexport interface BreadcrumbsProps {\r\n /**\r\n * An array of breadcrumb items.\r\n */\r\n items: Breadcrumb[];\r\n\r\n /**\r\n * Accessible label for the breadcrumb navigation.\r\n * Defaults to \"Breadcrumbs\".\r\n */\r\n ariaLabel?: string;\r\n\r\n /**\r\n * Disables interaction and styles as disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional custom separator node between breadcrumb items.\r\n * Defaults to a right chevron icon.\r\n */\r\n separator?: React.ReactNode;\r\n\r\n /**\r\n * Theme style to apply to the breadcrumbs\r\n * ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear').\r\n */\r\n theme?: ThemeType;\r\n\r\n /**\r\n * Rounding style to apply to the breadcrumbs\r\n * ('none' | 'small' | 'medium' | 'large' | 'full').\r\n */\r\n rounding?: RoundingType;\r\n\r\n /**\r\n * Shadow style to apply to the breadcrumbs\r\n * ('none' | 'light' | 'medium' | 'strong' | 'intense').\r\n */\r\n shadow?: ShadowType;\r\n\r\n /**\r\n * State of the breadcrumbs\r\n * ('success' | 'error' | 'warning' | 'disabled' | '').\r\n * Used for visual feedback.\r\n */\r\n state?: StateType;\r\n\r\n /**\r\n * Size of the breadcrumbs\r\n * ('xs' | 'small' | 'medium' | 'large' | 'xl').\r\n */\r\n size?: SizeType;\r\n\r\n /**\r\n * Additional class name for custom styling.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Whether to use the outline style.\r\n */\r\n outline?: boolean;\r\n\r\n /**\r\n * Maximum number of visible items before collapsing into an ellipsis.\r\n */\r\n maxVisible?: number;\r\n\r\n /**\r\n * Optional test ID for testing frameworks.\r\n */\r\n \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * Label used to represent collapsed breadcrumb items.\r\n */\r\nexport const ELLIPSIS_LABEL = \"…\";\r\n\r\nexport interface BreadcrumbsBaseProps extends BreadcrumbsProps {\r\n classMap: Record<string, string>;\r\n LinkComponent?: React.ElementType;\r\n ButtonComponent: React.ElementType;\r\n}\r\n","import React, { useMemo, useState } from \"react\";\r\nimport {\r\n Breadcrumb,\r\n BreadcrumbsBaseProps,\r\n ELLIPSIS_LABEL,\r\n} from \"./Breadcrumbs.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ArrowRightIcon } from \"../../Icons/index\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport const BreadcrumbsBase: React.FC<BreadcrumbsBaseProps> = ({\r\n items,\r\n ariaLabel = \"Breadcrumbs\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n separator,\r\n classMap,\r\n disabled = false,\r\n size = getDefaultSize(),\r\n outline = false,\r\n className = \"\",\r\n maxVisible,\r\n LinkComponent = \"a\",\r\n ButtonComponent = \"button\",\r\n \"data-testid\": testId = \"breadcrumbs\",\r\n}) => {\r\n const [isExpanded, setIsExpanded] = useState(false);\r\n const handleExpand = () => setIsExpanded(true);\r\n\r\n if (!items || items.length === 0) return null;\r\n\r\n const visibleItems: Breadcrumb[] = useMemo(() => {\r\n if (isExpanded || !maxVisible || items.length <= maxVisible) return items;\r\n const first = items[0];\r\n const lastItems = items.slice(items.length - (maxVisible - 2));\r\n return [first, { label: ELLIPSIS_LABEL }, ...lastItems];\r\n }, [items, isExpanded, maxVisible]);\r\n\r\n const breadcrumbsClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.breadcrumbs,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n disabled && classMap.disabled,\r\n outline && classMap.outline,\r\n className,\r\n ),\r\n [\r\n theme,\r\n state,\r\n size,\r\n shadow,\r\n rounding,\r\n disabled,\r\n outline,\r\n className,\r\n classMap,\r\n ],\r\n );\r\n\r\n return (\r\n <nav\r\n aria-label={ariaLabel}\r\n data-testid={testId ? `${testId}-nav-container` : undefined}\r\n className={breadcrumbsClass}\r\n >\r\n <ol\r\n className={classMap.list}\r\n data-testid={testId ? `${testId}-nav-list` : undefined}\r\n itemScope\r\n itemType=\"https://schema.org/BreadcrumbList\"\r\n >\r\n {visibleItems.map((item, index) => {\r\n const isLast = index === visibleItems.length - 1;\r\n const isEllipsis = item.label === ELLIPSIS_LABEL;\r\n\r\n const itemClassName = combineClassNames(\r\n classMap.item,\r\n isExpanded && !isEllipsis && classMap.item_animate,\r\n isLast && classMap.item_active,\r\n );\r\n\r\n return (\r\n <li\r\n data-testid={testId ? `${testId}-nav-item` : undefined}\r\n key={`${item.label}-${item.href ?? index}`}\r\n className={itemClassName}\r\n itemProp=\"itemListElement\"\r\n itemScope\r\n itemType=\"https://schema.org/ListItem\"\r\n >\r\n {isEllipsis ? (\r\n <ButtonComponent\r\n theme=\"clear\"\r\n size=\"xs\"\r\n className={classMap.ellipsis}\r\n aria-label=\"Show all breadcrumbs\"\r\n aria-expanded={isExpanded}\r\n onClick={disabled ? undefined : handleExpand}\r\n disabled={disabled}\r\n tabIndex={disabled ? -1 : 0}\r\n data-testid={testId ? `${testId}-ellipsis` : undefined}\r\n >\r\n {item.label}\r\n </ButtonComponent>\r\n ) : item.href && !isLast ? (\r\n disabled ? (\r\n // Disabled: render non-interactive label for links\r\n <span\r\n className={classMap.link_disabled}\r\n title={item.label}\r\n itemProp=\"name\"\r\n data-testid={\r\n testId ? `${testId}-nav-item-label` : undefined\r\n }\r\n >\r\n {item.label}\r\n </span>\r\n ) : (\r\n <LinkComponent\r\n href={item.href}\r\n className={classMap.link}\r\n title={item.label}\r\n itemProp=\"item\"\r\n data-testid={\r\n testId ? `${testId}-nav-item-label` : undefined\r\n }\r\n >\r\n <span itemProp=\"name\" className={classMap.link_label}>\r\n {item.label}\r\n </span>\r\n </LinkComponent>\r\n )\r\n ) : (\r\n <span\r\n className={classMap.current}\r\n itemProp=\"name\"\r\n aria-current=\"page\"\r\n data-testid={\r\n testId ? `${testId}-nav-item-current` : undefined\r\n }\r\n >\r\n {item.label}\r\n </span>\r\n )}\r\n\r\n {!isLast && (\r\n <span className={classMap.separator} aria-hidden=\"true\">\r\n {separator ?? <ArrowRightIcon />}\r\n </span>\r\n )}\r\n <meta itemProp=\"position\" content={`${index + 1}`} />\r\n </li>\r\n );\r\n })}\r\n </ol>\r\n </nav>\r\n );\r\n};\r\n\r\nBreadcrumbsBase.displayName = \"BreadcrumbsBase\";\r\n","import React from \"react\";\r\nimport \"./Breadcrumbs.scss\";\r\nimport { BreadcrumbsBase } from \"../BreadcrumbsBase\";\r\nimport { BreadcrumbsProps } from \"../Breadcrumbs.types\";\r\nimport { Button } from \"../../../index.core\";\r\n\r\nconst classes = {\r\n breadcrumbs: \"breadcrumbs\",\r\n\r\n primary: \"breadcrumbs_primary\",\r\n secondary: \"breadcrumbs_secondary\",\r\n tertiary: \"breadcrumbs_tertiary\",\r\n quaternary: \"breadcrumbs_quaternary\",\r\n\r\n success: \"breadcrumbs_success\",\r\n warning: \"breadcrumbs_warning\",\r\n error: \"breadcrumbs_error\",\r\n\r\n clear: \"breadcrumbs_clear\",\r\n\r\n outline: \"breadcrumbs_outline\",\r\n disabled: \"breadcrumbs_disabled\",\r\n\r\n shadowNone: \"breadcrumbs_shadow-None\",\r\n shadowLight: \"breadcrumbs_shadow-Light\",\r\n shadowMedium: \"breadcrumbs_shadow-Medium\",\r\n shadowStrong: \"breadcrumbs_shadow-Strong\",\r\n shadowIntense: \"breadcrumbs_shadow-Intense\",\r\n\r\n roundNone: \"breadcrumbs_round-None\",\r\n roundSmall: \"breadcrumbs_round-Small\",\r\n roundMedium: \"breadcrumbs_round-Medium\",\r\n roundLarge: \"breadcrumbs_round-Large\",\r\n\r\n xs: \"breadcrumbs_xs\",\r\n small: \"breadcrumbs_small\",\r\n medium: \"breadcrumbs_medium\",\r\n large: \"breadcrumbs_large\",\r\n xl: \"breadcrumbs_xl\",\r\n\r\n list: \"breadcrumbs_list\",\r\n item: \"breadcrumbs_item\",\r\n item_animate: \"breadcrumbs_item_animate\",\r\n item_active: \"breadcrumbs_item_active\",\r\n ellipsis: \"breadcrumbs_ellipsis\",\r\n link: \"breadcrumbs_link\",\r\n link_label: \"breadcrumbs_link_label\",\r\n current: \"breadcrumbs_current\",\r\n separator: \"breadcrumbs_separator\",\r\n separator_icon: \"breadcrumbs_separator_icon\",\r\n};\r\n\r\nconst Breadcrumbs: React.FC<BreadcrumbsProps> = (props) => {\r\n return (\r\n <BreadcrumbsBase {...props} classMap={classes} ButtonComponent={Button} />\r\n );\r\n};\r\nBreadcrumbs.displayName = \"Breadcrumbs\";\r\nexport default Breadcrumbs;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","getDefaultSize","useState","useMemo","combineClassNames","capitalize","jsx","jsxs","ArrowRightIcon","Button"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const Breadcrumbs = require("./Breadcrumbs-
|
|
3
|
+
const Breadcrumbs = require("./Breadcrumbs-CALCSPkH.cjs");
|
|
4
4
|
exports.ELLIPSIS_LABEL = Breadcrumbs.ELLIPSIS_LABEL;
|
|
5
5
|
exports.default = Breadcrumbs.Breadcrumbs;
|
|
6
6
|
//# sourceMappingURL=Breadcrumbs.cjs.js.map
|
package/dist/core/Breadcrumbs.js
CHANGED
|
@@ -4,7 +4,7 @@ import ReactDOM from "react-dom";
|
|
|
4
4
|
import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
5
5
|
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
6
6
|
import { a as getDefaultRounding, d as getDefaultTheme, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
|
|
7
|
-
import { T as TextInput } from "./TextInput-
|
|
7
|
+
import { T as TextInput } from "./TextInput-BiB2ml8J.js";
|
|
8
8
|
const CommandPaletteBase = ({
|
|
9
9
|
commands,
|
|
10
10
|
placeholder = "Search...",
|
|
@@ -264,4 +264,4 @@ CommandPalette.displayName = "CommandPalette";
|
|
|
264
264
|
export {
|
|
265
265
|
CommandPalette as C
|
|
266
266
|
};
|
|
267
|
-
//# sourceMappingURL=CommandPalette-
|
|
267
|
+
//# sourceMappingURL=CommandPalette-CDrgdLqM.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette-D_b1iV5A.js","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/core/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","import React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport \"./CommandPalette.scss\";\r\nimport TextInput from \"../../TextInput/core/TextInput\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst classes = {\r\n overlay: \"command_palette_overlay\",\r\n command_palette: \"command_palette\",\r\n input: \"command_palette_input\",\r\n list: \"command_palette_list\",\r\n item: \"command_palette_item\",\r\n icon: \"command_palette_icon\",\r\n active: \"command_palette_active\",\r\n empty: \"command_palette_empty\",\r\n\r\n primary: \"command_palette_primary\",\r\n secondary: \"command_palette_secondary\",\r\n tertiary: \"command_palette_tertiary\",\r\n quaternary: \"command_palette_quaternary\",\r\n\r\n success: \"command_palette_success\",\r\n error: \"command_palette_error\",\r\n warning: \"command_palette_warning\",\r\n\r\n clear: \"command_palette_clear\",\r\n\r\n shadowNone: \"command_palette_shadow-None\",\r\n shadowLight: \"command_palette_shadow-Light\",\r\n shadowMedium: \"command_palette_shadow-Medium\",\r\n shadowStrong: \"command_palette_shadow-Strong\",\r\n shadowIntense: \"command_palette_shadow-Intense\",\r\n\r\n roundNone: \"command_palette_round-None\",\r\n roundSmall: \"command_palette_round-Small\",\r\n roundMedium: \"command_palette_round-Medium\",\r\n roundLarge: \"command_palette_round-Large\",\r\n};\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={classes}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,qBAAwD,CAAC;AAAA,EAC7D;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,QAAQ,gBAAA;AAAA,EACR,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,eAAe,SAAS;AAAA,EACxB;AACF,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,EAAE;AACzD,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,IAAI;AAC3E,QAAM,CAAC,cAAc,eAAe,IAAI,SAA0B,CAAA,CAAE;AACpE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,cAAc,OAA6C,IAAI;AACrE,QAAM,eAAe,OAA2B,IAAI;AAEpD,QAAM,WAAW,cACb,eACA,SAAS;AAAA,IAAO,CAAC,QACf,IAAI,MAAM,cAAc,SAAS,MAAM,YAAA,CAAa;AAAA,EAAA;AAG1D,YAAU,MAAM;AACd,QAAI,SAAS,WAAW,GAAG;AACzB,qBAAe,EAAE;AAAA,IACnB,WAAW,cAAc,KAAK,eAAe,SAAS,QAAQ;AAC5D,qBAAe,CAAC;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,YAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAElB,QAAI,YAAY,QAAS,cAAa,YAAY,OAAO;AAEzD,UAAM,IAAI,MAAM,KAAA;AAChB,QAAI,CAAC,GAAG;AACN,sBAAgB,CAAA,CAAE;AAClB,mBAAa,KAAK;AAClB;AAAA,IACF;AAEA,iBAAa,IAAI;AACjB,gBAAY,UAAU,WAAW,MAAM;AACrC,kBAAY,CAAC,EACV,KAAK,CAAC,YAAY;AACjB,wBAAgB,OAAO;AACvB,qBAAa,KAAK;AAAA,MACpB,CAAC,EACA,MAAM,MAAM;AACX,wBAAgB,CAAA,CAAE;AAClB,qBAAa,KAAK;AAAA,MACpB,CAAC;AAAA,IACL,GAAG,UAAU;AAEb,WAAO,MAAM;AACX,UAAI,YAAY,QAAS,cAAa,YAAY,OAAO;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,UAAU,CAAC;AAEnC,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,eAAW,IAAI;AACf,iBAAa,UAAW,SAAS,iBAAiC;AAElE,UAAM,SACJ,SAAS,eAAe,eAAe,MACtC,MAAM;AACL,YAAM,KAAK,SAAS,cAAc,KAAK;AACvC,SAAG,KAAK;AACR,eAAS,KAAK,YAAY,EAAE;AAC5B,aAAO;AAAA,IACT,GAAA;AAEF,qBAAiB,MAAM;AACvB,aAAS,KAAK,UAAU,IAAI,UAAU;AAEtC,WAAO,MAAM;;AACX,eAAS,KAAK,UAAU,OAAO,UAAU;AACzC,eAAS,EAAE;AACX,qBAAe,EAAE;AACjB,iBAAW,KAAK;AAChB,+BAAa,YAAb,mBAAsB,UAAtB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,QAAI,UAAU,SAAS,QAAS,UAAS,QAAQ,MAAA;AAAA,EACnD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAuC;AACtC,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,SAAS,WAAW,EAAG;AAC3B,UAAE,eAAA;AACF,uBAAe,CAAC,UAAU,OAAO,KAAK,SAAS,MAAM;AAAA,MACvD,WAAW,EAAE,QAAQ,WAAW;AAC9B,YAAI,SAAS,WAAW,EAAG;AAC3B,UAAE,eAAA;AACF;AAAA,UACE,CAAC,UAAU,OAAO,IAAI,SAAS,UAAU,SAAS;AAAA,QAAA;AAAA,MAEtD,WAAW,EAAE,QAAQ,SAAS;AAC5B,YAAI,eAAe,KAAK,SAAS,WAAW,GAAG;AAC7C,mBAAS,WAAW,EAAE,OAAA;AACtB,kBAAA;AAAA,QACF;AAAA,MACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,gBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,aAAa,OAAO;AAAA,EAAA;AAGjC,QAAM,yBAAyB;AAAA,IAC7B,CAAC,MAAqC;AACpC,UAAI,EAAE,QAAQ,SAAU,SAAA;AAAA,IAC1B;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAGV,MAAI,CAAC,UAAU,CAAC,WAAW,CAAC,cAAe,QAAO;AAElD,QAAM,SAAS,GAAG,MAAM;AAExB,SAAO,SAAS;AAAA,IACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,SAAS;AAAA,QACpB,SAAS;AAAA,QACT,eAAa,GAAG,MAAM;AAAA,QAEtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,SAAS;AAAA,cACT,SAAS,KAAK;AAAA,cACd,SAAS,KAAK;AAAA,cACd,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,cAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,cACnD;AAAA,YAAA;AAAA,YAEF,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,YAClB,WAAW;AAAA,YACX,MAAK;AAAA,YACL,cAAW;AAAA,YACX,cAAW;AAAA,YACX,eAAa;AAAA,YAEb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL,MAAK;AAAA,kBACL,OAAO;AAAA,kBACP,UAAU,CAAC,MACT,SAAS,EAAE,OAAO,KAAK;AAAA,kBAEzB,WAAW;AAAA,kBACX;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ;AAAA,kBACR;AAAA,kBACA,WAAW,SAAS;AAAA,kBACpB,eAAa,GAAG,MAAM;AAAA,kBACtB,MAAK;AAAA,kBACL,qBAAkB;AAAA,kBAClB,iBAAc;AAAA,kBACd,iBAAe,SAAS,SAAS;AAAA,kBACjC,iBAAe;AAAA,kBACf,yBACE,eAAe,IAAI,OAAO,WAAW,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAI9C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,WAAW,SAAS;AAAA,kBACpB,MAAK;AAAA,kBACL,cAAW;AAAA,kBACX,aAAW,aAAa;AAAA,kBAEvB,UAAA,YACC;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW,kBAAkB,SAAS,MAAM,SAAS,KAAK;AAAA,sBAC1D,MAAK;AAAA,sBACL,iBAAc;AAAA,sBACd,iBAAc;AAAA,sBACf,UAAA;AAAA,oBAAA;AAAA,kBAAA,IAGC,SAAS,SAAS,IACpB,SAAS,IAAI,CAAC,KAAK,UACjB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,IAAI,OAAO,KAAK;AAAA,sBAChB,MAAK;AAAA,sBACL,iBAAe,UAAU;AAAA,sBACzB,WAAW;AAAA,wBACT,SAAS;AAAA,wBACT,SAAS,KAAK;AAAA,wBACd,UAAU,eAAe,SAAS;AAAA,sBAAA;AAAA,sBAEpC,SAAS,MAAM;AACb,4BAAI,OAAA;AACJ,gCAAA;AAAA,sBACF;AAAA,sBAEC,UAAA;AAAA,wBAAA,IAAI,4BACF,QAAA,EAAK,WAAW,SAAS,MAAM,eAAY,QACzC,UAAA,IAAI,KAAA,CACP;AAAA,wBAED,IAAI;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAnBA,GAAG,IAAI,KAAK,IAAI,KAAK;AAAA,kBAAA,CAqB7B,IAED;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,iBAAc;AAAA,sBACd,iBAAc;AAAA,sBACd,WAAW,kBAAkB,SAAS,MAAM,SAAS,KAAK;AAAA,sBAC3D,UAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAED;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA;AAEJ;AACA,mBAAmB,cAAc;AChQjC,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EAEP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,iBAAgD,CAAC,UACrD;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAG;AAAA,IACJ,UAAU;AAAA,IACV,oBAAoB;AAAA,EAAA;AACtB;AAEF,eAAe,cAAc;"}
|
|
1
|
+
{"version":3,"file":"CommandPalette-CDrgdLqM.js","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/core/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","import React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport \"./CommandPalette.scss\";\r\nimport TextInput from \"../../TextInput/core/TextInput\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst classes = {\r\n overlay: \"command_palette_overlay\",\r\n command_palette: \"command_palette\",\r\n input: \"command_palette_input\",\r\n list: \"command_palette_list\",\r\n item: \"command_palette_item\",\r\n icon: \"command_palette_icon\",\r\n active: \"command_palette_active\",\r\n empty: \"command_palette_empty\",\r\n\r\n primary: \"command_palette_primary\",\r\n secondary: \"command_palette_secondary\",\r\n tertiary: \"command_palette_tertiary\",\r\n quaternary: \"command_palette_quaternary\",\r\n\r\n success: \"command_palette_success\",\r\n error: \"command_palette_error\",\r\n warning: \"command_palette_warning\",\r\n\r\n clear: \"command_palette_clear\",\r\n\r\n shadowNone: \"command_palette_shadow-None\",\r\n shadowLight: \"command_palette_shadow-Light\",\r\n shadowMedium: \"command_palette_shadow-Medium\",\r\n shadowStrong: \"command_palette_shadow-Strong\",\r\n shadowIntense: \"command_palette_shadow-Intense\",\r\n\r\n roundNone: \"command_palette_round-None\",\r\n roundSmall: \"command_palette_round-Small\",\r\n roundMedium: \"command_palette_round-Medium\",\r\n roundLarge: \"command_palette_round-Large\",\r\n};\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={classes}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ const ReactDOM = require("react-dom");
|
|
|
5
5
|
const classNames = require("./classNames-BcWMx052.cjs");
|
|
6
6
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
7
7
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
8
|
-
const TextInput = require("./TextInput-
|
|
8
|
+
const TextInput = require("./TextInput-DK7uh51U.cjs");
|
|
9
9
|
const CommandPaletteBase = ({
|
|
10
10
|
commands,
|
|
11
11
|
placeholder = "Search...",
|
|
@@ -263,4 +263,4 @@ const CommandPalette = (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
263
263
|
);
|
|
264
264
|
CommandPalette.displayName = "CommandPalette";
|
|
265
265
|
exports.CommandPalette = CommandPalette;
|
|
266
|
-
//# sourceMappingURL=CommandPalette-
|
|
266
|
+
//# sourceMappingURL=CommandPalette-va8rXgrv.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette-BzC-BGaJ.cjs","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/core/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","import React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport \"./CommandPalette.scss\";\r\nimport TextInput from \"../../TextInput/core/TextInput\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst classes = {\r\n overlay: \"command_palette_overlay\",\r\n command_palette: \"command_palette\",\r\n input: \"command_palette_input\",\r\n list: \"command_palette_list\",\r\n item: \"command_palette_item\",\r\n icon: \"command_palette_icon\",\r\n active: \"command_palette_active\",\r\n empty: \"command_palette_empty\",\r\n\r\n primary: \"command_palette_primary\",\r\n secondary: \"command_palette_secondary\",\r\n tertiary: \"command_palette_tertiary\",\r\n quaternary: \"command_palette_quaternary\",\r\n\r\n success: \"command_palette_success\",\r\n error: \"command_palette_error\",\r\n warning: \"command_palette_warning\",\r\n\r\n clear: \"command_palette_clear\",\r\n\r\n shadowNone: \"command_palette_shadow-None\",\r\n shadowLight: \"command_palette_shadow-Light\",\r\n shadowMedium: \"command_palette_shadow-Medium\",\r\n shadowStrong: \"command_palette_shadow-Strong\",\r\n shadowIntense: \"command_palette_shadow-Intense\",\r\n\r\n roundNone: \"command_palette_round-None\",\r\n roundSmall: \"command_palette_round-Small\",\r\n roundMedium: \"command_palette_round-Medium\",\r\n roundLarge: \"command_palette_round-Large\",\r\n};\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={classes}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useRef","useEffect","useCallback","jsx","jsxs","combineClassNames","capitalize","TextInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommandPalette-va8rXgrv.cjs","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/core/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","import React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport \"./CommandPalette.scss\";\r\nimport TextInput from \"../../TextInput/core/TextInput\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst classes = {\r\n overlay: \"command_palette_overlay\",\r\n command_palette: \"command_palette\",\r\n input: \"command_palette_input\",\r\n list: \"command_palette_list\",\r\n item: \"command_palette_item\",\r\n icon: \"command_palette_icon\",\r\n active: \"command_palette_active\",\r\n empty: \"command_palette_empty\",\r\n\r\n primary: \"command_palette_primary\",\r\n secondary: \"command_palette_secondary\",\r\n tertiary: \"command_palette_tertiary\",\r\n quaternary: \"command_palette_quaternary\",\r\n\r\n success: \"command_palette_success\",\r\n error: \"command_palette_error\",\r\n warning: \"command_palette_warning\",\r\n\r\n clear: \"command_palette_clear\",\r\n\r\n shadowNone: \"command_palette_shadow-None\",\r\n shadowLight: \"command_palette_shadow-Light\",\r\n shadowMedium: \"command_palette_shadow-Medium\",\r\n shadowStrong: \"command_palette_shadow-Strong\",\r\n shadowIntense: \"command_palette_shadow-Intense\",\r\n\r\n roundNone: \"command_palette_round-None\",\r\n roundSmall: \"command_palette_round-Small\",\r\n roundMedium: \"command_palette_round-Medium\",\r\n roundLarge: \"command_palette_round-Large\",\r\n};\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={classes}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useRef","useEffect","useCallback","jsx","jsxs","combineClassNames","capitalize","TextInput"],"mappings":"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"}
|
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const classNames = require("./classNames-BcWMx052.cjs");
|
|
5
|
+
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
6
|
+
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
7
|
+
const getClass = (classMap, keys) => {
|
|
8
|
+
for (const k of keys) {
|
|
9
|
+
const v = classMap[k];
|
|
10
|
+
if (typeof v === "string" && v.length > 0) return v;
|
|
11
|
+
}
|
|
12
|
+
return void 0;
|
|
13
|
+
};
|
|
14
|
+
const TabsBase = ({
|
|
15
|
+
tabs,
|
|
16
|
+
defaultIndex = 0,
|
|
17
|
+
value,
|
|
18
|
+
onChange,
|
|
19
|
+
ariaLabel = "Tabs",
|
|
20
|
+
rounding = borealStyleConfig.getDefaultRounding(),
|
|
21
|
+
shadow = borealStyleConfig.getDefaultShadow(),
|
|
22
|
+
className = "",
|
|
23
|
+
theme = borealStyleConfig.getDefaultTheme(),
|
|
24
|
+
state = "",
|
|
25
|
+
size = borealStyleConfig.getDefaultSize(),
|
|
26
|
+
orientation = "horizontal",
|
|
27
|
+
activationMode = "auto",
|
|
28
|
+
idBase,
|
|
29
|
+
"data-testid": testId = "tabs",
|
|
30
|
+
classMap
|
|
31
|
+
}) => {
|
|
32
|
+
const uid = React.useId();
|
|
33
|
+
const baseId = React.useMemo(() => {
|
|
34
|
+
return idBase ?? `${testId}-${uid}`;
|
|
35
|
+
}, [idBase, testId, uid]);
|
|
36
|
+
const isControlled = typeof value === "number";
|
|
37
|
+
const [uncontrolledIndex, setUncontrolledIndex] = React.useState(defaultIndex);
|
|
38
|
+
const activeIndex = isControlled ? value : uncontrolledIndex;
|
|
39
|
+
const [focusIndex, setFocusIndex] = React.useState(defaultIndex);
|
|
40
|
+
const tabRefs = React.useRef([]);
|
|
41
|
+
React.useEffect(() => {
|
|
42
|
+
var _a;
|
|
43
|
+
const current = activationMode === "manual" ? focusIndex : activeIndex;
|
|
44
|
+
tabRefs.current.forEach((el, i) => {
|
|
45
|
+
if (!el) return;
|
|
46
|
+
el.setAttribute("tabindex", i === current ? "0" : "-1");
|
|
47
|
+
});
|
|
48
|
+
(_a = tabRefs.current[current]) == null ? void 0 : _a.focus();
|
|
49
|
+
}, [activeIndex, focusIndex, activationMode]);
|
|
50
|
+
React.useEffect(() => {
|
|
51
|
+
if (isControlled) setFocusIndex(activeIndex);
|
|
52
|
+
}, [activeIndex, isControlled]);
|
|
53
|
+
const containerClassNames = React.useMemo(() => {
|
|
54
|
+
const containerClass = getClass(classMap, ["container", "tabsContainer", "tabs_container"]) ?? "";
|
|
55
|
+
const themeClass = classMap[theme] ?? "";
|
|
56
|
+
const stateClass = state ? classMap[state] ?? "" : "";
|
|
57
|
+
const sizeClass = classMap[size] ?? "";
|
|
58
|
+
return classNames.combineClassNames(
|
|
59
|
+
containerClass,
|
|
60
|
+
themeClass,
|
|
61
|
+
stateClass,
|
|
62
|
+
sizeClass,
|
|
63
|
+
className
|
|
64
|
+
);
|
|
65
|
+
}, [classMap, theme, state, size, className]);
|
|
66
|
+
const tabBaseClassNames = React.useMemo(() => {
|
|
67
|
+
const tabClass = getClass(classMap, ["tab", "tabs_tab"]) ?? "";
|
|
68
|
+
const shadowClass = shadow ? classMap[`shadow${capitalize.capitalize(shadow)}`] ?? classMap[`tabs_shadow-${capitalize.capitalize(shadow)}`] : "";
|
|
69
|
+
const roundingClass = rounding ? classMap[`round${capitalize.capitalize(rounding)}`] ?? classMap[`tabs_round-${capitalize.capitalize(rounding)}`] : "";
|
|
70
|
+
return classNames.combineClassNames(tabClass, shadowClass, roundingClass);
|
|
71
|
+
}, [classMap, shadow, rounding]);
|
|
72
|
+
const activeClass = React.useMemo(() => {
|
|
73
|
+
return getClass(classMap, ["active", "tabs_active"]) ?? "";
|
|
74
|
+
}, [classMap]);
|
|
75
|
+
const disabledClass = React.useMemo(() => {
|
|
76
|
+
return getClass(classMap, ["disabled", "tabs_disabled"]) ?? "";
|
|
77
|
+
}, [classMap]);
|
|
78
|
+
const iconClass = React.useMemo(() => {
|
|
79
|
+
return getClass(classMap, ["icon", "tabs_icon"]) ?? "";
|
|
80
|
+
}, [classMap]);
|
|
81
|
+
const tabListClass = React.useMemo(() => {
|
|
82
|
+
return getClass(classMap, ["tabs", "tabs"]) ?? "";
|
|
83
|
+
}, [classMap]);
|
|
84
|
+
const isDisabled = (index) => {
|
|
85
|
+
var _a;
|
|
86
|
+
return Boolean((_a = tabs[index]) == null ? void 0 : _a.disabled);
|
|
87
|
+
};
|
|
88
|
+
const nextEnabled = (start, dir) => {
|
|
89
|
+
const len = tabs.length;
|
|
90
|
+
let i = start;
|
|
91
|
+
for (let n = 0; n < len; n++) {
|
|
92
|
+
i = (i + dir + len) % len;
|
|
93
|
+
if (!isDisabled(i)) return i;
|
|
94
|
+
}
|
|
95
|
+
return start;
|
|
96
|
+
};
|
|
97
|
+
const activate = (index) => {
|
|
98
|
+
if (isDisabled(index)) return;
|
|
99
|
+
if (!isControlled) setUncontrolledIndex(index);
|
|
100
|
+
onChange == null ? void 0 : onChange(index);
|
|
101
|
+
};
|
|
102
|
+
const onKeyDown = (event) => {
|
|
103
|
+
const horiz = orientation === "horizontal";
|
|
104
|
+
const { key } = event;
|
|
105
|
+
let newFocus = focusIndex;
|
|
106
|
+
if (horiz && key === "ArrowRight") {
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
newFocus = nextEnabled(focusIndex, 1);
|
|
109
|
+
} else if (horiz && key === "ArrowLeft") {
|
|
110
|
+
event.preventDefault();
|
|
111
|
+
newFocus = nextEnabled(focusIndex, -1);
|
|
112
|
+
} else if (!horiz && key === "ArrowDown") {
|
|
113
|
+
event.preventDefault();
|
|
114
|
+
newFocus = nextEnabled(focusIndex, 1);
|
|
115
|
+
} else if (!horiz && key === "ArrowUp") {
|
|
116
|
+
event.preventDefault();
|
|
117
|
+
newFocus = nextEnabled(focusIndex, -1);
|
|
118
|
+
} else if (key === "Home") {
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
newFocus = nextEnabled(-1, 1);
|
|
121
|
+
} else if (key === "End") {
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
newFocus = nextEnabled(0, -1);
|
|
124
|
+
} else if (activationMode === "manual" && (key === "Enter" || key === " ")) {
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
if (!isDisabled(focusIndex)) activate(focusIndex);
|
|
127
|
+
return;
|
|
128
|
+
} else {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
setFocusIndex(newFocus);
|
|
132
|
+
if (activationMode === "auto") activate(newFocus);
|
|
133
|
+
};
|
|
134
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassNames, "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
135
|
+
"div",
|
|
136
|
+
{
|
|
137
|
+
className: tabListClass,
|
|
138
|
+
"aria-label": ariaLabel,
|
|
139
|
+
role: "tablist",
|
|
140
|
+
"aria-orientation": orientation,
|
|
141
|
+
onKeyDown,
|
|
142
|
+
"data-testid": `${testId}-tablist`,
|
|
143
|
+
children: tabs.map((tab, index) => {
|
|
144
|
+
const Icon = tab.icon;
|
|
145
|
+
const isActive = index === activeIndex;
|
|
146
|
+
const disabled = isDisabled(index);
|
|
147
|
+
const tabId = `${baseId}-tab-${index}`;
|
|
148
|
+
const panelId = `${baseId}-panel-${index}`;
|
|
149
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
150
|
+
"button",
|
|
151
|
+
{
|
|
152
|
+
ref: (el) => {
|
|
153
|
+
tabRefs.current[index] = el;
|
|
154
|
+
},
|
|
155
|
+
className: classNames.combineClassNames(
|
|
156
|
+
tabBaseClassNames,
|
|
157
|
+
isActive && activeClass,
|
|
158
|
+
disabled && disabledClass
|
|
159
|
+
),
|
|
160
|
+
role: "tab",
|
|
161
|
+
type: "button",
|
|
162
|
+
"aria-selected": isActive,
|
|
163
|
+
"aria-controls": panelId,
|
|
164
|
+
id: tabId,
|
|
165
|
+
"aria-disabled": disabled || void 0,
|
|
166
|
+
onClick: () => {
|
|
167
|
+
if (disabled) return;
|
|
168
|
+
setFocusIndex(index);
|
|
169
|
+
activate(index);
|
|
170
|
+
},
|
|
171
|
+
"data-testid": `${testId}-tab-${index}`,
|
|
172
|
+
children: [
|
|
173
|
+
Icon && /* @__PURE__ */ jsxRuntime.jsx(
|
|
174
|
+
"span",
|
|
175
|
+
{
|
|
176
|
+
className: iconClass,
|
|
177
|
+
"aria-hidden": "true",
|
|
178
|
+
"data-testid": `${testId}-icon-${index}`,
|
|
179
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {})
|
|
180
|
+
}
|
|
181
|
+
),
|
|
182
|
+
tab.label
|
|
183
|
+
]
|
|
184
|
+
},
|
|
185
|
+
`${tab.label}-${index}`
|
|
186
|
+
);
|
|
187
|
+
})
|
|
188
|
+
}
|
|
189
|
+
) });
|
|
190
|
+
};
|
|
191
|
+
TabsBase.displayName = "TabsBase";
|
|
192
|
+
const classes = {
|
|
193
|
+
tabsContainer: "tabs_container",
|
|
194
|
+
tabs: "tabs",
|
|
195
|
+
tab: "tabs_tab",
|
|
196
|
+
active: "tabs_active",
|
|
197
|
+
icon: "tabs_icon",
|
|
198
|
+
primary: "tabs_primary",
|
|
199
|
+
secondary: "tabs_secondary",
|
|
200
|
+
tertiary: "tabs_tertiary",
|
|
201
|
+
quaternary: "tabs_quaternary",
|
|
202
|
+
success: "tabs_success",
|
|
203
|
+
error: "tabs_error",
|
|
204
|
+
warning: "tabs_warning",
|
|
205
|
+
clear: "tabs_clear",
|
|
206
|
+
xs: "tabs_xs",
|
|
207
|
+
small: "tabs_small",
|
|
208
|
+
medium: "tabs_medium",
|
|
209
|
+
large: "tabs_large",
|
|
210
|
+
xl: "tabs_xl",
|
|
211
|
+
shadowNone: "tabs_shadow-None",
|
|
212
|
+
shadowLight: "tabs_shadow-Light",
|
|
213
|
+
shadowMedium: "tabs_shadow-Medium",
|
|
214
|
+
shadowStrong: "tabs_shadow-Strong",
|
|
215
|
+
shadowIntense: "tabs_shadow-Intense",
|
|
216
|
+
roundNone: "tabs_round-None",
|
|
217
|
+
roundSmall: "tabs_round-Small",
|
|
218
|
+
roundMedium: "tabs_round-Medium",
|
|
219
|
+
roundLarge: "tabs_round-Large"
|
|
220
|
+
};
|
|
221
|
+
const Tabs = (props) => {
|
|
222
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TabsBase, { ...props, classMap: classes });
|
|
223
|
+
};
|
|
224
|
+
Tabs.displayName = "Tabs";
|
|
225
|
+
exports.Tabs = Tabs;
|
|
226
|
+
//# sourceMappingURL=Tabs-BFn-TRKL.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs-BFn-TRKL.cjs","sources":["../../src/components/Tabs/TabsBase.tsx","../../src/components/Tabs/core/Tabs.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState, useId } from \"react\";\r\nimport { BaseTabsProps } from \"./Tabs.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\ntype Dir = 1 | -1;\r\n\r\nconst getClass = (\r\n classMap: Record<string, string>,\r\n keys: string[],\r\n): string | undefined => {\r\n for (const k of keys) {\r\n const v = classMap[k];\r\n if (typeof v === \"string\" && v.length > 0) return v;\r\n }\r\n return undefined;\r\n};\r\n\r\nconst TabsBase: React.FC<BaseTabsProps> = ({\r\n tabs,\r\n defaultIndex = 0,\r\n value,\r\n onChange,\r\n ariaLabel = \"Tabs\",\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n className = \"\",\r\n theme = getDefaultTheme(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n orientation = \"horizontal\",\r\n activationMode = \"auto\",\r\n idBase,\r\n \"data-testid\": testId = \"tabs\",\r\n classMap,\r\n}) => {\r\n const uid = useId();\r\n\r\n const baseId = useMemo<string>(() => {\r\n return idBase ?? `${testId}-${uid}`;\r\n }, [idBase, testId, uid]);\r\n\r\n const isControlled: boolean = typeof value === \"number\";\r\n\r\n const [uncontrolledIndex, setUncontrolledIndex] =\r\n useState<number>(defaultIndex);\r\n\r\n const activeIndex: number = isControlled\r\n ? (value as number)\r\n : uncontrolledIndex;\r\n\r\n const [focusIndex, setFocusIndex] = useState<number>(defaultIndex);\r\n\r\n const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\r\n\r\n useEffect(() => {\r\n const current = activationMode === \"manual\" ? focusIndex : activeIndex;\r\n\r\n tabRefs.current.forEach((el, i) => {\r\n if (!el) return;\r\n el.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\");\r\n });\r\n\r\n tabRefs.current[current]?.focus();\r\n }, [activeIndex, focusIndex, activationMode]);\r\n\r\n useEffect(() => {\r\n if (isControlled) setFocusIndex(activeIndex);\r\n }, [activeIndex, isControlled]);\r\n\r\n const containerClassNames = useMemo(() => {\r\n const containerClass =\r\n getClass(classMap, [\"container\", \"tabsContainer\", \"tabs_container\"]) ??\r\n \"\";\r\n const themeClass = classMap[theme] ?? \"\";\r\n const stateClass = state ? (classMap[state] ?? \"\") : \"\";\r\n const sizeClass = classMap[size] ?? \"\";\r\n\r\n return combineClassNames(\r\n containerClass,\r\n themeClass,\r\n stateClass,\r\n sizeClass,\r\n className,\r\n );\r\n }, [classMap, theme, state, size, className]);\r\n\r\n const tabBaseClassNames = useMemo(() => {\r\n const tabClass = getClass(classMap, [\"tab\", \"tabs_tab\"]) ?? \"\";\r\n const shadowClass = shadow\r\n ? (classMap[`shadow${capitalize(shadow)}`] ??\r\n classMap[`tabs_shadow-${capitalize(shadow)}`])\r\n : \"\";\r\n const roundingClass = rounding\r\n ? (classMap[`round${capitalize(rounding)}`] ??\r\n classMap[`tabs_round-${capitalize(rounding)}`])\r\n : \"\";\r\n\r\n return combineClassNames(tabClass, shadowClass, roundingClass);\r\n }, [classMap, shadow, rounding]);\r\n\r\n const activeClass = useMemo(() => {\r\n return getClass(classMap, [\"active\", \"tabs_active\"]) ?? \"\";\r\n }, [classMap]);\r\n\r\n const disabledClass = useMemo(() => {\r\n return getClass(classMap, [\"disabled\", \"tabs_disabled\"]) ?? \"\";\r\n }, [classMap]);\r\n\r\n const iconClass = useMemo(() => {\r\n return getClass(classMap, [\"icon\", \"tabs_icon\"]) ?? \"\";\r\n }, [classMap]);\r\n\r\n const tabListClass = useMemo(() => {\r\n return getClass(classMap, [\"tabs\", \"tabs\"]) ?? \"\";\r\n }, [classMap]);\r\n\r\n const isDisabled = (index: number): boolean => Boolean(tabs[index]?.disabled);\r\n\r\n const nextEnabled = (start: number, dir: Dir): number => {\r\n const len = tabs.length;\r\n let i = start;\r\n\r\n for (let n = 0; n < len; n++) {\r\n i = (i + dir + len) % len;\r\n if (!isDisabled(i)) return i;\r\n }\r\n return start;\r\n };\r\n\r\n const activate = (index: number): void => {\r\n if (isDisabled(index)) return;\r\n\r\n if (!isControlled) setUncontrolledIndex(index);\r\n onChange?.(index);\r\n };\r\n\r\n const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\r\n const horiz = orientation === \"horizontal\";\r\n const { key } = event;\r\n\r\n let newFocus = focusIndex;\r\n\r\n if (horiz && key === \"ArrowRight\") {\r\n event.preventDefault();\r\n newFocus = nextEnabled(focusIndex, 1);\r\n } else if (horiz && key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n newFocus = nextEnabled(focusIndex, -1);\r\n } else if (!horiz && key === \"ArrowDown\") {\r\n event.preventDefault();\r\n newFocus = nextEnabled(focusIndex, 1);\r\n } else if (!horiz && key === \"ArrowUp\") {\r\n event.preventDefault();\r\n newFocus = nextEnabled(focusIndex, -1);\r\n } else if (key === \"Home\") {\r\n event.preventDefault();\r\n newFocus = nextEnabled(-1, 1);\r\n } else if (key === \"End\") {\r\n event.preventDefault();\r\n newFocus = nextEnabled(0, -1);\r\n } else if (\r\n activationMode === \"manual\" &&\r\n (key === \"Enter\" || key === \" \")\r\n ) {\r\n event.preventDefault();\r\n if (!isDisabled(focusIndex)) activate(focusIndex);\r\n return;\r\n } else {\r\n return;\r\n }\r\n\r\n setFocusIndex(newFocus);\r\n if (activationMode === \"auto\") activate(newFocus);\r\n };\r\n\r\n return (\r\n <div className={containerClassNames} data-testid={testId}>\r\n <div\r\n className={tabListClass}\r\n aria-label={ariaLabel}\r\n role=\"tablist\"\r\n aria-orientation={orientation}\r\n onKeyDown={onKeyDown}\r\n data-testid={`${testId}-tablist`}\r\n >\r\n {tabs.map((tab, index) => {\r\n const Icon = tab.icon;\r\n const isActive = index === activeIndex;\r\n const disabled = isDisabled(index);\r\n\r\n const tabId = `${baseId}-tab-${index}`;\r\n const panelId = `${baseId}-panel-${index}`;\r\n\r\n return (\r\n <button\r\n key={`${tab.label}-${index}`}\r\n ref={(el) => {\r\n tabRefs.current[index] = el;\r\n }}\r\n className={combineClassNames(\r\n tabBaseClassNames,\r\n isActive && activeClass,\r\n disabled && disabledClass,\r\n )}\r\n role=\"tab\"\r\n type=\"button\"\r\n aria-selected={isActive}\r\n aria-controls={panelId}\r\n id={tabId}\r\n aria-disabled={disabled || undefined}\r\n onClick={() => {\r\n if (disabled) return;\r\n setFocusIndex(index);\r\n activate(index);\r\n }}\r\n data-testid={`${testId}-tab-${index}`}\r\n >\r\n {Icon && (\r\n <span\r\n className={iconClass}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon-${index}`}\r\n >\r\n <Icon />\r\n </span>\r\n )}\r\n {tab.label}\r\n </button>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nTabsBase.displayName = \"TabsBase\";\r\nexport default TabsBase;\r\n","import React from \"react\";\r\nimport \"./Tabs.scss\";\r\nimport TabsBase from \"../TabsBase\";\r\nimport { TabsProps } from \"../Tabs.types\";\r\n\r\nconst classes = {\r\n tabsContainer: \"tabs_container\",\r\n tabs: \"tabs\",\r\n tab: \"tabs_tab\",\r\n active: \"tabs_active\",\r\n icon: \"tabs_icon\",\r\n\r\n primary: \"tabs_primary\",\r\n secondary: \"tabs_secondary\",\r\n tertiary: \"tabs_tertiary\",\r\n quaternary: \"tabs_quaternary\",\r\n\r\n success: \"tabs_success\",\r\n error: \"tabs_error\",\r\n warning: \"tabs_warning\",\r\n\r\n clear: \"tabs_clear\",\r\n\r\n xs: \"tabs_xs\",\r\n small: \"tabs_small\",\r\n medium: \"tabs_medium\",\r\n large: \"tabs_large\",\r\n xl: \"tabs_xl\",\r\n\r\n shadowNone: \"tabs_shadow-None\",\r\n shadowLight: \"tabs_shadow-Light\",\r\n shadowMedium: \"tabs_shadow-Medium\",\r\n shadowStrong: \"tabs_shadow-Strong\",\r\n shadowIntense: \"tabs_shadow-Intense\",\r\n\r\n roundNone: \"tabs_round-None\",\r\n roundSmall: \"tabs_round-Small\",\r\n roundMedium: \"tabs_round-Medium\",\r\n roundLarge: \"tabs_round-Large\",\r\n};\r\n\r\nconst Tabs: React.FC<TabsProps> = (props) => {\r\n return <TabsBase {...props} classMap={classes} />;\r\n};\r\n\r\nTabs.displayName = \"Tabs\";\r\nexport default Tabs;\r\n"],"names":["getDefaultRounding","getDefaultShadow","getDefaultTheme","getDefaultSize","useId","useMemo","useState","useRef","useEffect","combineClassNames","capitalize","jsx","jsxs"],"mappings":"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"}
|