@salt-ds/lab 1.0.0-alpha.20 → 1.0.0-alpha.21
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/badge/Badge.css.js +1 -1
- package/dist-cjs/combo-box-next/ComboBoxNext.js +2 -2
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/tabs-next/TabNext.css.js +1 -1
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.js +2 -2
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/tabs-next/TabNext.css.js +1 -1
- package/dist-types/progress/LinearProgress/LinearProgress.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n line-height: var(--salt-accent-lineHeight);\n height: var(--salt-accent-lineHeight);\n min-width: var(--salt-accent-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-notification);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-accent-fontSize);\n font-weight: var(--salt-accent-fontWeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position:
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n line-height: var(--salt-accent-lineHeight);\n height: var(--salt-accent-lineHeight);\n min-width: var(--salt-accent-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-notification);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-accent-fontSize);\n font-weight: var(--salt-accent-fontWeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Badge.css.js.map
|
|
@@ -98,7 +98,7 @@ const ComboBoxNext = React.forwardRef(function ComboBoxNext2({
|
|
|
98
98
|
return null;
|
|
99
99
|
if (selectedItem && inputValue === selectedItem)
|
|
100
100
|
return source;
|
|
101
|
-
return itemFilter
|
|
101
|
+
return itemFilter == null ? void 0 : itemFilter(source, inputValue);
|
|
102
102
|
};
|
|
103
103
|
const filteredSource = getFilteredSource();
|
|
104
104
|
const onChange = (event) => {
|
|
@@ -115,7 +115,7 @@ const ComboBoxNext = React.forwardRef(function ComboBoxNext2({
|
|
|
115
115
|
setHighlightedItem(filteredSource[0]);
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
|
-
onInputChange == null ? void 0 : onInputChange(event, { value:
|
|
118
|
+
onInputChange == null ? void 0 : onInputChange(event, { value: value != null ? value : "" });
|
|
119
119
|
};
|
|
120
120
|
const adornment = open ? /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
|
|
121
121
|
className: withBaseName("chevron")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactElement,\n Ref,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n Input,\n makePrefixer,\n useForkRef,\n useId,\n useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n /**\n * Additional props for the list component.\n */\n ListProps?: ListNextProps;\n /**\n * Additional props for the portal.\n */\n PortalProps?: UseComboBoxPortalProps;\n /**\n * Controlled prop. Controls the Input value in the Combo Box Input.\n */\n inputValue?: string;\n /**\n * Controlled prop. Controls the Highlighted item in the Combo Box list.\n */\n highlightedItem?: string;\n /**\n * Controlled prop. Controls the Selected value in the Combo Box list.\n */\n selected?: string;\n /**\n * Initial input value for when the list is uncontrolled.\n */\n defaultInputValue?: string;\n /**\n * Initial selected value for when the list is uncontrolled.\n */\n defaultSelected?: string;\n /**\n * If `true`, the component will be disabled.\n */\n disabled?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n /**\n * The source of combobox items.\n */\n source: T[];\n /**\n * Optional ref for the list component\n */\n listRef?: Ref<HTMLUListElement>;\n /**\n * The component used for item instead of the default.\n */\n ListItem?: (\n props: ComboBoxItemProps<T>\n ) => ReactElement<ComboBoxItemProps<T>>;\n /**\n * Function to be used as filter.\n */\n itemFilter?: (source: T[], filterValue?: string) => T[];\n /**\n * Callback for mouse over event\n */\n onMouseOver?: (event: SyntheticEvent) => void;\n /**\n * Callback for list selection event\n */\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /**\n /**\n * Callback for list change event\n */\n onListChange?: (\n event: SyntheticEvent,\n data: { value: string | undefined }\n ) => void;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n {\n ListProps = {},\n PortalProps = {},\n inputValue: inputValueProp,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultInputValue,\n defaultSelected,\n disabled,\n variant = \"primary\",\n source,\n listRef: listRefProp,\n ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n onMouseOver,\n onFocus,\n onKeyDown,\n onSelect,\n onListChange,\n onChange: onInputChange,\n ...rest\n }: ComboBoxNextProps<T>,\n ref?: ForwardedRef<HTMLInputElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-next\",\n css: comboBoxNextCss,\n window: targetWindow,\n });\n const listId = useId(ListProps?.id);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n disabled,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultSelected,\n onChange: onListChange,\n onSelect: onSelect,\n id: listId,\n ref: listRef,\n };\n\n const {\n inputValue,\n setInputValue,\n portalProps,\n selectedItem,\n highlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n setSelectedItem,\n setHighlightedItem,\n mouseOverHandler,\n mouseDownHandler,\n listSelectHandler,\n } = useComboBox({\n defaultInputValue,\n inputValue: inputValueProp,\n onFocus,\n onMouseOver,\n onKeyDown,\n listProps,\n PortalProps,\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n getPosition,\n } = portalProps;\n\n // floating references\n const triggerRef = useForkRef(ref, reference);\n const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const getFilteredSource = () => {\n if (!source) return null;\n if (selectedItem && inputValue === selectedItem) return source;\n return itemFilter && itemFilter(source, inputValue);\n };\n const filteredSource = getFilteredSource();\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setInputValue(value);\n if (value === \"\") {\n setHighlightedItem(undefined);\n setSelectedItem(value);\n } else {\n if (!open) {\n setOpen(true);\n }\n if (filteredSource) {\n setHighlightedItem(filteredSource[0] as unknown as string);\n }\n }\n onInputChange?.(event, { value: inputValue ?? \"\" });\n };\n\n const adornment = open ? (\n <ChevronUpIcon className={withBaseName(\"chevron\")} />\n ) : (\n <ChevronDownIcon className={withBaseName(\"chevron\")} />\n );\n\n const { className: listClassName, ...restListProps } = ListProps;\n const { className: inputClassName, ...restInputProps } = rest;\n\n return (\n <>\n <Input\n aria-controls={listId}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n disabled={disabled}\n endAdornment={adornment}\n onChange={onChange}\n onMouseDown={mouseDownHandler}\n inputRef={inputRef as Ref<HTMLInputElement>}\n inputProps={{\n \"aria-expanded\": open,\n tabIndex: disabled ? -1 : 0,\n onFocus: focusHandler,\n onKeyDown: keyDownHandler,\n }}\n role=\"combobox\"\n variant={variant}\n value={inputValue}\n {...getTriggerProps()}\n {...restInputProps}\n />\n\n <FloatingComponent\n open={Boolean(open && !disabled && filteredSource)}\n ref={floating}\n {...getPortalProps()}\n {...getPosition()}\n >\n <ListNext\n className={clsx(withBaseName(\"list\"), listClassName)}\n disableFocus\n highlightedItem={highlightedItem}\n onMouseOver={mouseOverHandler}\n onSelect={listSelectHandler}\n selected={selectedItem}\n {...restListProps}\n ref={setListRef}\n >\n {filteredSource?.map((value, index) => {\n const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n setSelectedItem(event.currentTarget?.dataset.value);\n setInputValue(event.currentTarget?.dataset.value);\n };\n return (\n ListItem && (\n <ListItem\n key={index}\n value={value}\n matchPattern={inputValue}\n onMouseDown={onMouseDown}\n />\n )\n );\n })}\n </ListNext>\n </FloatingComponent>\n </>\n );\n});\n"],"names":["makePrefixer","forwardRef","ComboBoxNext","DefaultListItem","defaultFilter","useWindow","useComponentCssInjection","comboBoxNextCss","useId","useRef","useForkRef","useComboBox","useFloatingComponent","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","Fragment","Input","clsx","ListNext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactElement,\n Ref,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n Input,\n makePrefixer,\n useForkRef,\n useId,\n useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n /**\n * Additional props for the list component.\n */\n ListProps?: ListNextProps;\n /**\n * Additional props for the portal.\n */\n PortalProps?: UseComboBoxPortalProps;\n /**\n * Controlled prop. Controls the Input value in the Combo Box Input.\n */\n inputValue?: string;\n /**\n * Controlled prop. Controls the Highlighted item in the Combo Box list.\n */\n highlightedItem?: string;\n /**\n * Controlled prop. Controls the Selected value in the Combo Box list.\n */\n selected?: string;\n /**\n * Initial input value for when the list is uncontrolled.\n */\n defaultInputValue?: string;\n /**\n * Initial selected value for when the list is uncontrolled.\n */\n defaultSelected?: string;\n /**\n * If `true`, the component will be disabled.\n */\n disabled?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n /**\n * The source of combobox items.\n */\n source: T[];\n /**\n * Optional ref for the list component\n */\n listRef?: Ref<HTMLUListElement>;\n /**\n * The component used for item instead of the default.\n */\n ListItem?: (\n props: ComboBoxItemProps<T>\n ) => ReactElement<ComboBoxItemProps<T>>;\n /**\n * Function to be used as filter.\n */\n itemFilter?: (source: T[], filterValue?: string) => T[];\n /**\n * Callback for mouse over event\n */\n onMouseOver?: (event: SyntheticEvent) => void;\n /**\n * Callback for list selection event\n */\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /**\n /**\n * Callback for list change event\n */\n onListChange?: (\n event: SyntheticEvent,\n data: { value: string | undefined }\n ) => void;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n {\n ListProps = {},\n PortalProps = {},\n inputValue: inputValueProp,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultInputValue,\n defaultSelected,\n disabled,\n variant = \"primary\",\n source,\n listRef: listRefProp,\n ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n onMouseOver,\n onFocus,\n onKeyDown,\n onSelect,\n onListChange,\n onChange: onInputChange,\n ...rest\n }: ComboBoxNextProps<T>,\n ref?: ForwardedRef<HTMLInputElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-next\",\n css: comboBoxNextCss,\n window: targetWindow,\n });\n const listId = useId(ListProps?.id);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n disabled,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultSelected,\n onChange: onListChange,\n onSelect: onSelect,\n id: listId,\n ref: listRef,\n };\n\n const {\n inputValue,\n setInputValue,\n portalProps,\n selectedItem,\n highlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n setSelectedItem,\n setHighlightedItem,\n mouseOverHandler,\n mouseDownHandler,\n listSelectHandler,\n } = useComboBox({\n defaultInputValue,\n inputValue: inputValueProp,\n onFocus,\n onMouseOver,\n onKeyDown,\n listProps,\n PortalProps,\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n getPosition,\n } = portalProps;\n\n // floating references\n const triggerRef = useForkRef(ref, reference);\n const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const getFilteredSource = () => {\n if (!source) return null;\n if (selectedItem && inputValue === selectedItem) return source;\n return itemFilter?.(source, inputValue);\n };\n const filteredSource = getFilteredSource();\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setInputValue(value);\n if (value === \"\") {\n setHighlightedItem(undefined);\n setSelectedItem(value);\n } else {\n if (!open) {\n setOpen(true);\n }\n if (filteredSource) {\n setHighlightedItem(filteredSource[0] as unknown as string);\n }\n }\n onInputChange?.(event, { value: value ?? \"\" });\n };\n\n const adornment = open ? (\n <ChevronUpIcon className={withBaseName(\"chevron\")} />\n ) : (\n <ChevronDownIcon className={withBaseName(\"chevron\")} />\n );\n\n const { className: listClassName, ...restListProps } = ListProps;\n const { className: inputClassName, ...restInputProps } = rest;\n\n return (\n <>\n <Input\n aria-controls={listId}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n disabled={disabled}\n endAdornment={adornment}\n onChange={onChange}\n onMouseDown={mouseDownHandler}\n inputRef={inputRef as Ref<HTMLInputElement>}\n inputProps={{\n \"aria-expanded\": open,\n tabIndex: disabled ? -1 : 0,\n onFocus: focusHandler,\n onKeyDown: keyDownHandler,\n }}\n role=\"combobox\"\n variant={variant}\n value={inputValue}\n {...getTriggerProps()}\n {...restInputProps}\n />\n\n <FloatingComponent\n open={Boolean(open && !disabled && filteredSource)}\n ref={floating}\n {...getPortalProps()}\n {...getPosition()}\n >\n <ListNext\n className={clsx(withBaseName(\"list\"), listClassName)}\n disableFocus\n highlightedItem={highlightedItem}\n onMouseOver={mouseOverHandler}\n onSelect={listSelectHandler}\n selected={selectedItem}\n {...restListProps}\n ref={setListRef}\n >\n {filteredSource?.map((value, index) => {\n const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n setSelectedItem(event.currentTarget?.dataset.value);\n setInputValue(event.currentTarget?.dataset.value);\n };\n return (\n ListItem && (\n <ListItem\n key={index}\n value={value}\n matchPattern={inputValue}\n onMouseDown={onMouseDown}\n />\n )\n );\n })}\n </ListNext>\n </FloatingComponent>\n </>\n );\n});\n"],"names":["makePrefixer","forwardRef","ComboBoxNext","DefaultListItem","defaultFilter","useWindow","useComponentCssInjection","comboBoxNextCss","useId","useRef","useForkRef","useComboBox","useFloatingComponent","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","Fragment","Input","clsx","ListNext"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes
|
|
1
|
+
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } 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 * The unit shown on the progress indicator.\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;AA2B/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 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
|
|
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-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\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::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
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n line-height: var(--salt-accent-lineHeight);\n height: var(--salt-accent-lineHeight);\n min-width: var(--salt-accent-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-notification);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-accent-fontSize);\n font-weight: var(--salt-accent-fontWeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position:
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n line-height: var(--salt-accent-lineHeight);\n height: var(--salt-accent-lineHeight);\n min-width: var(--salt-accent-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-notification);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-accent-fontSize);\n font-weight: var(--salt-accent-fontWeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Badge.css.js.map
|
|
@@ -94,7 +94,7 @@ const ComboBoxNext = forwardRef(function ComboBoxNext2({
|
|
|
94
94
|
return null;
|
|
95
95
|
if (selectedItem && inputValue === selectedItem)
|
|
96
96
|
return source;
|
|
97
|
-
return itemFilter
|
|
97
|
+
return itemFilter == null ? void 0 : itemFilter(source, inputValue);
|
|
98
98
|
};
|
|
99
99
|
const filteredSource = getFilteredSource();
|
|
100
100
|
const onChange = (event) => {
|
|
@@ -111,7 +111,7 @@ const ComboBoxNext = forwardRef(function ComboBoxNext2({
|
|
|
111
111
|
setHighlightedItem(filteredSource[0]);
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
onInputChange == null ? void 0 : onInputChange(event, { value:
|
|
114
|
+
onInputChange == null ? void 0 : onInputChange(event, { value: value != null ? value : "" });
|
|
115
115
|
};
|
|
116
116
|
const adornment = open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
|
|
117
117
|
className: withBaseName("chevron")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactElement,\n Ref,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n Input,\n makePrefixer,\n useForkRef,\n useId,\n useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n /**\n * Additional props for the list component.\n */\n ListProps?: ListNextProps;\n /**\n * Additional props for the portal.\n */\n PortalProps?: UseComboBoxPortalProps;\n /**\n * Controlled prop. Controls the Input value in the Combo Box Input.\n */\n inputValue?: string;\n /**\n * Controlled prop. Controls the Highlighted item in the Combo Box list.\n */\n highlightedItem?: string;\n /**\n * Controlled prop. Controls the Selected value in the Combo Box list.\n */\n selected?: string;\n /**\n * Initial input value for when the list is uncontrolled.\n */\n defaultInputValue?: string;\n /**\n * Initial selected value for when the list is uncontrolled.\n */\n defaultSelected?: string;\n /**\n * If `true`, the component will be disabled.\n */\n disabled?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n /**\n * The source of combobox items.\n */\n source: T[];\n /**\n * Optional ref for the list component\n */\n listRef?: Ref<HTMLUListElement>;\n /**\n * The component used for item instead of the default.\n */\n ListItem?: (\n props: ComboBoxItemProps<T>\n ) => ReactElement<ComboBoxItemProps<T>>;\n /**\n * Function to be used as filter.\n */\n itemFilter?: (source: T[], filterValue?: string) => T[];\n /**\n * Callback for mouse over event\n */\n onMouseOver?: (event: SyntheticEvent) => void;\n /**\n * Callback for list selection event\n */\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /**\n /**\n * Callback for list change event\n */\n onListChange?: (\n event: SyntheticEvent,\n data: { value: string | undefined }\n ) => void;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n {\n ListProps = {},\n PortalProps = {},\n inputValue: inputValueProp,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultInputValue,\n defaultSelected,\n disabled,\n variant = \"primary\",\n source,\n listRef: listRefProp,\n ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n onMouseOver,\n onFocus,\n onKeyDown,\n onSelect,\n onListChange,\n onChange: onInputChange,\n ...rest\n }: ComboBoxNextProps<T>,\n ref?: ForwardedRef<HTMLInputElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-next\",\n css: comboBoxNextCss,\n window: targetWindow,\n });\n const listId = useId(ListProps?.id);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n disabled,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultSelected,\n onChange: onListChange,\n onSelect: onSelect,\n id: listId,\n ref: listRef,\n };\n\n const {\n inputValue,\n setInputValue,\n portalProps,\n selectedItem,\n highlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n setSelectedItem,\n setHighlightedItem,\n mouseOverHandler,\n mouseDownHandler,\n listSelectHandler,\n } = useComboBox({\n defaultInputValue,\n inputValue: inputValueProp,\n onFocus,\n onMouseOver,\n onKeyDown,\n listProps,\n PortalProps,\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n getPosition,\n } = portalProps;\n\n // floating references\n const triggerRef = useForkRef(ref, reference);\n const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const getFilteredSource = () => {\n if (!source) return null;\n if (selectedItem && inputValue === selectedItem) return source;\n return itemFilter && itemFilter(source, inputValue);\n };\n const filteredSource = getFilteredSource();\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setInputValue(value);\n if (value === \"\") {\n setHighlightedItem(undefined);\n setSelectedItem(value);\n } else {\n if (!open) {\n setOpen(true);\n }\n if (filteredSource) {\n setHighlightedItem(filteredSource[0] as unknown as string);\n }\n }\n onInputChange?.(event, { value: inputValue ?? \"\" });\n };\n\n const adornment = open ? (\n <ChevronUpIcon className={withBaseName(\"chevron\")} />\n ) : (\n <ChevronDownIcon className={withBaseName(\"chevron\")} />\n );\n\n const { className: listClassName, ...restListProps } = ListProps;\n const { className: inputClassName, ...restInputProps } = rest;\n\n return (\n <>\n <Input\n aria-controls={listId}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n disabled={disabled}\n endAdornment={adornment}\n onChange={onChange}\n onMouseDown={mouseDownHandler}\n inputRef={inputRef as Ref<HTMLInputElement>}\n inputProps={{\n \"aria-expanded\": open,\n tabIndex: disabled ? -1 : 0,\n onFocus: focusHandler,\n onKeyDown: keyDownHandler,\n }}\n role=\"combobox\"\n variant={variant}\n value={inputValue}\n {...getTriggerProps()}\n {...restInputProps}\n />\n\n <FloatingComponent\n open={Boolean(open && !disabled && filteredSource)}\n ref={floating}\n {...getPortalProps()}\n {...getPosition()}\n >\n <ListNext\n className={clsx(withBaseName(\"list\"), listClassName)}\n disableFocus\n highlightedItem={highlightedItem}\n onMouseOver={mouseOverHandler}\n onSelect={listSelectHandler}\n selected={selectedItem}\n {...restListProps}\n ref={setListRef}\n >\n {filteredSource?.map((value, index) => {\n const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n setSelectedItem(event.currentTarget?.dataset.value);\n setInputValue(event.currentTarget?.dataset.value);\n };\n return (\n ListItem && (\n <ListItem\n key={index}\n value={value}\n matchPattern={inputValue}\n onMouseDown={onMouseDown}\n />\n )\n );\n })}\n </ListNext>\n </FloatingComponent>\n </>\n );\n});\n"],"names":["ComboBoxNext","comboBoxNextCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactElement,\n Ref,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n Input,\n makePrefixer,\n useForkRef,\n useId,\n useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n /**\n * Additional props for the list component.\n */\n ListProps?: ListNextProps;\n /**\n * Additional props for the portal.\n */\n PortalProps?: UseComboBoxPortalProps;\n /**\n * Controlled prop. Controls the Input value in the Combo Box Input.\n */\n inputValue?: string;\n /**\n * Controlled prop. Controls the Highlighted item in the Combo Box list.\n */\n highlightedItem?: string;\n /**\n * Controlled prop. Controls the Selected value in the Combo Box list.\n */\n selected?: string;\n /**\n * Initial input value for when the list is uncontrolled.\n */\n defaultInputValue?: string;\n /**\n * Initial selected value for when the list is uncontrolled.\n */\n defaultSelected?: string;\n /**\n * If `true`, the component will be disabled.\n */\n disabled?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n /**\n * The source of combobox items.\n */\n source: T[];\n /**\n * Optional ref for the list component\n */\n listRef?: Ref<HTMLUListElement>;\n /**\n * The component used for item instead of the default.\n */\n ListItem?: (\n props: ComboBoxItemProps<T>\n ) => ReactElement<ComboBoxItemProps<T>>;\n /**\n * Function to be used as filter.\n */\n itemFilter?: (source: T[], filterValue?: string) => T[];\n /**\n * Callback for mouse over event\n */\n onMouseOver?: (event: SyntheticEvent) => void;\n /**\n * Callback for list selection event\n */\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /**\n /**\n * Callback for list change event\n */\n onListChange?: (\n event: SyntheticEvent,\n data: { value: string | undefined }\n ) => void;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n {\n ListProps = {},\n PortalProps = {},\n inputValue: inputValueProp,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultInputValue,\n defaultSelected,\n disabled,\n variant = \"primary\",\n source,\n listRef: listRefProp,\n ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n onMouseOver,\n onFocus,\n onKeyDown,\n onSelect,\n onListChange,\n onChange: onInputChange,\n ...rest\n }: ComboBoxNextProps<T>,\n ref?: ForwardedRef<HTMLInputElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-next\",\n css: comboBoxNextCss,\n window: targetWindow,\n });\n const listId = useId(ListProps?.id);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n disabled,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultSelected,\n onChange: onListChange,\n onSelect: onSelect,\n id: listId,\n ref: listRef,\n };\n\n const {\n inputValue,\n setInputValue,\n portalProps,\n selectedItem,\n highlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n setSelectedItem,\n setHighlightedItem,\n mouseOverHandler,\n mouseDownHandler,\n listSelectHandler,\n } = useComboBox({\n defaultInputValue,\n inputValue: inputValueProp,\n onFocus,\n onMouseOver,\n onKeyDown,\n listProps,\n PortalProps,\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n getPosition,\n } = portalProps;\n\n // floating references\n const triggerRef = useForkRef(ref, reference);\n const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const getFilteredSource = () => {\n if (!source) return null;\n if (selectedItem && inputValue === selectedItem) return source;\n return itemFilter?.(source, inputValue);\n };\n const filteredSource = getFilteredSource();\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setInputValue(value);\n if (value === \"\") {\n setHighlightedItem(undefined);\n setSelectedItem(value);\n } else {\n if (!open) {\n setOpen(true);\n }\n if (filteredSource) {\n setHighlightedItem(filteredSource[0] as unknown as string);\n }\n }\n onInputChange?.(event, { value: value ?? \"\" });\n };\n\n const adornment = open ? (\n <ChevronUpIcon className={withBaseName(\"chevron\")} />\n ) : (\n <ChevronDownIcon className={withBaseName(\"chevron\")} />\n );\n\n const { className: listClassName, ...restListProps } = ListProps;\n const { className: inputClassName, ...restInputProps } = rest;\n\n return (\n <>\n <Input\n aria-controls={listId}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n disabled={disabled}\n endAdornment={adornment}\n onChange={onChange}\n onMouseDown={mouseDownHandler}\n inputRef={inputRef as Ref<HTMLInputElement>}\n inputProps={{\n \"aria-expanded\": open,\n tabIndex: disabled ? -1 : 0,\n onFocus: focusHandler,\n onKeyDown: keyDownHandler,\n }}\n role=\"combobox\"\n variant={variant}\n value={inputValue}\n {...getTriggerProps()}\n {...restInputProps}\n />\n\n <FloatingComponent\n open={Boolean(open && !disabled && filteredSource)}\n ref={floating}\n {...getPortalProps()}\n {...getPosition()}\n >\n <ListNext\n className={clsx(withBaseName(\"list\"), listClassName)}\n disableFocus\n highlightedItem={highlightedItem}\n onMouseOver={mouseOverHandler}\n onSelect={listSelectHandler}\n selected={selectedItem}\n {...restListProps}\n ref={setListRef}\n >\n {filteredSource?.map((value, index) => {\n const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n setSelectedItem(event.currentTarget?.dataset.value);\n setInputValue(event.currentTarget?.dataset.value);\n };\n return (\n ListItem && (\n <ListItem\n key={index}\n value={value}\n matchPattern={inputValue}\n onMouseDown={onMouseDown}\n />\n )\n );\n })}\n </ListNext>\n </FloatingComponent>\n </>\n );\n});\n"],"names":["ComboBoxNext","comboBoxNextCss"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes
|
|
1
|
+
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } 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 * The unit shown on the progress indicator.\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":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AA2B/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,EAAE,SAAW,EAAA,GAAA,GAAM,KAAK,KAAQ,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AACzE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,QAAA,GAAY,QAAQ,GAAO,GAAA,GAAA,CAAA;AAEjC,IAAA,MAAM,+BACH,GAAA,CAAA,IAAA,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,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,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,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACzC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAAG,KAAO,EAAA,QAAA;AAAA,aAAU,CAAA;AAAA,4BACrD,GAAA,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,4 +1,4 @@
|
|
|
1
|
-
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
|
|
1
|
+
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-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\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::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";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=TabNext.css.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.21",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-window": "^1.8.6",
|
|
27
27
|
"rifm": "^0.12.0",
|
|
28
28
|
"tinycolor2": "^1.4.2",
|
|
29
|
-
"@salt-ds/core": "^1.11.
|
|
29
|
+
"@salt-ds/core": "^1.11.1",
|
|
30
30
|
"@salt-ds/window": "^0.1.1",
|
|
31
31
|
"@salt-ds/styles": "^0.1.2",
|
|
32
32
|
"@salt-ds/icons": "^1.7.0"
|