@salt-ds/lab 1.0.0-alpha.18 → 1.0.0-alpha.19
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-cjs/combo-box-next/ComboBoxNext.css.js +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.css.js +1 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +3 -2
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +6 -16
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/Info.js +3 -2
- package/dist-cjs/progress/Info.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +6 -9
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/tabs-next/TabNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabNext.js +16 -12
- package/dist-cjs/tabs-next/TabNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextContext.js +5 -3
- package/dist-cjs/tabs-next/TabNextContext.js.map +1 -1
- package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabstripNext.js +37 -26
- package/dist-cjs/tabs-next/TabstripNext.js.map +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.css.js +1 -1
- package/dist-es/dropdown-next/DropdownNext.css.js +1 -1
- package/dist-es/navigation-item/NavigationItem.css.js +1 -1
- package/dist-es/navigation-item/NavigationItem.js +3 -2
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +6 -16
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/Info.js +3 -2
- package/dist-es/progress/Info.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +6 -9
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/tabs-next/TabNext.css.js +1 -1
- package/dist-es/tabs-next/TabNext.js +16 -12
- package/dist-es/tabs-next/TabNext.js.map +1 -1
- package/dist-es/tabs-next/TabNextContext.js +5 -3
- package/dist-es/tabs-next/TabNextContext.js.map +1 -1
- package/dist-es/tabs-next/TabstripNext.css.js +1 -1
- package/dist-es/tabs-next/TabstripNext.js +37 -26
- package/dist-es/tabs-next/TabstripNext.js.map +1 -1
- package/dist-types/progress/CircularProgress/CircularProgress.d.ts +1 -5
- package/dist-types/progress/LinearProgress/LinearProgress.d.ts +2 -6
- package/dist-types/tabs-next/TabNextContext.d.ts +4 -2
- package/dist-types/tabs-next/TabstripNext.d.ts +5 -3
- package/package.json +3 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltComboBoxNext-highlight {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltComboBoxNext-input:hover {\n --saltInput-borderColor: var(--salt-focused-outlineColor);\n}\n\n.saltComboBoxNext-list.saltListNext {\n border-color: var(--salt-selectable-borderColor-selected);\n box-shadow: var(--salt-overlayable-shadow-popout);\n max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5));\n z-index: calc(var(--salt-zIndex-
|
|
3
|
+
var css_248z = ".saltComboBoxNext-highlight {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltComboBoxNext-input:hover {\n --saltInput-borderColor: var(--salt-focused-outlineColor);\n}\n\n.saltComboBoxNext-list.saltListNext {\n border-color: var(--salt-selectable-borderColor-selected);\n box-shadow: var(--salt-overlayable-shadow-popout);\n max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5));\n z-index: calc(var(--salt-zIndex-modal) + 1);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ComboBoxNext.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltDropdownNext-button {\n --dropdownNext-borderColor: var(--salt-editable-borderColor);\n --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n --dropdownNext-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground));\n display: flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n height: var(--saltDropdownNext-height, var(--salt-size-base));\n line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n min-width: var(--saltDropdownNext-minWidth, 160px);\n padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n position: relative;\n border: none;\n border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n text-align: left;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: var(--salt-spacing-100);\n user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n border-color: var(--salt-selectable-borderColor-selected);\n box-shadow: var(--salt-overlayable-shadow-popout);\n max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n z-index: calc(var(--salt-zIndex-
|
|
3
|
+
var css_248z = ".saltDropdownNext-button {\n --dropdownNext-borderColor: var(--salt-editable-borderColor);\n --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n --dropdownNext-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground));\n display: flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n height: var(--saltDropdownNext-height, var(--salt-size-base));\n line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n min-width: var(--saltDropdownNext-minWidth, 160px);\n padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n position: relative;\n border: none;\n border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n text-align: left;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: var(--salt-spacing-100);\n user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n border-color: var(--salt-selectable-borderColor-selected);\n box-shadow: var(--salt-overlayable-shadow-popout);\n max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n z-index: calc(var(--salt-zIndex-modal) + 1);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n --dropdownNext-borderWidth: var(--salt-size-border);\n\n cursor: var(--salt-selectable-cursor-disabled);\n background: var(--dropdownNext-background-disabled);\n color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled));\n outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n --dropdownNext-borderWidth: var(--salt-size-border);\n\n cursor: var(--salt-editable-cursor-readonly);\n background: var(--dropdownNext-background-readonly);\n /* no padding-right when there's no dropdown button icon */\n padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n --dropdownNext-background: var(--salt-editable-primary-background);\n --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n --dropdownNext-background: var(--salt-editable-secondary-background);\n --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=DropdownNext.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n --navigationItem-color: var(--salt-text-
|
|
3
|
+
var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n --navigationItem-color: var(--salt-text-primary-foreground);\n --navigationItem-fill: var(--salt-text-primary-foreground);\n --navigationItem-bar-inset: var(--salt-spacing-25);\n --navigationItem-bar-size: var(--salt-size-indicator);\n --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active */\n.saltNavigationItem-active,\n.saltNavigationItem-rootItem {\n --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);\n}\n\n/* Vars applied to NavigationItem component when blur active */\n.saltNavigationItem-blurActive,\n.saltNavigationItem-active.saltNavigationItem-nested {\n --navigationItem-fontWeight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n gap: var(--navigationItem-gap);\n font-weight: var(--navigationItem-fontWeight);\n text-decoration: none;\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n fill: var(--navigationItem-fill);\n top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base));\n padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n padding-right: var(--navigationItem-gap);\n margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n --link-color-visited: var(--navigationItem-color);\n --link-color-hover: var(--navigationItem-color);\n\n color: var(--navigationItem-color);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n --saltButton-background-hover: none;\n --saltButton-background-active: none;\n --saltButton-textTransform: none;\n --saltButton-width: 100%;\n --saltButton-letterSpacing: none;\n\n gap: var(--navigationItem-gap);\n /* Required to match link's outline offset */\n outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n --saltIcon-color: var(--navigationItem-fill);\n\n top: 0;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n border-right: var(--navigationItem-gap) solid transparent;\n border-left: var(--navigationItem-gap) solid transparent;\n margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--navigationItem-bar-size);\n top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--navigationItem-bar-size);\n left: var(--navigationItem-bar-inset);\n top: var(--navigationItem-bar-inset);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n background: var(--navigationItem-indicator-background);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=NavigationItem.css.js.map
|
|
@@ -48,9 +48,10 @@ const NavigationItem = React.forwardRef(
|
|
|
48
48
|
className: clsx.clsx(
|
|
49
49
|
withBaseName("wrapper"),
|
|
50
50
|
{
|
|
51
|
-
[withBaseName("active")]: active,
|
|
52
|
-
[withBaseName("blurActive")]: blurActive,
|
|
51
|
+
[withBaseName("active")]: active || blurActive,
|
|
52
|
+
[withBaseName("blurActive")]: blurActive && level !== 0,
|
|
53
53
|
[withBaseName("nested")]: level !== 0,
|
|
54
|
+
[withBaseName("rootItem")]: level === 0,
|
|
54
55
|
[withBaseName("expandButton")]: parent
|
|
55
56
|
},
|
|
56
57
|
withBaseName(orientation)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"nested\")]: level !== 0,\n [withBaseName(\"expandButton\")]: parent,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon\n expanded={expanded}\n orientation={orientation}\n className={withBaseName(\"expandIcon\")}\n />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","ConditionalWrapper","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAC,eAAA,CAAAC,qCAAA,EAAA;AAAA,QACC,SAAW,EAAAF,SAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive && level !== 0,\n [withBaseName(\"nested\")]: level !== 0,\n [withBaseName(\"rootItem\")]: level === 0,\n [withBaseName(\"expandButton\")]: parent,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon\n expanded={expanded}\n orientation={orientation}\n className={withBaseName(\"expandIcon\")}\n />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","ConditionalWrapper","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAC,eAAA,CAAAC,qCAAA,EAAA;AAAA,QACC,SAAW,EAAAF,SAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAU,KAAA,CAAA;AAAA,YACtD,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACpC,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACtC,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,MAAA;AAAA,WAClC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAACD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACEA,cAAA,CAAAI,2BAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,WACtC,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltCircularProgress {\n color: var(--salt-text-primary-foreground)
|
|
3
|
+
var css_248z = ".saltCircularProgress {\n color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */\n display: inline-flex;\n position: relative;\n}\n\n.saltCircularProgress-progressValue {\n align-items: center;\n color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */\n display: flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n width: 100%;\n}\n\n.saltCircularProgress-track {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-small);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-palette-neutral-secondary-border);\n}\n\n.saltCircularProgress-bar {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-strong);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n inline-size: 50%;\n block-size: 100%;\n transform-origin: 100% center;\n transform: rotate(180deg);\n overflow: hidden;\n position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n inline-size: 100%;\n block-size: 100%;\n transform-origin: 100% center;\n overflow: hidden;\n transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n transform: rotate(0deg);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CircularProgress.css.js.map
|
|
@@ -12,14 +12,7 @@ var styles = require('@salt-ds/styles');
|
|
|
12
12
|
var CircularProgress$1 = require('./CircularProgress.css.js');
|
|
13
13
|
|
|
14
14
|
const withBaseName = core.makePrefixer("saltCircularProgress");
|
|
15
|
-
const CircularProgress = React.forwardRef(function CircularProgress2({
|
|
16
|
-
"aria-label": ariaLabel,
|
|
17
|
-
className,
|
|
18
|
-
max = 100,
|
|
19
|
-
showInfo = true,
|
|
20
|
-
value = 0,
|
|
21
|
-
...rest
|
|
22
|
-
}, ref) {
|
|
15
|
+
const CircularProgress = React.forwardRef(function CircularProgress2({ "aria-label": ariaLabel, className, max = 100, value = 0, ...rest }, ref) {
|
|
23
16
|
const targetWindow = window.useWindow();
|
|
24
17
|
styles.useComponentCssInjection({
|
|
25
18
|
testId: "salt-circular-progress",
|
|
@@ -41,14 +34,11 @@ const CircularProgress = React.forwardRef(function CircularProgress2({
|
|
|
41
34
|
subOverlayRightStyle.transform = "rotate(0deg)";
|
|
42
35
|
subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;
|
|
43
36
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
value: Math.round(progress)
|
|
50
|
-
});
|
|
51
|
-
}
|
|
37
|
+
const progressInfo = /* @__PURE__ */ jsxRuntime.jsx(Info.Info, {
|
|
38
|
+
className: withBaseName("progressValue"),
|
|
39
|
+
unit: "%",
|
|
40
|
+
value: Math.round(progress)
|
|
41
|
+
});
|
|
52
42
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
53
43
|
className: clsx.clsx(withBaseName(), className),
|
|
54
44
|
"data-testid": "circular-progress",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info } from \"../Info\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * A label for accessibility\n */\n \"aria-label\"?: string;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\n/**\n * Circular progress bar with an Info element showing the current value\n */\nexport const CircularProgress = forwardRef<\n HTMLDivElement,\n CircularProgressProps\n>(function CircularProgress(\n { \"aria-label\": ariaLabel, className, max = 100, value = 0, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-circular-progress\",\n css: circularProgressCSS,\n window: targetWindow,\n });\n\n const subOverlayRightStyle: CSSProperties = {};\n const subOverlayLeftStyle: CSSProperties = {};\n\n const getRotationAngle = (progress: number, shift = 0) => {\n return -180 + ((progress - shift) / 50) * 180;\n };\n\n const progress = (value / max) * 100;\n\n if (progress <= 50) {\n const rotationAngle = getRotationAngle(progress);\n subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n subOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(progress, 50);\n subOverlayRightStyle.transform = \"rotate(0deg)\";\n subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n\n const progressInfo = (\n <Info\n className={withBaseName(\"progressValue\")}\n unit=\"%\"\n value={Math.round(progress)}\n />\n );\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n data-testid=\"circular-progress\"\n ref={ref}\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"track\")} />\n <div className={withBaseName(\"bars\")}>\n <div className={withBaseName(\"barOverlayRight\")}>\n <div\n className={withBaseName(\"barSubOverlayRight\")}\n data-testid=\"barSubOverlayRight\"\n style={subOverlayRightStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n <div className={withBaseName(\"barOverlayLeft\")}>\n <div\n className={withBaseName(\"barSubOverlayLeft\")}\n data-testid=\"barSubOverlayLeft\"\n style={subOverlayLeftStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n </div>\n {progressInfo}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","CircularProgress","useWindow","useComponentCssInjection","circularProgressCSS","progress","jsx","Info","jsxs","clsx"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AA0BjD,MAAM,gBAAmB,GAAAC,gBAAA,CAG9B,SAASC,iBAAAA,CACT,EAAE,YAAc,EAAA,SAAA,EAAW,SAAW,EAAA,GAAA,GAAM,GAAK,EAAA,KAAA,GAAQ,CAAM,EAAA,GAAA,IAAA,IAC/D,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,uBAAsC,EAAC,CAAA;AAC7C,EAAA,MAAM,sBAAqC,EAAC,CAAA;AAE5C,EAAA,MAAM,gBAAmB,GAAA,CAACC,SAAkB,EAAA,KAAA,GAAQ,CAAM,KAAA;AACxD,IAAO,OAAA,CAAA,GAAA,GAAA,CAASA,SAAW,GAAA,KAAA,IAAS,EAAM,GAAA,GAAA,CAAA;AAAA,GAC5C,CAAA;AAEA,EAAM,MAAA,QAAA,GAAY,QAAQ,GAAO,GAAA,GAAA,CAAA;AAEjC,EAAA,IAAI,YAAY,EAAI,EAAA;AAClB,IAAM,MAAA,aAAA,GAAgB,iBAAiB,QAAQ,CAAA,CAAA;AAC/C,IAAA,oBAAA,CAAqB,YAAY,CAAU,OAAA,EAAA,aAAA,CAAA,IAAA,CAAA,CAAA;AAC3C,IAAA,mBAAA,CAAoB,SAAY,GAAA,iBAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAM,MAAA,aAAA,GAAgB,gBAAiB,CAAA,QAAA,EAAU,EAAE,CAAA,CAAA;AACnD,IAAA,oBAAA,CAAqB,SAAY,GAAA,cAAA,CAAA;AACjC,IAAA,mBAAA,CAAoB,YAAY,CAAU,OAAA,EAAA,aAAA,CAAA,IAAA,CAAA,CAAA;AAAA,GAC5C;AAEA,EAAA,MAAM,+BACHC,cAAA,CAAAC,SAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,IACvC,IAAK,EAAA,GAAA;AAAA,IACL,KAAA,EAAO,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,GAC5B,CAAA,CAAA;AAGF,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,aAAY,EAAA,mBAAA;AAAA,IACZ,GAAA;AAAA,IACA,IAAK,EAAA,aAAA;AAAA,IACL,YAAY,EAAA,SAAA;AAAA,IACZ,eAAe,EAAA,GAAA;AAAA,IACf,eAAe,EAAA,CAAA;AAAA,IACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,IAC9B,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACH,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,OAAG,CAAA;AAAA,sBACtCE,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QACjC,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAC5C,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,cAC5C,aAAY,EAAA,oBAAA;AAAA,cACZ,KAAO,EAAA,oBAAA;AAAA,cAEP,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,gBAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,eAAG,CAAA;AAAA,aACvC,CAAA;AAAA,WACF,CAAA;AAAA,0BACCA,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,YAC3C,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,cAC3C,aAAY,EAAA,mBAAA;AAAA,cACZ,KAAO,EAAA,mBAAA;AAAA,cAEP,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,gBAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,eAAG,CAAA;AAAA,aACvC,CAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,YAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var core = require('@salt-ds/core');
|
|
6
7
|
|
|
7
8
|
const Info = ({ className, value, unit }) => {
|
|
8
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9
|
-
|
|
9
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(core.Text, {
|
|
10
|
+
styleAs: "h2",
|
|
10
11
|
className,
|
|
11
12
|
children: [
|
|
12
13
|
value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.js","sources":["../src/progress/Info.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Info.js","sources":["../src/progress/Info.tsx"],"sourcesContent":["import { Text } from \"@salt-ds/core\";\nexport interface InfoProps {\n className: string;\n unit: string;\n value: number;\n}\n\nexport const Info = ({ className, value, unit }: InfoProps) => {\n return (\n <Text styleAs=\"h2\" className={className}>\n {value}\n {unit}\n </Text>\n );\n};\n"],"names":["jsxs","Text"],"mappings":";;;;;;;AAOO,MAAM,OAAO,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,MAAsB,KAAA;AAC7D,EAAA,uBACGA,eAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,OAAQ,EAAA,IAAA;AAAA,IAAK,SAAA;AAAA,IAChB,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltLinearProgress {\n align-items: center;\n color: var(--salt-text-primary-foreground)
|
|
3
|
+
var css_248z = ".saltLinearProgress {\n align-items: center;\n color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */\n display: flex;\n min-width: 400px;\n font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n background: none;\n position: relative;\n width: 100%;\n overflow: hidden;\n height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n top: 0;\n transition: transform 0.2s linear;\n transform-origin: left;\n background: var(--salt-accent-background);\n z-index: 2;\n}\n\n.saltLinearProgress-track {\n background: var(--salt-palette-neutral-secondary-border);\n width: 100%;\n height: var(--salt-size-bar-small);\n position: absolute;\n top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n transition: transform 0.2s linear;\n transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n color: inherit;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n margin: 0;\n white-space: nowrap;\n padding-left: var(--salt-spacing-100);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=LinearProgress.css.js.map
|
|
@@ -13,22 +13,19 @@ var LinearProgress$1 = require('./LinearProgress.css.js');
|
|
|
13
13
|
|
|
14
14
|
const withBaseName = core.makePrefixer("saltLinearProgress");
|
|
15
15
|
const LinearProgress = React.forwardRef(
|
|
16
|
-
function LinearProgress2({ className, max = 100,
|
|
16
|
+
function LinearProgress2({ className, max = 100, value = 0, ...rest }, ref) {
|
|
17
17
|
const targetWindow = window.useWindow();
|
|
18
18
|
styles.useComponentCssInjection({
|
|
19
19
|
testId: "salt-linear-progress",
|
|
20
20
|
css: LinearProgress$1,
|
|
21
21
|
window: targetWindow
|
|
22
22
|
});
|
|
23
|
-
let progressInfo = null;
|
|
24
23
|
const progress = value / max * 100;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
});
|
|
31
|
-
}
|
|
24
|
+
const progressInfo = /* @__PURE__ */ jsxRuntime.jsx(Info.Info, {
|
|
25
|
+
unit: "%",
|
|
26
|
+
value: Math.round(progress),
|
|
27
|
+
className: withBaseName("progressValue")
|
|
28
|
+
});
|
|
32
29
|
const barStyle = {};
|
|
33
30
|
const trackStyle = {};
|
|
34
31
|
barStyle.transform = `translateX(${progress - 100}%)`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { Info } from \"../Info\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The className(s) of the component.\n */\n className?: string;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n *
|
|
1
|
+
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { Info } from \"../Info\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The className(s) of the component.\n */\n className?: string;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * Default unit is `%`.\n */\n unit?: string;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\n/**\n * Linear progress bar with an Info element showing the current value\n */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n function LinearProgress({ className, max = 100, value = 0, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-linear-progress\",\n css: linearProgressCss,\n window: targetWindow,\n });\n\n const progress = (value / max) * 100;\n\n const progressInfo = (\n <Info\n unit=\"%\"\n value={Math.round(progress)}\n className={withBaseName(\"progressValue\")}\n />\n );\n\n const barStyle: CSSProperties = {};\n const trackStyle: CSSProperties = {};\n\n barStyle.transform = `translateX(${progress - 100}%)`;\n trackStyle.transform = `translateX(${progress}%)`;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n data-testid=\"linear-progress\"\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"barContainer\")}>\n <div className={withBaseName(\"bar\")} style={barStyle} />\n <div className={withBaseName(\"track\")} style={trackStyle} />\n </div>\n {progressInfo}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","LinearProgress","useWindow","useComponentCssInjection","linearProgressCss","jsx","Info","jsxs","clsx"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AA0B/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,EAAE,SAAW,EAAA,GAAA,GAAM,KAAK,KAAQ,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AACzE,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,QAAA,GAAY,QAAQ,GAAO,GAAA,GAAA,CAAA;AAEjC,IAAA,MAAM,+BACHC,cAAA,CAAAC,SAAA,EAAA;AAAA,MACC,IAAK,EAAA,GAAA;AAAA,MACL,KAAA,EAAO,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,KACzC,CAAA,CAAA;AAGF,IAAA,MAAM,WAA0B,EAAC,CAAA;AACjC,IAAA,MAAM,aAA4B,EAAC,CAAA;AAEnC,IAAS,QAAA,CAAA,SAAA,GAAY,cAAc,QAAW,GAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AAC9C,IAAA,UAAA,CAAW,YAAY,CAAc,WAAA,EAAA,QAAA,CAAA,EAAA,CAAA,CAAA;AAErC,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,aAAY,EAAA,iBAAA;AAAA,MACZ,IAAK,EAAA,aAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,CAAA;AAAA,MACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC9B,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACzC,QAAA,EAAA;AAAA,4BAACF,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAAG,KAAO,EAAA,QAAA;AAAA,aAAU,CAAA;AAAA,4BACrDA,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAG,KAAO,EAAA,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAC5D,CAAA;AAAA,QACC,YAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-navigable-primary-background);\n
|
|
3
|
+
var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-navigable-primary-background);\n gap: var(--salt-spacing-100);\n border: none;\n border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n border-radius: 0;\n white-space: pre;\n min-width: 4em;\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n position: relative;\n flex-shrink: 0;\n\n cursor: var(--salt-navigable-cursor-hover);\n color: var(--salt-text-primary-foreground);\n font-weight: var(--salt-navigable-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n content: \"\";\n position: absolute;\n left: calc(var(--salt-size-border) * -1);\n right: calc(var(--salt-size-border) * -1);\n height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n.saltTabNext-inline {\n min-height: var(--salt-size-base);\n}\n\n.saltTabNext-main::after {\n top: 0;\n}\n\n.saltTabNext-inline::after {\n bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n background: none;\n}\n\n.saltTabNext:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n background: var(--tabNext-background-active);\n border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n cursor: var(--salt-navigable-cursor-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=TabNext.css.js.map
|
|
@@ -34,19 +34,21 @@ const TabNext = React.forwardRef(function Tab(props, ref) {
|
|
|
34
34
|
window: targetWindow
|
|
35
35
|
});
|
|
36
36
|
const {
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
activeColor,
|
|
38
|
+
isActive,
|
|
39
|
+
activate,
|
|
39
40
|
isFocusable,
|
|
40
41
|
setFocusable,
|
|
41
42
|
disabled: tabstripDisabled,
|
|
42
43
|
unregisterTab,
|
|
43
|
-
registerTab
|
|
44
|
+
registerTab,
|
|
45
|
+
variant
|
|
44
46
|
} = TabNextContext.useTabs();
|
|
45
|
-
const
|
|
47
|
+
const active = isActive(value);
|
|
46
48
|
const focusable = isFocusable(value);
|
|
47
49
|
const disabled = tabstripDisabled || disabledProp;
|
|
48
50
|
const handleClick = (event) => {
|
|
49
|
-
|
|
51
|
+
activate(event);
|
|
50
52
|
onClick == null ? void 0 : onClick(event);
|
|
51
53
|
};
|
|
52
54
|
const handleFocus = (event) => {
|
|
@@ -59,13 +61,18 @@ const TabNext = React.forwardRef(function Tab(props, ref) {
|
|
|
59
61
|
}, [children, registerTab, unregisterTab, value]);
|
|
60
62
|
return /* @__PURE__ */ jsxRuntime.jsx(reactOverflow.OverflowItem, {
|
|
61
63
|
id: value,
|
|
62
|
-
priority:
|
|
64
|
+
priority: active ? 2 : 1,
|
|
63
65
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
64
66
|
className: withBaseName("wrapper"),
|
|
65
67
|
children: /* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
66
|
-
className: clsx__default["default"](
|
|
68
|
+
className: clsx__default["default"](
|
|
69
|
+
withBaseName(),
|
|
70
|
+
withBaseName(variant),
|
|
71
|
+
withBaseName(activeColor),
|
|
72
|
+
className
|
|
73
|
+
),
|
|
67
74
|
"data-value": value,
|
|
68
|
-
"aria-selected":
|
|
75
|
+
"aria-selected": active,
|
|
69
76
|
disabled,
|
|
70
77
|
value,
|
|
71
78
|
ref,
|
|
@@ -74,10 +81,7 @@ const TabNext = React.forwardRef(function Tab(props, ref) {
|
|
|
74
81
|
onFocus: handleFocus,
|
|
75
82
|
tabIndex: focusable && !disabled ? 0 : -1,
|
|
76
83
|
...rest,
|
|
77
|
-
children
|
|
78
|
-
className: withBaseName("label"),
|
|
79
|
-
children
|
|
80
|
-
})
|
|
84
|
+
children
|
|
81
85
|
})
|
|
82
86
|
})
|
|
83
87
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n forwardRef,\n ReactElement,\n ComponentPropsWithoutRef,\n MouseEvent,\n FocusEvent,\n useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* Value prop is mandatory and must be unique in order for overflow to work. */\n value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n props,\n ref\n): ReactElement<TabNextProps> {\n const {\n children,\n className,\n disabled: disabledProp,\n onClick,\n onFocus,\n value,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next\",\n css: tabCss,\n window: targetWindow,\n });\n const {\n
|
|
1
|
+
{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n forwardRef,\n ReactElement,\n ComponentPropsWithoutRef,\n MouseEvent,\n FocusEvent,\n useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* Value prop is mandatory and must be unique in order for overflow to work. */\n value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n props,\n ref\n): ReactElement<TabNextProps> {\n const {\n children,\n className,\n disabled: disabledProp,\n onClick,\n onFocus,\n value,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next\",\n css: tabCss,\n window: targetWindow,\n });\n const {\n activeColor,\n isActive,\n activate,\n isFocusable,\n setFocusable,\n disabled: tabstripDisabled,\n unregisterTab,\n registerTab,\n variant,\n } = useTabs();\n const active = isActive(value);\n const focusable = isFocusable(value);\n const disabled = tabstripDisabled || disabledProp;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n activate(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusable(value);\n onFocus?.(event);\n };\n\n useEffect(() => {\n registerTab({ value, label: children });\n return () => unregisterTab(value);\n }, [children, registerTab, unregisterTab, value]);\n\n return (\n <OverflowItem id={value} priority={active ? 2 : 1}>\n <div className={withBaseName(\"wrapper\")}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n withBaseName(activeColor),\n className\n )}\n data-value={value}\n aria-selected={active}\n disabled={disabled}\n value={value}\n ref={ref}\n role=\"tab\"\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n {...rest}\n >\n {children}\n </button>\n </div>\n </OverflowItem>\n );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tabCss","useTabs","useEffect","jsx","OverflowItem","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAAC,gBAAA,CAA4C,SAAS,GAAA,CAC1E,OACA,GAC4B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,MACEC,sBAAQ,EAAA,CAAA;AACZ,EAAM,MAAA,MAAA,GAAS,SAAS,KAAK,CAAA,CAAA;AAC7B,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,IAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,KAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,EAAA,uBACGC,cAAA,CAAAC,0BAAA,EAAA;AAAA,IAAa,EAAI,EAAA,KAAA;AAAA,IAAO,QAAA,EAAU,SAAS,CAAI,GAAA,CAAA;AAAA,IAC9C,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAC,kBAAAA,cAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAAE,wBAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,WAAW,CAAA;AAAA,UACxB,SAAA;AAAA,SACF;AAAA,QACA,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,MAAA;AAAA,QACf,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,WAAA;AAAA,QACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,QACtC,GAAG,IAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -6,13 +6,15 @@ var core = require('@salt-ds/core');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
|
|
8
8
|
const TabsContext = core.createContext("TabsContext", {
|
|
9
|
+
activeColor: "primary",
|
|
9
10
|
disabled: false,
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
activate: () => void 0,
|
|
12
|
+
isActive: () => false,
|
|
12
13
|
setFocusable: () => void 0,
|
|
13
14
|
isFocusable: () => false,
|
|
14
15
|
registerTab: () => void 0,
|
|
15
|
-
unregisterTab: () => void 0
|
|
16
|
+
unregisterTab: () => void 0,
|
|
17
|
+
variant: "main"
|
|
16
18
|
});
|
|
17
19
|
function useTabs() {
|
|
18
20
|
return React.useContext(TabsContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ntype TabValue = {\n value: string;\n label: ReactNode;\n};\n\nexport interface TabsContextValue {\n disabled?: boolean;\n
|
|
1
|
+
{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ntype TabValue = {\n value: string;\n label: ReactNode;\n};\n\nexport interface TabsContextValue {\n activeColor: \"primary\" | \"secondary\";\n disabled?: boolean;\n activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isActive: (id: string) => boolean;\n setFocusable: (id: string) => void;\n isFocusable: (id: string) => boolean;\n registerTab: (tab: TabValue) => void;\n unregisterTab: (id: string) => void;\n variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n activeColor: \"primary\",\n disabled: false,\n activate: () => undefined,\n isActive: () => false,\n setFocusable: () => undefined,\n isFocusable: () => false,\n registerTab: () => undefined,\n unregisterTab: () => undefined,\n variant: \"main\",\n});\n\nexport function useTabs() {\n return useContext(TabsContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAoBa,MAAA,WAAA,GAAcA,mBAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAOC,iBAAW,WAAW,CAAA,CAAA;AAC/B;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n}\n\n.saltTabstripNext::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n
|
|
3
|
+
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=TabstripNext.css.js.map
|
|
@@ -21,13 +21,16 @@ const withBaseName = core.makePrefixer("saltTabstripNext");
|
|
|
21
21
|
const TabstripNext = React.forwardRef(
|
|
22
22
|
function TabstripNext2(props, ref) {
|
|
23
23
|
const {
|
|
24
|
+
activeColor = "primary",
|
|
25
|
+
align = "left",
|
|
24
26
|
children,
|
|
25
27
|
className,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
defaultSelected,
|
|
28
|
+
value: valueProp,
|
|
29
|
+
defaultValue,
|
|
29
30
|
onChange,
|
|
30
31
|
onKeyDown,
|
|
32
|
+
style,
|
|
33
|
+
variant = "main",
|
|
31
34
|
...rest
|
|
32
35
|
} = props;
|
|
33
36
|
const targetWindow = window.useWindow();
|
|
@@ -38,31 +41,29 @@ const TabstripNext = React.forwardRef(
|
|
|
38
41
|
});
|
|
39
42
|
const tabstripRef = React.useRef(null);
|
|
40
43
|
const handleRef = core.useForkRef(tabstripRef, ref);
|
|
41
|
-
const [
|
|
42
|
-
controlled:
|
|
43
|
-
default:
|
|
44
|
+
const [value, setValue] = core.useControlled({
|
|
45
|
+
controlled: valueProp,
|
|
46
|
+
default: defaultValue,
|
|
44
47
|
name: "TabstripNext",
|
|
45
48
|
state: "selected"
|
|
46
49
|
});
|
|
47
|
-
const [focusable, setFocusableState] = React.useState(
|
|
48
|
-
selected
|
|
49
|
-
);
|
|
50
|
+
const [focusable, setFocusableState] = React.useState(value);
|
|
50
51
|
const [overflowOpen, setOverflowOpen] = React.useState(false);
|
|
51
|
-
const
|
|
52
|
+
const activate = React.useCallback(
|
|
52
53
|
(event) => {
|
|
53
54
|
const newValue = event.currentTarget.value;
|
|
54
|
-
|
|
55
|
-
if (
|
|
55
|
+
setValue(newValue);
|
|
56
|
+
if (value !== newValue) {
|
|
56
57
|
onChange == null ? void 0 : onChange(event, { value: newValue });
|
|
57
58
|
}
|
|
58
59
|
},
|
|
59
|
-
[onChange,
|
|
60
|
+
[onChange, value, setValue]
|
|
60
61
|
);
|
|
61
|
-
const
|
|
62
|
+
const isActive = React.useCallback(
|
|
62
63
|
(id) => {
|
|
63
|
-
return
|
|
64
|
+
return value === id;
|
|
64
65
|
},
|
|
65
|
-
[
|
|
66
|
+
[value]
|
|
66
67
|
);
|
|
67
68
|
const setFocusable = React.useCallback((id) => {
|
|
68
69
|
setFocusableState(id);
|
|
@@ -113,7 +114,7 @@ const TabstripNext = React.forwardRef(
|
|
|
113
114
|
};
|
|
114
115
|
const handleOverflowItemClick = (event, item) => {
|
|
115
116
|
if (item) {
|
|
116
|
-
|
|
117
|
+
setValue(item.value);
|
|
117
118
|
requestAnimationFrame(() => {
|
|
118
119
|
var _a;
|
|
119
120
|
const element = (_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
|
|
@@ -123,7 +124,7 @@ const TabstripNext = React.forwardRef(
|
|
|
123
124
|
element == null ? void 0 : element.focus();
|
|
124
125
|
}
|
|
125
126
|
});
|
|
126
|
-
if (
|
|
127
|
+
if (value !== item.value) {
|
|
127
128
|
onChange == null ? void 0 : onChange(event, { value: item.value });
|
|
128
129
|
}
|
|
129
130
|
}
|
|
@@ -131,26 +132,34 @@ const TabstripNext = React.forwardRef(
|
|
|
131
132
|
const handleOverflowOpenChange = (isOpen) => {
|
|
132
133
|
setOverflowOpen(isOpen);
|
|
133
134
|
};
|
|
134
|
-
const
|
|
135
|
+
const contextValue = React.useMemo(
|
|
135
136
|
() => ({
|
|
136
|
-
|
|
137
|
-
|
|
137
|
+
activate,
|
|
138
|
+
isActive,
|
|
138
139
|
setFocusable,
|
|
139
140
|
isFocusable,
|
|
140
141
|
registerTab,
|
|
141
|
-
unregisterTab
|
|
142
|
+
unregisterTab,
|
|
143
|
+
variant,
|
|
144
|
+
activeColor
|
|
142
145
|
}),
|
|
143
146
|
[
|
|
144
|
-
|
|
145
|
-
|
|
147
|
+
activate,
|
|
148
|
+
isActive,
|
|
146
149
|
setFocusable,
|
|
147
150
|
isFocusable,
|
|
148
151
|
registerTab,
|
|
149
|
-
unregisterTab
|
|
152
|
+
unregisterTab,
|
|
153
|
+
variant,
|
|
154
|
+
activeColor
|
|
150
155
|
]
|
|
151
156
|
);
|
|
157
|
+
const tabstripStyle = {
|
|
158
|
+
"--tabstripNext-justifyContent": align,
|
|
159
|
+
...style
|
|
160
|
+
};
|
|
152
161
|
return /* @__PURE__ */ jsxRuntime.jsx(TabNextContext.TabsContext.Provider, {
|
|
153
|
-
value,
|
|
162
|
+
value: contextValue,
|
|
154
163
|
children: /* @__PURE__ */ jsxRuntime.jsx(reactOverflow.Overflow, {
|
|
155
164
|
ref: handleRef,
|
|
156
165
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
@@ -158,9 +167,11 @@ const TabstripNext = React.forwardRef(
|
|
|
158
167
|
className: clsx__default["default"](
|
|
159
168
|
withBaseName(),
|
|
160
169
|
withBaseName("horizontal"),
|
|
170
|
+
withBaseName(variant),
|
|
161
171
|
className
|
|
162
172
|
),
|
|
163
173
|
onKeyDown: handleKeyDown,
|
|
174
|
+
style: tabstripStyle,
|
|
164
175
|
...rest,
|
|
165
176
|
children: [
|
|
166
177
|
children,
|