npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.0 → 1.0.0-alpha.1 - Mend

@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.1

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.

Files changed (551) hide show

package/dist-cjs/packages/lab/src/pagination/CompactInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import cn from \"~~classnames~~\";\nimport {\n ChangeEventHandler,\n KeyboardEventHandler,\n useEffect,\n useState,\n} from \"react\";\nimport { FormField, FormFieldProps } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { withBaseName } from \"./utils\";\n\nexport interface CompactInputProps {\n count: number;\n page: number;\n onPageChange: (page: number) => void;\n FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const CompactInput = ({\n page,\n count,\n onPageChange,\n FormFieldProps: { className, ...restFormFieldProps } = {},\n}: CompactInputProps) => {\n const [inputValue, setInputValue] = useState(`${page}`);\n\n useEffect(() => {\n setInputValue(`${page}`);\n }, [page]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n onPageChange(pageValue);\n } else {\n setInputValue(`${page}`);\n }\n }\n };\n\n const handleBlur = () => {\n setInputValue(`${page}`);\n };\n\n return (\n <span>\n <FormField\n className={cn(withBaseName(\"compactInputField\"), className)}\n fullWidth={false}\n {...restFormFieldProps}\n >\n <Input\n className={cn(withBaseName(\"compactInput\"), {\n [withBaseName(\"compactInputFixed\")]: count < 100,\n })}\n highlightOnFocus\n inputProps={{\n \"aria-label\": `Go to page, ${count} total`,\n style: { width: `${`${count}`.length}ch` },\n role: \"textbox\",\n }}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n />\n </FormField>\n </span>\n );\n};\n"],"names":["useState","useEffect","jsx","FormField","cn","withBaseName","Input"],"mappings":"~~;;;;;;;;;;;;;;;;;~~AAkBO,MAAM,eAAe,CAAC;AAAA,EAC3B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAgB,EAAA,EAAE,SAAc,EAAA,GAAA,kBAAA,KAAuB,EAAC;AAC1D,CAAyB,KAAA;AACvB,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAA,cAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAA,IAAI,CAAC,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AAC5D,QAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AAAA,OACjB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,IACC,QAAC,kBAAAA,cAAA,CAAAC,mBAAA,EAAA;AAAA,MACC,SAAW,EAAAC,~~sBAAA~~,~~CAAGC~~,kBAAa,CAAA,mBAAmB,GAAG,SAAS,CAAA;AAAA,~~MAC1D~~,SAAW,EAAA,KAAA;AAAA,MACV,GAAG,kBAAA;AAAA,MAEJ,QAAC,kBAAAH,cAAA,CAAAI,WAAA,EAAA;AAAA,QACC,SAAW,EAAAF,~~sBAAA~~,~~CAAGC~~,kBAAa,CAAA,cAAc,CAAG,EAAA;AAAA,~~UAC1C~~,CAACA,kBAAA,CAAa,mBAAmB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,SAC9C,CAAA;AAAA,QACD,gBAAgB,EAAA,IAAA;AAAA,QAChB,UAAY,EAAA;AAAA,UACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,UAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,UACzC,IAAM,EAAA,SAAA;AAAA,SACR;AAAA,QACA,MAAQ,EAAA,UAAA;AAAA,QACR,QAAU,EAAA,YAAA;AAAA,QACV,SAAW,EAAA,aAAA;AAAA,QACX,KAAO,EAAA,UAAA;AAAA,QACP,SAAW,EAAA,QAAA;AAAA,OACb,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n KeyboardEventHandler,\n useEffect,\n useState,\n} from \"react\";\nimport { FormField, FormFieldProps } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { withBaseName } from \"./utils\";\n\nexport interface CompactInputProps {\n count: number;\n page: number;\n onPageChange: (page: number) => void;\n FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const CompactInput = ({\n page,\n count,\n onPageChange,\n FormFieldProps: { className, ...restFormFieldProps } = {},\n}: CompactInputProps) => {\n const [inputValue, setInputValue] = useState(`${page}`);\n\n useEffect(() => {\n setInputValue(`${page}`);\n }, [page]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n onPageChange(pageValue);\n } else {\n setInputValue(`${page}`);\n }\n }\n };\n\n const handleBlur = () => {\n setInputValue(`${page}`);\n };\n\n return (\n <span>\n <FormField\n className={clsx(withBaseName(\"compactInputField\"), className)}\n fullWidth={false}\n {...restFormFieldProps}\n >\n <Input\n className={clsx(withBaseName(\"compactInput\"), {\n [withBaseName(\"compactInputFixed\")]: count < 100,\n })}\n highlightOnFocus\n inputProps={{\n \"aria-label\": `Go to page, ${count} total`,\n style: { width: `${`${count}`.length}ch` },\n role: \"textbox\",\n }}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n />\n </FormField>\n </span>\n );\n};\n"],"names":["useState","useEffect","jsx","FormField","clsx","withBaseName","Input"],"mappings":";;;;;;;;;;;;;AAkBO,MAAM,eAAe,CAAC;AAAA,EAC3B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAgB,EAAA,EAAE,SAAc,EAAA,GAAA,kBAAA,KAAuB,EAAC;AAC1D,CAAyB,KAAA;AACvB,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAA,cAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAA,IAAI,CAAC,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AAC5D,QAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AAAA,OACjB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,IACC,QAAC,kBAAAA,cAAA,CAAAC,mBAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAKC,kBAAa,CAAA,mBAAmB,GAAG,SAAS,CAAA;AAAA,MAC5D,SAAW,EAAA,KAAA;AAAA,MACV,GAAG,kBAAA;AAAA,MAEJ,QAAC,kBAAAH,cAAA,CAAAI,WAAA,EAAA;AAAA,QACC,SAAW,EAAAF,SAAA,CAAKC,kBAAa,CAAA,cAAc,CAAG,EAAA;AAAA,UAC5C,CAACA,kBAAA,CAAa,mBAAmB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,SAC9C,CAAA;AAAA,QACD,gBAAgB,EAAA,IAAA;AAAA,QAChB,UAAY,EAAA;AAAA,UACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,UAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,UACzC,IAAM,EAAA,SAAA;AAAA,SACR;AAAA,QACA,MAAQ,EAAA,UAAA;AAAA,QACR,QAAU,EAAA,YAAA;AAAA,QACV,SAAW,EAAA,aAAA;AAAA,QACX,KAAO,EAAA,UAAA;AAAA,QACP,SAAW,EAAA,QAAA;AAAA,OACb,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/pagination/GoToInput.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var usePaginationContext = require('./usePaginationContext.js');
@@ -13,10 +13,6 @@ require('../form-field/FormLabel.js');
 var Input = require('../input/Input.js');
 require('../input/StaticInputAdornment.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const GoToInput = React.forwardRef(
   ({
     className,
@@ -66,7 +62,7 @@ const GoToInput = React.forwardRef(
     }
     const widthCh = `${`${count}`.length}ch`;
     return /* @__PURE__ */ jsxRuntime.jsx("span", {
-      className: cx__default["default"](
+      className: clsx.clsx(
         utils.withBaseName("goToInputWrapper"),
         { [utils.withBaseName(`${position}GoToInput`)]: position },
         className
@@ -79,7 +75,7 @@ const GoToInput = React.forwardRef(
         labelPlacement: "left",
         ...restFormFieldProps,
         children: /* @__PURE__ */ jsxRuntime.jsx(Input.Input, {
-          className: cx__default["default"](utils.withBaseName("goToInput"), {
+          className: clsx.clsx(utils.withBaseName("goToInput"), {
             [utils.withBaseName("goToInputFixed")]: count < 100
           }),
           id,

package/dist-cjs/packages/lab/src/pagination/GoToInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import cx from \"~~classnames~~\";\nimport {\n ChangeEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useForkRef, useId, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\nimport { withBaseName } from \"./utils\";\nimport { FormField, FormFieldProps } from \"../form-field\";\nimport { Input } from \"../input\";\n\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n label?: string;\n FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const GoToInput = forwardRef<HTMLSpanElement, GoToInputProps>(\n (\n {\n className,\n id: idProp,\n label = \"Go to\",\n FormFieldProps: { ...restFormFieldProps } = {},\n ...restProps\n },\n\n forwardedRef\n ) => {\n const { compact, count, onPageChange, paginatorElement } =\n usePaginationContext();\n\n const id = useId(idProp);\n\n const rootRef = useRef<HTMLSpanElement>(null);\n const forkedRef = useForkRef(rootRef, forwardedRef);\n\n const [inputValue, setInputValue] = useState(\"\");\n\n const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n setInputValue(event.target.value);\n },\n [setInputValue]\n );\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (\n !inputValue.startsWith(\"0\") &&\n !isNaN(pageValue) &&\n pageValue > 0 &&\n pageValue <= count\n ) {\n onPageChange(pageValue);\n }\n setInputValue(\"\");\n }\n };\n\n const onBlur = useCallback(() => {\n setInputValue(\"\");\n }, [setInputValue]);\n\n useEffect(() => {\n if (compact) {\n setInputValue(\"\");\n }\n }, [compact]);\n\n const [position, setPosition] = useState<\"left\" \| \"right\">();\n\n useIsomorphicLayoutEffect(() => {\n if (paginatorElement && !compact && rootRef.current) {\n setPosition(\n rootRef.current.compareDocumentPosition(paginatorElement) ===\n Node.DOCUMENT_POSITION_PRECEDING\n ? \"right\"\n : \"left\"\n );\n }\n }, [paginatorElement, compact, rootRef.current]);\n\n if (compact) {\n return null;\n }\n\n const widthCh = `${`${count}`.length}ch`;\n\n return (\n <span\n className={cx(\n withBaseName(\"goToInputWrapper\"),\n { [withBaseName(`${position!}GoToInput`)]: position },\n className\n )}\n ref={forkedRef}\n >\n <FormField\n className={withBaseName(\"goToInputField\")}\n fullWidth={false}\n label={label}\n labelPlacement=\"left\"\n {...restFormFieldProps}\n >\n <Input\n className={cx(withBaseName(\"goToInput\"), {\n [withBaseName(\"goToInputFixed\")]: count < 100,\n })}\n id={id}\n inputProps={{\n \"aria-labelledby\": id,\n \"aria-label\": `Page, ${count} total`,\n style: { width: widthCh },\n }}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n />\n </FormField>\n </span>\n );\n }\n);\n"],"names":["forwardRef","usePaginationContext","useId","useRef","useForkRef","useState","useCallback","useEffect","useIsomorphicLayoutEffect","jsx","cx","withBaseName","FormField","Input"],"mappings":"~~;;;;;;;;;;;;;;;;;;;~~AAsBO,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAQ,GAAA,OAAA;AAAA,IACR,cAAgB,EAAA,EAAA,GAAK,kBAAmB,EAAA,GAAI,EAAC;AAAA,IAC1C,GAAA,SAAA;AAAA,KAGL,YACG,KAAA;AACH,IAAA,MAAM,EAAE,OAAS,EAAA,KAAA,EAAO,YAAc,EAAA,gBAAA,KACpCC,yCAAqB,EAAA,CAAA;AAEvB,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,IAAM,MAAA,OAAA,GAAUC,aAAwB,IAAI,CAAA,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,OAAA,EAAS,YAAY,CAAA,CAAA;AAElD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA,CAAA;AAE/C,IAAA,MAAM,QAAiD,GAAAC,iBAAA;AAAA,MACrD,CAAC,KAAU,KAAA;AACT,QAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,OAClC;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,KAAM,CAAA,SAAS,CAChB,IAAA,SAAA,GAAY,CACZ,IAAA,SAAA,IAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AAAA,SACxB;AACA,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,MAAA,GAASA,kBAAY,MAAM;AAC/B,MAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,KAClB,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAElB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIF,cAA2B,EAAA,CAAA;AAE3D,IAAAG,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,gBAAoB,IAAA,CAAC,OAAW,IAAA,OAAA,CAAQ,OAAS,EAAA;AACnD,QAAA,WAAA;AAAA,UACE,QAAQ,OAAQ,CAAA,uBAAA,CAAwB,gBAAgB,CACtD,KAAA,IAAA,CAAK,8BACH,OACA,GAAA,MAAA;AAAA,SACN,CAAA;AAAA,OACF;AAAA,OACC,CAAC,gBAAA,EAAkB,OAAS,EAAA,OAAA,CAAQ,OAAO,CAAC,CAAA,CAAA;AAE/C,IAAA,IAAI,OAAS,EAAA;AACX,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,OAAA,GAAU,CAAG,EAAA,CAAA,EAAG,KAAQ,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAE9B,IAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAW,EAAAC,~~sBAAA~~;AAAA,QACTC,mBAAa,kBAAkB,CAAA;AAAA,QAC/B,EAAE,CAACA,kBAAA,CAAa,CAAG,EAAA,QAAA,CAAA,SAAA,CAAoB,IAAI,QAAS,EAAA;AAAA,QACpD,SAAA;AAAA,OACF;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MAEL,QAAC,kBAAAF,cAAA,CAAAG,mBAAA,EAAA;AAAA,QACC,SAAA,EAAWD,mBAAa,gBAAgB,CAAA;AAAA,QACxC,SAAW,EAAA,KAAA;AAAA,QACX,KAAA;AAAA,QACA,cAAe,EAAA,MAAA;AAAA,QACd,GAAG,kBAAA;AAAA,QAEJ,QAAC,kBAAAF,cAAA,CAAAI,WAAA,EAAA;AAAA,UACC,SAAW,EAAAH,~~sBAAA~~,~~CAAGC~~,kBAAa,CAAA,WAAW,CAAG,EAAA;AAAA,~~YACvC~~,CAACA,kBAAA,CAAa,gBAAgB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,WAC3C,CAAA;AAAA,UACD,EAAA;AAAA,UACA,UAAY,EAAA;AAAA,YACV,iBAAmB,EAAA,EAAA;AAAA,YACnB,cAAc,CAAS,MAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,YACvB,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,WAC1B;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,SACb,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useForkRef, useId, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\nimport { withBaseName } from \"./utils\";\nimport { FormField, FormFieldProps } from \"../form-field\";\nimport { Input } from \"../input\";\n\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n label?: string;\n FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const GoToInput = forwardRef<HTMLSpanElement, GoToInputProps>(\n (\n {\n className,\n id: idProp,\n label = \"Go to\",\n FormFieldProps: { ...restFormFieldProps } = {},\n ...restProps\n },\n\n forwardedRef\n ) => {\n const { compact, count, onPageChange, paginatorElement } =\n usePaginationContext();\n\n const id = useId(idProp);\n\n const rootRef = useRef<HTMLSpanElement>(null);\n const forkedRef = useForkRef(rootRef, forwardedRef);\n\n const [inputValue, setInputValue] = useState(\"\");\n\n const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n setInputValue(event.target.value);\n },\n [setInputValue]\n );\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (\n !inputValue.startsWith(\"0\") &&\n !isNaN(pageValue) &&\n pageValue > 0 &&\n pageValue <= count\n ) {\n onPageChange(pageValue);\n }\n setInputValue(\"\");\n }\n };\n\n const onBlur = useCallback(() => {\n setInputValue(\"\");\n }, [setInputValue]);\n\n useEffect(() => {\n if (compact) {\n setInputValue(\"\");\n }\n }, [compact]);\n\n const [position, setPosition] = useState<\"left\" \| \"right\">();\n\n useIsomorphicLayoutEffect(() => {\n if (paginatorElement && !compact && rootRef.current) {\n setPosition(\n rootRef.current.compareDocumentPosition(paginatorElement) ===\n Node.DOCUMENT_POSITION_PRECEDING\n ? \"right\"\n : \"left\"\n );\n }\n }, [paginatorElement, compact, rootRef.current]);\n\n if (compact) {\n return null;\n }\n\n const widthCh = `${`${count}`.length}ch`;\n\n return (\n <span\n className={clsx(\n withBaseName(\"goToInputWrapper\"),\n { [withBaseName(`${position!}GoToInput`)]: position },\n className\n )}\n ref={forkedRef}\n >\n <FormField\n className={withBaseName(\"goToInputField\")}\n fullWidth={false}\n label={label}\n labelPlacement=\"left\"\n {...restFormFieldProps}\n >\n <Input\n className={clsx(withBaseName(\"goToInput\"), {\n [withBaseName(\"goToInputFixed\")]: count < 100,\n })}\n id={id}\n inputProps={{\n \"aria-labelledby\": id,\n \"aria-label\": `Page, ${count} total`,\n style: { width: widthCh },\n }}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n />\n </FormField>\n </span>\n );\n }\n);\n"],"names":["forwardRef","usePaginationContext","useId","useRef","useForkRef","useState","useCallback","useEffect","useIsomorphicLayoutEffect","jsx","clsx","withBaseName","FormField","Input"],"mappings":";;;;;;;;;;;;;;;AAsBO,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAQ,GAAA,OAAA;AAAA,IACR,cAAgB,EAAA,EAAA,GAAK,kBAAmB,EAAA,GAAI,EAAC;AAAA,IAC1C,GAAA,SAAA;AAAA,KAGL,YACG,KAAA;AACH,IAAA,MAAM,EAAE,OAAS,EAAA,KAAA,EAAO,YAAc,EAAA,gBAAA,KACpCC,yCAAqB,EAAA,CAAA;AAEvB,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,IAAM,MAAA,OAAA,GAAUC,aAAwB,IAAI,CAAA,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,OAAA,EAAS,YAAY,CAAA,CAAA;AAElD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA,CAAA;AAE/C,IAAA,MAAM,QAAiD,GAAAC,iBAAA;AAAA,MACrD,CAAC,KAAU,KAAA;AACT,QAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,OAClC;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,KAAM,CAAA,SAAS,CAChB,IAAA,SAAA,GAAY,CACZ,IAAA,SAAA,IAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AAAA,SACxB;AACA,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,MAAA,GAASA,kBAAY,MAAM;AAC/B,MAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,KAClB,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAElB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIF,cAA2B,EAAA,CAAA;AAE3D,IAAAG,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,gBAAoB,IAAA,CAAC,OAAW,IAAA,OAAA,CAAQ,OAAS,EAAA;AACnD,QAAA,WAAA;AAAA,UACE,QAAQ,OAAQ,CAAA,uBAAA,CAAwB,gBAAgB,CACtD,KAAA,IAAA,CAAK,8BACH,OACA,GAAA,MAAA;AAAA,SACN,CAAA;AAAA,OACF;AAAA,OACC,CAAC,gBAAA,EAAkB,OAAS,EAAA,OAAA,CAAQ,OAAO,CAAC,CAAA,CAAA;AAE/C,IAAA,IAAI,OAAS,EAAA;AACX,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,OAAA,GAAU,CAAG,EAAA,CAAA,EAAG,KAAQ,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAE9B,IAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACTC,mBAAa,kBAAkB,CAAA;AAAA,QAC/B,EAAE,CAACA,kBAAA,CAAa,CAAG,EAAA,QAAA,CAAA,SAAA,CAAoB,IAAI,QAAS,EAAA;AAAA,QACpD,SAAA;AAAA,OACF;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MAEL,QAAC,kBAAAF,cAAA,CAAAG,mBAAA,EAAA;AAAA,QACC,SAAA,EAAWD,mBAAa,gBAAgB,CAAA;AAAA,QACxC,SAAW,EAAA,KAAA;AAAA,QACX,KAAA;AAAA,QACA,cAAe,EAAA,MAAA;AAAA,QACd,GAAG,kBAAA;AAAA,QAEJ,QAAC,kBAAAF,cAAA,CAAAI,WAAA,EAAA;AAAA,UACC,SAAW,EAAAH,SAAA,CAAKC,kBAAa,CAAA,WAAW,CAAG,EAAA;AAAA,YACzC,CAACA,kBAAA,CAAa,gBAAgB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,WAC3C,CAAA;AAAA,UACD,EAAA;AAAA,UACA,UAAY,EAAA;AAAA,YACV,iBAAmB,EAAA,EAAA;AAAA,YACnB,cAAc,CAAS,MAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,YACvB,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,WAC1B;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,SACb,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/pagination/PageButton.js CHANGED Viewed

@@ -5,11 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('./utils.js');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var clsx = require('clsx');
 const PageButton = ({
   page,
@@ -31,7 +27,7 @@ const PageButton = ({
     name,
     "aria-current": isSelected ? "page" : void 0,
     variant: "secondary",
-    className: cx__default["default"](utils.withBaseName("pageButton"), {
+    className: clsx.clsx(utils.withBaseName("pageButton"), {
       [utils.withBaseName("pageButtonSelected")]: isSelected,
       [utils.withBaseName("pageButtonFixed")]: page < 100
     }),

package/dist-cjs/packages/lab/src/pagination/PageButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler } from \"react\";\nimport { withBaseName } from \"./utils\";\nimport { Button } from \"@salt-ds/core\";\nimport cn from \"~~classnames~~\";\n\nexport interface PageButtonProps {\n page: number;\n isSelected?: boolean;\n onPageChange: (page: number) => void;\n disabled?: boolean;\n}\n\nexport const PageButton = ({\n page,\n isSelected,\n onPageChange,\n disabled,\n}: PageButtonProps) => {\n const name = `Page ${page}`;\n\n const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n if (event.key === \"Enter\") {\n onPageChange(page);\n }\n };\n\n const onClick: MouseEventHandler<HTMLButtonElement> = () => {\n onPageChange(page);\n };\n\n return (\n <Button\n aria-label={name}\n name={name}\n aria-current={isSelected ? \"page\" : undefined}\n variant=\"secondary\"\n className={cn(withBaseName(\"pageButton\"), {\n [withBaseName(\"pageButtonSelected\")]: isSelected,\n [withBaseName(\"pageButtonFixed\")]: page < 100,\n })}\n onClick={onClick}\n onKeyDown={onKeyDown}\n role=\"link\"\n disabled={disabled}\n >\n {page}\n </Button>\n );\n};\n"],"names":["jsx","Button","cn","withBaseName"],"mappings":"~~;;;;;;;;;;;;;~~AAYO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,OAAO,CAAQ,KAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAErB,EAAM,MAAA,SAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAgD,MAAM;AAC1D,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,YAAY,EAAA,IAAA;AAAA,IACZ,IAAA;AAAA,IACA,cAAA,EAAc,aAAa,MAAS,GAAA,KAAA,CAAA;AAAA,IACpC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAAC,~~sBAAA~~,~~CAAGC~~,kBAAa,CAAA,YAAY,CAAG,EAAA;AAAA,~~MACxC~~,CAACA,kBAAa,CAAA,oBAAoB,CAAI,GAAA,UAAA;AAAA,MACtC,CAACA,kBAAA,CAAa,iBAAiB,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,KAC3C,CAAA;AAAA,IACD,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAK,EAAA,MAAA;AAAA,IACL,QAAA;AAAA,IAEC,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler } from \"react\";\nimport { withBaseName } from \"./utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\n\nexport interface PageButtonProps {\n page: number;\n isSelected?: boolean;\n onPageChange: (page: number) => void;\n disabled?: boolean;\n}\n\nexport const PageButton = ({\n page,\n isSelected,\n onPageChange,\n disabled,\n}: PageButtonProps) => {\n const name = `Page ${page}`;\n\n const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n if (event.key === \"Enter\") {\n onPageChange(page);\n }\n };\n\n const onClick: MouseEventHandler<HTMLButtonElement> = () => {\n onPageChange(page);\n };\n\n return (\n <Button\n aria-label={name}\n name={name}\n aria-current={isSelected ? \"page\" : undefined}\n variant=\"secondary\"\n className={clsx(withBaseName(\"pageButton\"), {\n [withBaseName(\"pageButtonSelected\")]: isSelected,\n [withBaseName(\"pageButtonFixed\")]: page < 100,\n })}\n onClick={onClick}\n onKeyDown={onKeyDown}\n role=\"link\"\n disabled={disabled}\n >\n {page}\n </Button>\n );\n};\n"],"names":["jsx","Button","clsx","withBaseName"],"mappings":";;;;;;;;;AAYO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,OAAO,CAAQ,KAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAErB,EAAM,MAAA,SAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAgD,MAAM;AAC1D,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,YAAY,EAAA,IAAA;AAAA,IACZ,IAAA;AAAA,IACA,cAAA,EAAc,aAAa,MAAS,GAAA,KAAA,CAAA;AAAA,IACpC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAAC,SAAA,CAAKC,kBAAa,CAAA,YAAY,CAAG,EAAA;AAAA,MAC1C,CAACA,kBAAa,CAAA,oBAAoB,CAAI,GAAA,UAAA;AAAA,MACtC,CAACA,kBAAA,CAAa,iBAAiB,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,KAC3C,CAAA;AAAA,IACD,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAK,EAAA,MAAA;AAAA,IACL,QAAA;AAAA,IAEC,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/pagination/Pagination.js CHANGED Viewed

@@ -4,15 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var PaginationContext = require('./PaginationContext.js');
 var utils = require('./utils.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const { Provider } = PaginationContext.paginationContext;
 const Pagination = React.forwardRef(
   ({
@@ -85,7 +81,7 @@ const Pagination = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Provider, {
       value: contextValue,
       children: /* @__PURE__ */ jsxRuntime.jsx("nav", {
-        className: cx__default["default"](utils.withBaseName(), className),
+        className: clsx.clsx(utils.withBaseName(), className),
         onKeyDown,
         ref,
         ...restProps,

package/dist-cjs/packages/lab/src/pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport cn from \"~~classnames~~\";\nimport {\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\nimport { withBaseName } from \"./utils\";\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n count: number;\n page?: number;\n initialPage?: number;\n onPageChange?: (page: number) => void;\n compact?: boolean;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n (\n {\n className,\n count,\n children,\n initialPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n compact = false,\n ...restProps\n },\n ref\n ) => {\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: initialPage,\n name: \"Paginator\",\n state: \"page\",\n });\n\n const [paginatorElement, setPaginatorElement] = useState<HTMLDivElement>();\n\n const onPageChange = useCallback(\n (page: number) => {\n setPageState(page);\n onPageChangeProp && onPageChangeProp(page);\n },\n [onPageChangeProp, setPageState]\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n compact,\n onPageChange,\n paginatorElement,\n setPaginatorElement,\n }),\n [pageState, count, onPageChange]\n );\n\n const onKeyDown: KeyboardEventHandler = useCallback(\n ({ altKey, key }) => {\n if (altKey) {\n switch (key) {\n case \"PageDown\":\n onPageChange(Math.min(pageState + 1, count));\n break;\n case \"PageUp\":\n onPageChange(Math.max(pageState - 1, 1));\n break;\n default:\n }\n }\n },\n [onPageChange]\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n useEffect(() => {\n if (count < pageState) {\n onPageChange(1);\n }\n }, [count, pageState, onPageChange]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={cn(withBaseName(), className)}\n onKeyDown={onKeyDown}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n }\n);\n"],"names":["paginationContext","forwardRef","useControlled","useState","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","cn","withBaseName"],"mappings":"~~;;;;;;;;;;;;;;;~~AAeA,MAAM,EAAE,UAAa,GAAAA,mCAAA,CAAA;AAUd,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,CACE;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,OAAU,GAAA,KAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,kBAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIC,cAAyB,EAAA,CAAA;AAEzE,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,IAAiB,KAAA;AAChB,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,QAAA,gBAAA,IAAoB,iBAAiB,IAAI,CAAA,CAAA;AAAA,OAC3C;AAAA,MACA,CAAC,kBAAkB,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAA,MAAM,YAAkC,GAAAC,aAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA,OAAA;AAAA,QACA,YAAA;AAAA,QACA,gBAAA;AAAA,QACA,mBAAA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAA,MAAM,SAAkC,GAAAD,iBAAA;AAAA,MACtC,CAAC,EAAE,MAAQ,EAAA,GAAA,EAAU,KAAA;AACnB,QAAA,IAAI,MAAQ,EAAA;AACV,UAAQ,QAAA,GAAA;AAAA,YACD,KAAA,UAAA;AACH,cAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,SAAY,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAC3C,cAAA,MAAA;AAAA,YACG,KAAA,QAAA;AACH,cAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,SAAY,GAAA,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA;AACvC,cAAA,MAAA;AAAA,WAAA;AAAA,SAGN;AAAA,OACF;AAAA,MACA,CAAC,YAAY,CAAA;AAAA,KACf,CAAA;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIE,qBAAiB,EAAA,CAAA;AACtC,IAAM,MAAA,OAAA,GAAUC,aAAgB,KAAK,CAAA,CAAA;AAErC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,QAAA,CAAS,QAAQ,SAAW,CAAA,CAAA,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA,CAAA;AAAA,OACpB;AAAA,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA,CAAA;AAExB,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,SAAW,EAAA;AACrB,QAAA,YAAA,CAAa,CAAC,CAAA,CAAA;AAAA,OAChB;AAAA,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,YAAY,CAAC,CAAA,CAAA;AAEnC,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MAAS,KAAO,EAAA,YAAA;AAAA,MACf,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAAC,~~sBAAA~~,~~CAAGC~~,kBAAa,EAAA,EAAG,SAAS,CAAA;AAAA,~~QACvC~~,SAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\nimport { withBaseName } from \"./utils\";\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n count: number;\n page?: number;\n initialPage?: number;\n onPageChange?: (page: number) => void;\n compact?: boolean;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n (\n {\n className,\n count,\n children,\n initialPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n compact = false,\n ...restProps\n },\n ref\n ) => {\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: initialPage,\n name: \"Paginator\",\n state: \"page\",\n });\n\n const [paginatorElement, setPaginatorElement] = useState<HTMLDivElement>();\n\n const onPageChange = useCallback(\n (page: number) => {\n setPageState(page);\n onPageChangeProp && onPageChangeProp(page);\n },\n [onPageChangeProp, setPageState]\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n compact,\n onPageChange,\n paginatorElement,\n setPaginatorElement,\n }),\n [pageState, count, onPageChange]\n );\n\n const onKeyDown: KeyboardEventHandler = useCallback(\n ({ altKey, key }) => {\n if (altKey) {\n switch (key) {\n case \"PageDown\":\n onPageChange(Math.min(pageState + 1, count));\n break;\n case \"PageUp\":\n onPageChange(Math.max(pageState - 1, 1));\n break;\n default:\n }\n }\n },\n [onPageChange]\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n useEffect(() => {\n if (count < pageState) {\n onPageChange(1);\n }\n }, [count, pageState, onPageChange]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n onKeyDown={onKeyDown}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n }\n);\n"],"names":["paginationContext","forwardRef","useControlled","useState","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx","withBaseName"],"mappings":"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"}

package/dist-cjs/packages/lab/src/pagination/Paginator.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var ArrowButton = require('./ArrowButton.js');
 var CompactControls = require('./CompactControls.js');
@@ -14,10 +14,6 @@ var usePaginationContext = require('./usePaginationContext.js');
 var utils = require('./utils.js');
 require('./Pagination.css.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const Paginator = React.forwardRef(
   ({
     className,
@@ -38,7 +34,7 @@ const Paginator = React.forwardRef(
     const isOnFirstPage = page === 1;
     const isOnLastPage = page === count;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: cx__default["default"](utils.withBaseName(), className),
+      className: clsx.clsx(utils.withBaseName(), className),
       ...restProps,
       ref,
       children: [

package/dist-cjs/packages/lab/src/pagination/Paginator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport cn from \"~~classnames~~\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { ArrowButton } from \"./ArrowButton\";\nimport { CompactControls } from \"./CompactControls\";\nimport { RegularControls } from \"./RegularControls\";\nimport { usePaginationContext } from \"./usePaginationContext\";\nimport { withBaseName } from \"./utils\";\nimport { FormFieldProps } from \"../form-field\";\n\nimport \"./Pagination.css\";\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n boundaryCount?: number;\n siblingCount?: number;\n showPreviousNext?: boolean;\n FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n (\n {\n className,\n boundaryCount,\n siblingCount,\n showPreviousNext = true,\n FormFieldProps,\n ...restProps\n },\n forwardedRef\n ) => {\n const { count, page, onPageChange, compact, setPaginatorElement } =\n usePaginationContext();\n\n const ref = useForkRef(setPaginatorElement, forwardedRef);\n\n const onPreviousPage = useCallback(() => {\n onPageChange(Math.max(1, page - 1));\n }, [page, onPageChange]);\n\n const onNextPage = useCallback(() => {\n onPageChange(Math.min(page + 1, count));\n }, [page, onPageChange, count]);\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={cn(withBaseName(), className)} {...restProps} ref={ref}>\n {showPreviousNext && (\n <ArrowButton\n arrowButtonType=\"previous\"\n onPress={onPreviousPage}\n disabled={isOnFirstPage}\n >\n <ChevronLeftIcon />\n </ArrowButton>\n )}\n {compact ? (\n <CompactControls\n count={count}\n page={page}\n onPageChange={onPageChange}\n FormFieldProps={FormFieldProps}\n />\n ) : (\n <RegularControls\n count={count}\n page={page}\n onPageChange={onPageChange}\n siblingCount={siblingCount}\n boundaryCount={boundaryCount}\n />\n )}\n {showPreviousNext && (\n <ArrowButton\n arrowButtonType=\"next\"\n onPress={onNextPage}\n disabled={isOnLastPage}\n >\n <ChevronRightIcon />\n </ArrowButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","FormFieldProps","usePaginationContext","useForkRef","useCallback","jsxs","cn","withBaseName","jsx","ArrowButton","ChevronLeftIcon","CompactControls","RegularControls","ChevronRightIcon"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;~~AAoBO,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAmB,GAAA,IAAA;AAAA,IACnB,cAAAC,EAAAA,eAAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,cAAc,OAAS,EAAA,mBAAA,KAC1CC,yCAAqB,EAAA,CAAA;AAEvB,IAAM,MAAA,GAAA,GAAMC,eAAW,CAAA,mBAAA,EAAqB,YAAY,CAAA,CAAA;AAExD,IAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,MAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KACjC,EAAA,CAAC,IAAM,EAAA,YAAY,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAaA,kBAAY,MAAM;AACnC,MAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KACrC,EAAA,CAAC,IAAM,EAAA,YAAA,EAAc,KAAK,CAAC,CAAA,CAAA;AAE9B,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,~~sBAAA~~,~~CAAGC~~,kBAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,~~MAC3D~~,QAAA,EAAA;AAAA,QAAA,gBAAA,oBACEC,cAAA,CAAAC,uBAAA,EAAA;AAAA,UACC,eAAgB,EAAA,UAAA;AAAA,UAChB,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UAEV,yCAACC,qBAAgB,EAAA,EAAA,CAAA;AAAA,SACnB,CAAA;AAAA,QAED,0BACEF,cAAA,CAAAG,+BAAA,EAAA;AAAA,UACC,KAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAA;AAAA,UACA,cAAgBV,EAAAA,eAAAA;AAAA,SAClB,oBAECO,cAAA,CAAAI,+BAAA,EAAA;AAAA,UACC,KAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAA;AAAA,UACA,YAAA;AAAA,UACA,aAAA;AAAA,SACF,CAAA;AAAA,QAED,oCACEJ,cAAA,CAAAC,uBAAA,EAAA;AAAA,UACC,eAAgB,EAAA,MAAA;AAAA,UAChB,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UAEV,yCAACI,sBAAiB,EAAA,EAAA,CAAA;AAAA,SACpB,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { ArrowButton } from \"./ArrowButton\";\nimport { CompactControls } from \"./CompactControls\";\nimport { RegularControls } from \"./RegularControls\";\nimport { usePaginationContext } from \"./usePaginationContext\";\nimport { withBaseName } from \"./utils\";\nimport { FormFieldProps } from \"../form-field\";\n\nimport \"./Pagination.css\";\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n boundaryCount?: number;\n siblingCount?: number;\n showPreviousNext?: boolean;\n FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n (\n {\n className,\n boundaryCount,\n siblingCount,\n showPreviousNext = true,\n FormFieldProps,\n ...restProps\n },\n forwardedRef\n ) => {\n const { count, page, onPageChange, compact, setPaginatorElement } =\n usePaginationContext();\n\n const ref = useForkRef(setPaginatorElement, forwardedRef);\n\n const onPreviousPage = useCallback(() => {\n onPageChange(Math.max(1, page - 1));\n }, [page, onPageChange]);\n\n const onNextPage = useCallback(() => {\n onPageChange(Math.min(page + 1, count));\n }, [page, onPageChange, count]);\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {showPreviousNext && (\n <ArrowButton\n arrowButtonType=\"previous\"\n onPress={onPreviousPage}\n disabled={isOnFirstPage}\n >\n <ChevronLeftIcon />\n </ArrowButton>\n )}\n {compact ? (\n <CompactControls\n count={count}\n page={page}\n onPageChange={onPageChange}\n FormFieldProps={FormFieldProps}\n />\n ) : (\n <RegularControls\n count={count}\n page={page}\n onPageChange={onPageChange}\n siblingCount={siblingCount}\n boundaryCount={boundaryCount}\n />\n )}\n {showPreviousNext && (\n <ArrowButton\n arrowButtonType=\"next\"\n onPress={onNextPage}\n disabled={isOnLastPage}\n >\n <ChevronRightIcon />\n </ArrowButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","FormFieldProps","usePaginationContext","useForkRef","useCallback","jsxs","clsx","withBaseName","jsx","ArrowButton","ChevronLeftIcon","CompactControls","RegularControls","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;AAoBO,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAmB,GAAA,IAAA;AAAA,IACnB,cAAAC,EAAAA,eAAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,cAAc,OAAS,EAAA,mBAAA,KAC1CC,yCAAqB,EAAA,CAAA;AAEvB,IAAM,MAAA,GAAA,GAAMC,eAAW,CAAA,mBAAA,EAAqB,YAAY,CAAA,CAAA;AAExD,IAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,MAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KACjC,EAAA,CAAC,IAAM,EAAA,YAAY,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAaA,kBAAY,MAAM;AACnC,MAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KACrC,EAAA,CAAC,IAAM,EAAA,YAAA,EAAc,KAAK,CAAC,CAAA,CAAA;AAE9B,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAKC,kBAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC7D,QAAA,EAAA;AAAA,QAAA,gBAAA,oBACEC,cAAA,CAAAC,uBAAA,EAAA;AAAA,UACC,eAAgB,EAAA,UAAA;AAAA,UAChB,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UAEV,yCAACC,qBAAgB,EAAA,EAAA,CAAA;AAAA,SACnB,CAAA;AAAA,QAED,0BACEF,cAAA,CAAAG,+BAAA,EAAA;AAAA,UACC,KAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAA;AAAA,UACA,cAAgBV,EAAAA,eAAAA;AAAA,SAClB,oBAECO,cAAA,CAAAI,+BAAA,EAAA;AAAA,UACC,KAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAA;AAAA,UACA,YAAA;AAAA,UACA,aAAA;AAAA,SACF,CAAA;AAAA,QAED,oCACEJ,cAAA,CAAAC,uBAAA,EAAA;AAAA,UACC,eAAgB,EAAA,MAAA;AAAA,UAChB,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UAEV,yCAACI,sBAAiB,EAAA,EAAA,CAAA;AAAA,SACpB,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js CHANGED Viewed

@@ -4,14 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var cx = require('classnames');
+var clsx = require('clsx');
 var core = require('@salt-ds/core');
 require('./ParentChildItem.css.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const withBaseName = core.makePrefixer("saltParentChildItem");
 const ParentChildItem = React.forwardRef(
   function ParentChildItem2({
@@ -23,7 +19,7 @@ const ParentChildItem = React.forwardRef(
     ...rest
   }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
-      className: cx__default["default"](className, withBaseName(), {
+      className: clsx.clsx(className, withBaseName(), {
         ...direction && {
           [withBaseName(`slide-${direction}`)]: !disableAnimations
         },

package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"~~classnames~~\";\nimport {\n FlexItem,\n flexItemAlignment,\n makePrefixer,\n ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n /\n align?: flexItemAlignment;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Direction for slide animations.\n /\n direction?: SlideDirection;\n /\n Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n /\n grow?: ResponsiveProp<number>;\n /\n Determines whether the component is stacked\n /\n isStacked?: boolean;\n /\n Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n function ParentChildItem(\n {\n disableAnimations = false,\n direction,\n isStacked,\n children,\n className,\n ...rest\n },\n ref\n ) {\n return (\n <FlexItem\n className={cx(className, withBaseName(), {\n ...(direction && {\n [withBaseName(`slide-${direction}`)]: !disableAnimations,\n }),\n \"saltFlexItem-stacked\": isStacked,\n })}\n ref={ref}\n {...rest}\n >\n {children}\n </FlexItem>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","ParentChildItem","jsx","FlexItem","cx"],"mappings":"~~;;;;;;;;;;;;;;~~AAwCA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAW,EAAAC,~~sBAAA~~,~~CAAG~~,SAAW,EAAA,YAAA,EAAgB,EAAA;AAAA,~~QACvC~~,GAAI,SAAa,IAAA;AAAA,UACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,SACzC;AAAA,QACA,sBAAwB,EAAA,SAAA;AAAA,OACzB,CAAA;AAAA,MACD,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FlexItem,\n flexItemAlignment,\n makePrefixer,\n ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n /\n align?: flexItemAlignment;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Direction for slide animations.\n /\n direction?: SlideDirection;\n /\n Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n /\n grow?: ResponsiveProp<number>;\n /\n Determines whether the component is stacked\n /\n isStacked?: boolean;\n /\n Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n function ParentChildItem(\n {\n disableAnimations = false,\n direction,\n isStacked,\n children,\n className,\n ...rest\n },\n ref\n ) {\n return (\n <FlexItem\n className={clsx(className, withBaseName(), {\n ...(direction && {\n [withBaseName(`slide-${direction}`)]: !disableAnimations,\n }),\n \"saltFlexItem-stacked\": isStacked,\n })}\n ref={ref}\n {...rest}\n >\n {children}\n </FlexItem>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","ParentChildItem","jsx","FlexItem","clsx"],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,EAAgB,EAAA;AAAA,QACzC,GAAI,SAAa,IAAA;AAAA,UACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,SACzC;AAAA,QACA,sBAAwB,EAAA,SAAA;AAAA,OACzB,CAAA;AAAA,MACD,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js CHANGED Viewed

@@ -4,16 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var ParentChildItem = require('../parent-child-item/ParentChildItem.js');
 var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
 require('./ParentChildLayout.css.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const withBaseName = core.makePrefixer("saltParentChildLayout");
 const getDirection = (orientation, stackedViewElement) => {
   let direction = "right";
@@ -59,7 +55,7 @@ const ParentChildLayout = React.forwardRef(function ParentChildLayout2({
     })
   };
   return /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, {
-    className: cx__default["default"](className, withBaseName()),
+    className: clsx.clsx(className, withBaseName()),
     ref,
     ...rest,
     children: stackedView ? stackedViewChildren[stackedViewElement] : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {

package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n Breakpoints,\n makePrefixer,\n FlexLayout,\n FlexLayoutProps,\n} from \"@salt-ds/core\";\n\nimport cx from \"~~classnames~~\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" \| \"child\";\n\ntype Orientation = \"horizontal\" \| \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Breakpoint at which the parent and child will stack.\n /\n stackedAtBreakpoint?: keyof Breakpoints;\n /\n Change element that is displayed when in staked view.\n /\n stackedViewElement?: StackedViewElement;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Orientation for slide animations.\n /\n orientation?: Orientation;\n /\n Controls the space between columns.\n /\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /\n Parent component to be rendered\n /\n parent: ReactNode;\n /\n Child component to be rendered\n */\n child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n orientation: Orientation,\n stackedViewElement: StackedViewElement\n) => {\n let direction: SlideDirection = \"right\";\n\n if (orientation === \"horizontal\") {\n if (stackedViewElement === \"parent\") {\n direction = \"left\";\n } else {\n direction = \"right\";\n }\n } else {\n if (stackedViewElement === \"parent\") {\n direction = \"bottom\";\n } else {\n direction = \"top\";\n }\n }\n\n return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n stackedAtBreakpoint = \"sm\",\n stackedViewElement = \"parent\",\n disableAnimations = false,\n parent,\n child,\n className,\n orientation = \"horizontal\",\n ...rest\n },\n ref\n) {\n const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n const stackedViewChildren = {\n parent: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {parent}\n </ParentChildItem>\n ),\n child: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {child}\n </ParentChildItem>\n ),\n };\n\n return (\n <FlexLayout className={cx(className, withBaseName())} ref={ref} {...rest}>\n {stackedView ? (\n stackedViewChildren[stackedViewElement]\n ) : (\n <>\n <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n {parent}\n </ParentChildItem>\n <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n {child}\n </ParentChildItem>\n </>\n )}\n </FlexLayout>\n );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","cx","jsxs","Fragment"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAiDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,~~sBAAA~~,~~CAAG~~,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,~~IACjE~~,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n Breakpoints,\n makePrefixer,\n FlexLayout,\n FlexLayoutProps,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" \| \"child\";\n\ntype Orientation = \"horizontal\" \| \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Breakpoint at which the parent and child will stack.\n /\n stackedAtBreakpoint?: keyof Breakpoints;\n /\n Change element that is displayed when in staked view.\n /\n stackedViewElement?: StackedViewElement;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Orientation for slide animations.\n /\n orientation?: Orientation;\n /\n Controls the space between columns.\n /\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /\n Parent component to be rendered\n /\n parent: ReactNode;\n /\n Child component to be rendered\n */\n child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n orientation: Orientation,\n stackedViewElement: StackedViewElement\n) => {\n let direction: SlideDirection = \"right\";\n\n if (orientation === \"horizontal\") {\n if (stackedViewElement === \"parent\") {\n direction = \"left\";\n } else {\n direction = \"right\";\n }\n } else {\n if (stackedViewElement === \"parent\") {\n direction = \"bottom\";\n } else {\n direction = \"top\";\n }\n }\n\n return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n stackedAtBreakpoint = \"sm\",\n stackedViewElement = \"parent\",\n disableAnimations = false,\n parent,\n child,\n className,\n orientation = \"horizontal\",\n ...rest\n },\n ref\n) {\n const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n const stackedViewChildren = {\n parent: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {parent}\n </ParentChildItem>\n ),\n child: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {child}\n </ParentChildItem>\n ),\n };\n\n return (\n <FlexLayout className={clsx(className, withBaseName())} ref={ref} {...rest}>\n {stackedView ? (\n stackedViewChildren[stackedViewElement]\n ) : (\n <>\n <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n {parent}\n </ParentChildItem>\n <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n {child}\n </ParentChildItem>\n </>\n )}\n </FlexLayout>\n );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/pill/ClosablePill.js CHANGED Viewed

@@ -3,17 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var constants = require('./constants.js');
 var DeleteButton = require('./internal/DeleteButton.js');
 var PillBase = require('./PillBase.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const deleteKeys = ["Enter", "Delete", "Backspace"];
 const noop = () => void 0;
 const withBaseName = core.makePrefixer(constants.pillBaseName);
@@ -40,7 +36,7 @@ const ClosablePill = React.forwardRef(function ClosablePill2({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(PillBase.PillBase, {
     "aria-roledescription": "Closable Pill",
-    className: cx__default["default"](
+    className: clsx.clsx(
       {
         [withBaseName("active")]: active
       },

package/dist-cjs/packages/lab/src/pill/ClosablePill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClosablePill.js","sources":["../src/pill/ClosablePill.tsx"],"sourcesContent":["import cn from \"~~classnames~~\";\nimport {\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useCallback,\n useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\n\nconst deleteKeys = [\"Enter\", \"Delete\", \"Backspace\"];\nconst noop = () => undefined;\n\nexport interface ClosablePillProps extends Omit<PillBaseProps, \"clickable\"> {\n /*\n Clickable Pill is not supported by Closable variant.\n */\n clickable?: false;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const ClosablePill = forwardRef(function ClosablePill(\n {\n onDelete,\n label,\n disabled,\n onClick = noop,\n className,\n deleteIcon,\n ...rest\n }: PillBaseProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const [active, setActive] = useState(false);\n\n const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n if (deleteKeys.includes(event.key)) {\n setActive(true);\n }\n }, []);\n\n const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n setActive(false);\n if (!disabled && deleteKeys.includes(event.key)) {\n onDelete?.(event);\n }\n };\n\n return (\n <PillBase\n aria-roledescription=\"Closable Pill\"\n className={cn(\n {\n [withBaseName(\"active\")]: active,\n },\n className\n )}\n deletable\n deleteIcon={\n deleteIcon \|\| <DeleteButton active={active} disabled={disabled} />\n }\n disabled={disabled}\n label={label}\n onDelete={onDelete}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n {...rest}\n ref={ref}\n />\n );\n});\n"],"names":["makePrefixer","pillBaseName","forwardRef","ClosablePill","useState","useCallback","jsx","PillBase","cn","DeleteButton"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAaA,MAAM,UAAa,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,WAAW,CAAA,CAAA;AAClD,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AASnB,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAeC,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,IAAA;AAAA,EACV,SAAA;AAAA,EACA,UAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAE1C,EAAM,MAAA,aAAA,GAAgBC,iBAAY,CAAA,CAAC,KAAyC,KAAA;AAC1E,IAAA,IAAI,UAAW,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAA,IAAI,CAAC,QAAY,IAAA,UAAA,CAAW,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAC/C,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IACC,sBAAqB,EAAA,eAAA;AAAA,IACrB,SAAW,EAAAC,~~sBAAA~~;AAAA,MACT;AAAA,QACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,SAAS,EAAA,IAAA;AAAA,IACT,UAAA,EACE,8BAAeF,cAAA,CAAAG,yBAAA,EAAA;AAAA,MAAa,MAAA;AAAA,MAAgB,QAAA;AAAA,KAAoB,CAAA;AAAA,IAElE,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"ClosablePill.js","sources":["../src/pill/ClosablePill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useCallback,\n useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\n\nconst deleteKeys = [\"Enter\", \"Delete\", \"Backspace\"];\nconst noop = () => undefined;\n\nexport interface ClosablePillProps extends Omit<PillBaseProps, \"clickable\"> {\n /*\n Clickable Pill is not supported by Closable variant.\n */\n clickable?: false;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const ClosablePill = forwardRef(function ClosablePill(\n {\n onDelete,\n label,\n disabled,\n onClick = noop,\n className,\n deleteIcon,\n ...rest\n }: PillBaseProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const [active, setActive] = useState(false);\n\n const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n if (deleteKeys.includes(event.key)) {\n setActive(true);\n }\n }, []);\n\n const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n setActive(false);\n if (!disabled && deleteKeys.includes(event.key)) {\n onDelete?.(event);\n }\n };\n\n return (\n <PillBase\n aria-roledescription=\"Closable Pill\"\n className={clsx(\n {\n [withBaseName(\"active\")]: active,\n },\n className\n )}\n deletable\n deleteIcon={\n deleteIcon \|\| <DeleteButton active={active} disabled={disabled} />\n }\n disabled={disabled}\n label={label}\n onDelete={onDelete}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n {...rest}\n ref={ref}\n />\n );\n});\n"],"names":["makePrefixer","pillBaseName","forwardRef","ClosablePill","useState","useCallback","jsx","PillBase","clsx","DeleteButton"],"mappings":";;;;;;;;;;;;AAaA,MAAM,UAAa,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,WAAW,CAAA,CAAA;AAClD,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AASnB,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAeC,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,IAAA;AAAA,EACV,SAAA;AAAA,EACA,UAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAE1C,EAAM,MAAA,aAAA,GAAgBC,iBAAY,CAAA,CAAC,KAAyC,KAAA;AAC1E,IAAA,IAAI,UAAW,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAA,IAAI,CAAC,QAAY,IAAA,UAAA,CAAW,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAC/C,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IACC,sBAAqB,EAAA,eAAA;AAAA,IACrB,SAAW,EAAAC,SAAA;AAAA,MACT;AAAA,QACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,SAAS,EAAA,IAAA;AAAA,IACT,UAAA,EACE,8BAAeF,cAAA,CAAAG,yBAAA,EAAA;AAAA,MAAa,MAAA;AAAA,MAAgB,QAAA;AAAA,KAAoB,CAAA;AAAA,IAElE,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/pill/PillBase.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 require('../tooltip/Tooltip.js');
@@ -14,10 +14,6 @@ var DeleteButton = require('./internal/DeleteButton.js');
 require('./Pill.css.js');
 var DivButton = require('./internal/DivButton.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const useEllipsisIsActive = () => {
   const labelRef = React.useRef(null);
   const [showEllipsis, setShowEllipsis] = React.useState(false);
@@ -55,7 +51,7 @@ const PillBase = React.forwardRef(function PillBase2({
   const clickKeys = ["Enter", " "];
   const pillIcon = icon && React.isValidElement(icon) ? React.cloneElement(icon, {
     ...icon.props,
-    className: cx__default["default"](withBaseName("icon"), icon.props.className)
+    className: clsx.clsx(withBaseName("icon"), icon.props.className)
   }) : icon;
   const handleKeyDown = (event) => {
     onKeyDown(event);
@@ -74,7 +70,7 @@ const PillBase = React.forwardRef(function PillBase2({
   const renderDeleteIcon = () => {
     if (deleteIconProp && React.isValidElement(deleteIconProp)) {
       return React.cloneElement(deleteIconProp, {
-        className: cx__default["default"](
+        className: clsx.clsx(
           withBaseName(`deleteButton`),
           deleteIconProp.props.className
         ),
@@ -97,7 +93,7 @@ const PillBase = React.forwardRef(function PillBase2({
   const { ref: triggerRef, ...triggerProps } = getTriggerProps({
     "aria-disabled": disabled || void 0,
     "aria-roledescription": ariaRoledescription,
-    className: cx__default["default"](
+    className: clsx.clsx(
       withBaseName(),
       {
         [withBaseName("clickable")]: clickable,

package/dist-cjs/packages/lab/src/pill/PillBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport {\n cloneElement,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n ReactEventHandler,\n SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { TooltipProps, useTooltip, useTooltipContext } from \"../tooltip\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\n\nimport \"./Pill.css\";\nimport { DivButton } from \"./internal/DivButton\";\n\nconst useEllipsisIsActive = (): [\n MutableRefObject<HTMLDivElement \| null>,\n boolean\n] => {\n const labelRef = useRef<HTMLDivElement \| null>(null);\n const [showEllipsis, setShowEllipsis] = useState(false);\n\n useIsomorphicLayoutEffect(() => {\n if (labelRef.current) {\n setShowEllipsis(\n labelRef.current.offsetWidth < labelRef.current.scrollWidth\n );\n }\n }, []);\n return [labelRef, showEllipsis];\n};\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport interface PillBaseProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Props passed to the tooltip\n /\n TooltipProps?: Partial<TooltipProps>;\n /\n Defines a human-readable, author-localized description for the role of an element.\n \n This should be in favour of aria-label for `Pill`\n /\n \"aria-roledescription\"?: string;\n /\n * Clickable variation. Use 'onClick' for callback.\n /\n clickable?: boolean;\n /\n Shows delete icon. Use `onDelete` for callback.\n /\n deletable?: boolean;\n /\n Override the default delete icon element. Shown only if `deletable` is set.\n /\n // TODO: Should this be DeleteIcon (caps)?\n deleteIcon?: ReactElement;\n /\n If `true`, the pill will be disabled.\n /\n disabled?: boolean;\n /\n Whether the pill is been highlighted.\n * If `true`, the pill will display Tooltip when text within is truncated.\n /\n highlighted?: boolean;\n /\n Icon element.\n /\n // TODO: Should this be Icon (caps)?\n icon?: ReactElement;\n /\n The content of the label.\n /\n label?: string;\n /\n Callback function fired when pill is clicked.\n /\n onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /\n Callback function fired when the delete icon is clicked. Used when `deletable` is true.\n */\n onDelete?: ReactEventHandler<HTMLElement>;\n}\n\nexport const PillBase = forwardRef(function PillBase(\n {\n TooltipProps = {},\n \"aria-roledescription\": ariaRoledescription = \"Pill\",\n label,\n className,\n // New API\n clickable,\n disabled,\n // TODO: Should this be a prop as we have variant: 'closable'\n // New API.\n deletable,\n deleteIcon: deleteIconProp,\n // TODO: Not implemented. Consider to add `useImperativeHandle` like API to Tooltip?\n highlighted,\n icon,\n onClick = noop,\n onDelete,\n onKeyDown = noop,\n onKeyUp = noop,\n ...rest\n }: PillBaseProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n\n const [active, setActive] = useState(false);\n const [labelRef, ellipsis] = useEllipsisIsActive();\n const clickKeys = [\"Enter\", \" \"];\n\n const pillIcon =\n // FIXME: icon type\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n icon && isValidElement<any>(icon)\n ? cloneElement(icon, {\n ...icon.props,\n // FIXME: icon.props is any\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n className: cn(withBaseName(\"icon\"), icon.props.className),\n })\n : icon;\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown(event);\n if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {\n setActive(true);\n }\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyUp(event);\n setActive(false);\n };\n\n const handleClick = (event: SyntheticEvent<HTMLDivElement, Event>) => {\n onClick(event);\n };\n\n // FIXME: use polymorphic button as div for deletable and clickable cases.\n const Component = deletable \|\| clickable ? DivButton : \"div\";\n\n const renderDeleteIcon = () => {\n // FIXME: deleteIconProp type\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (deleteIconProp && isValidElement<any>(deleteIconProp)) {\n return cloneElement(deleteIconProp, {\n className: cn(\n withBaseName(`deleteButton`),\n // FIXME: deleteIconProp.props is any\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n deleteIconProp.props.className\n ),\n disabled,\n onClick: onDelete,\n });\n } else {\n return <DeleteButton disabled={disabled} onClick={onDelete} />;\n }\n };\n\n const { getTriggerProps, getTooltipProps } = useTooltip({\n disabled: !ellipsis && disabled,\n enterDelay,\n placement,\n leaveDelay,\n });\n\n const { ref: triggerRef, ...triggerProps } = getTriggerProps<\n typeof Component\n >({\n \"aria-disabled\": disabled \|\| undefined,\n \"aria-roledescription\": ariaRoledescription,\n className: cn(\n withBaseName(),\n {\n [withBaseName(\"clickable\")]: clickable,\n [withBaseName(\"deletable\")]: deletable && !disabled,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n },\n className\n ),\n // @ts-ignore\n \"data-testid\": \"pill\",\n onKeyDown: disabled ? undefined : handleKeyDown,\n onKeyUp: disabled ? undefined : handleKeyUp,\n onClick: disabled ? undefined : handleClick,\n role: \"button\",\n tabIndex: disabled ? -1 : 0,\n ...rest,\n });\n\n const handleRef = useForkRef(triggerRef, ref);\n\n return (\n <>\n <Tooltip {...getTooltipProps({ title: label, ...TooltipProps })} />\n <Component ref={handleRef} {...triggerProps}>\n {pillIcon \|\| null}\n <div className={withBaseName(\"label\")} ref={labelRef}>\n <span className={withBaseName(\"innerLabel\")}>{label}</span>\n </div>\n {deletable ? renderDeleteIcon() : null}\n </Component>\n </>\n );\n});\n"],"names":["useRef","useState","useIsomorphicLayoutEffect","makePrefixer","pillBaseName","forwardRef","PillBase","TooltipProps","useTooltipContext","isValidElement","cloneElement","cn","DivButton","jsx","DeleteButton","useTooltip","useForkRef","jsxs","Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n ReactEventHandler,\n SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { TooltipProps, useTooltip, useTooltipContext } from \"../tooltip\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\n\nimport \"./Pill.css\";\nimport { DivButton } from \"./internal/DivButton\";\n\nconst useEllipsisIsActive = (): [\n MutableRefObject<HTMLDivElement \| null>,\n boolean\n] => {\n const labelRef = useRef<HTMLDivElement \| null>(null);\n const [showEllipsis, setShowEllipsis] = useState(false);\n\n useIsomorphicLayoutEffect(() => {\n if (labelRef.current) {\n setShowEllipsis(\n labelRef.current.offsetWidth < labelRef.current.scrollWidth\n );\n }\n }, []);\n return [labelRef, showEllipsis];\n};\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport interface PillBaseProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Props passed to the tooltip\n /\n TooltipProps?: Partial<TooltipProps>;\n /\n Defines a human-readable, author-localized description for the role of an element.\n \n This should be in favour of aria-label for `Pill`\n /\n \"aria-roledescription\"?: string;\n /\n * Clickable variation. Use 'onClick' for callback.\n /\n clickable?: boolean;\n /\n Shows delete icon. Use `onDelete` for callback.\n /\n deletable?: boolean;\n /\n Override the default delete icon element. Shown only if `deletable` is set.\n /\n // TODO: Should this be DeleteIcon (caps)?\n deleteIcon?: ReactElement;\n /\n If `true`, the pill will be disabled.\n /\n disabled?: boolean;\n /\n Whether the pill is been highlighted.\n * If `true`, the pill will display Tooltip when text within is truncated.\n /\n highlighted?: boolean;\n /\n Icon element.\n /\n // TODO: Should this be Icon (caps)?\n icon?: ReactElement;\n /\n The content of the label.\n /\n label?: string;\n /\n Callback function fired when pill is clicked.\n /\n onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /\n Callback function fired when the delete icon is clicked. Used when `deletable` is true.\n */\n onDelete?: ReactEventHandler<HTMLElement>;\n}\n\nexport const PillBase = forwardRef(function PillBase(\n {\n TooltipProps = {},\n \"aria-roledescription\": ariaRoledescription = \"Pill\",\n label,\n className,\n // New API\n clickable,\n disabled,\n // TODO: Should this be a prop as we have variant: 'closable'\n // New API.\n deletable,\n deleteIcon: deleteIconProp,\n // TODO: Not implemented. Consider to add `useImperativeHandle` like API to Tooltip?\n highlighted,\n icon,\n onClick = noop,\n onDelete,\n onKeyDown = noop,\n onKeyUp = noop,\n ...rest\n }: PillBaseProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n\n const [active, setActive] = useState(false);\n const [labelRef, ellipsis] = useEllipsisIsActive();\n const clickKeys = [\"Enter\", \" \"];\n\n const pillIcon =\n // FIXME: icon type\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n icon && isValidElement<any>(icon)\n ? cloneElement(icon, {\n ...icon.props,\n // FIXME: icon.props is any\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n className: clsx(withBaseName(\"icon\"), icon.props.className),\n })\n : icon;\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown(event);\n if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {\n setActive(true);\n }\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyUp(event);\n setActive(false);\n };\n\n const handleClick = (event: SyntheticEvent<HTMLDivElement, Event>) => {\n onClick(event);\n };\n\n // FIXME: use polymorphic button as div for deletable and clickable cases.\n const Component = deletable \|\| clickable ? DivButton : \"div\";\n\n const renderDeleteIcon = () => {\n // FIXME: deleteIconProp type\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (deleteIconProp && isValidElement<any>(deleteIconProp)) {\n return cloneElement(deleteIconProp, {\n className: clsx(\n withBaseName(`deleteButton`),\n // FIXME: deleteIconProp.props is any\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n deleteIconProp.props.className\n ),\n disabled,\n onClick: onDelete,\n });\n } else {\n return <DeleteButton disabled={disabled} onClick={onDelete} />;\n }\n };\n\n const { getTriggerProps, getTooltipProps } = useTooltip({\n disabled: !ellipsis && disabled,\n enterDelay,\n placement,\n leaveDelay,\n });\n\n const { ref: triggerRef, ...triggerProps } = getTriggerProps<\n typeof Component\n >({\n \"aria-disabled\": disabled \|\| undefined,\n \"aria-roledescription\": ariaRoledescription,\n className: clsx(\n withBaseName(),\n {\n [withBaseName(\"clickable\")]: clickable,\n [withBaseName(\"deletable\")]: deletable && !disabled,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n },\n className\n ),\n // @ts-ignore\n \"data-testid\": \"pill\",\n onKeyDown: disabled ? undefined : handleKeyDown,\n onKeyUp: disabled ? undefined : handleKeyUp,\n onClick: disabled ? undefined : handleClick,\n role: \"button\",\n tabIndex: disabled ? -1 : 0,\n ...rest,\n });\n\n const handleRef = useForkRef(triggerRef, ref);\n\n return (\n <>\n <Tooltip {...getTooltipProps({ title: label, ...TooltipProps })} />\n <Component ref={handleRef} {...triggerProps}>\n {pillIcon \|\| null}\n <div className={withBaseName(\"label\")} ref={labelRef}>\n <span className={withBaseName(\"innerLabel\")}>{label}</span>\n </div>\n {deletable ? renderDeleteIcon() : null}\n </Component>\n </>\n );\n});\n"],"names":["useRef","useState","useIsomorphicLayoutEffect","makePrefixer","pillBaseName","forwardRef","PillBase","TooltipProps","useTooltipContext","isValidElement","cloneElement","clsx","DivButton","jsx","DeleteButton","useTooltip","useForkRef","jsxs","Fragment"],"mappings":"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"}

package/dist-cjs/packages/lab/src/pill/SelectablePill.js CHANGED Viewed

@@ -3,17 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var constants = require('./constants.js');
 var PillBase = require('./PillBase.js');
 var PillCheckbox = require('./internal/PillCheckbox.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const noop = () => void 0;
 const withBaseName = core.makePrefixer(constants.pillBaseName);
 const SelectablePill = React.forwardRef(function SelectablePill2({
@@ -42,7 +38,7 @@ const SelectablePill = React.forwardRef(function SelectablePill2({
     "aria-roledescription": "Selectable Pill",
     clickable: true,
     disabled,
-    className: cx__default["default"](withBaseName(`selectable`), className, {
+    className: clsx.clsx(withBaseName(`selectable`), className, {
       [withBaseName(`checked`)]: checked
     }),
     icon: /* @__PURE__ */ jsxRuntime.jsx(PillCheckbox.PillCheckbox, {

package/dist-cjs/packages/lab/src/pill/SelectablePill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectablePill.js","sources":["../src/pill/SelectablePill.tsx"],"sourcesContent":["import ~~classnames~~ from \"~~classnames~~\";\nimport { ForwardedRef, forwardRef, useCallback, SyntheticEvent } from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\nimport { PillCheckbox } from \"./internal/PillCheckbox\";\n\nconst noop = () => undefined;\n\nexport interface SelectablePillProps extends Omit<PillBaseProps, \"onChange\"> {\n /*\n Controls whether the selectable pill is checked\n /\n checked?: boolean;\n /\n Uncontrolled prop to determine initial state of selectable pill\n /\n defaultChecked?: boolean;\n // TODO: API Alignment.\n // - Reverted param order to keep event as first param\n /\n Callback when checked state is changed\n */\n onChange?: (event: SyntheticEvent, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const SelectablePill = forwardRef(function SelectablePill(\n {\n defaultChecked = false,\n checked: checkedProp,\n className,\n onChange = noop,\n disabled = false,\n ...rest\n }: SelectablePillProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: defaultChecked,\n name: \"SelectablePill\",\n state: \"checked\",\n });\n\n const handleClick = useCallback(\n (event: SyntheticEvent<HTMLDivElement>) => {\n setChecked(!checked);\n onChange(event, !checked);\n },\n [checked, onChange, setChecked]\n );\n\n return (\n <PillBase\n aria-checked={checked}\n aria-roledescription=\"Selectable Pill\"\n clickable\n disabled={disabled}\n className={~~classnames~~(withBaseName(`selectable`), className, {\n [withBaseName(`checked`)]: checked,\n })}\n icon={<PillCheckbox checked={checked} />}\n role=\"checkbox\"\n onClick={handleClick}\n {...rest}\n ref={ref}\n />\n );\n});\n"],"names":["makePrefixer","pillBaseName","forwardRef","SelectablePill","useControlled","useCallback","jsx","PillBase","~~classnames~~","PillCheckbox"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAOA,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAmBnB,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,cAAiB,GAAA,KAAA;AAAA,EACjB,OAAS,EAAA,WAAA;AAAA,EACT,SAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACR,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,kBAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAS,EAAA,cAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAA0C,KAAA;AACzC,MAAA,UAAA,CAAW,CAAC,OAAO,CAAA,CAAA;AACnB,MAAS,QAAA,CAAA,KAAA,EAAO,CAAC,OAAO,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAS,EAAA,QAAA,EAAU,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IACC,cAAc,EAAA,OAAA;AAAA,IACd,sBAAqB,EAAA,iBAAA;AAAA,IACrB,SAAS,EAAA,IAAA;AAAA,IACT,QAAA;AAAA,IACA,SAAW,EAAAC,~~sBAAA~~,~~CAAW~~,YAAa,CAAA,CAAA,UAAA,CAAY,GAAG,SAAW,EAAA;AAAA,~~MAC3D~~,CAAC,YAAa,CAAA,CAAA,OAAA,CAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,sBAAOF,cAAA,CAAAG,yBAAA,EAAA;AAAA,MAAa,OAAA;AAAA,KAAkB,CAAA;AAAA,IACtC,IAAK,EAAA,UAAA;AAAA,IACL,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"SelectablePill.js","sources":["../src/pill/SelectablePill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, useCallback, SyntheticEvent } from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\nimport { PillCheckbox } from \"./internal/PillCheckbox\";\n\nconst noop = () => undefined;\n\nexport interface SelectablePillProps extends Omit<PillBaseProps, \"onChange\"> {\n /*\n Controls whether the selectable pill is checked\n /\n checked?: boolean;\n /\n Uncontrolled prop to determine initial state of selectable pill\n /\n defaultChecked?: boolean;\n // TODO: API Alignment.\n // - Reverted param order to keep event as first param\n /\n Callback when checked state is changed\n */\n onChange?: (event: SyntheticEvent, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const SelectablePill = forwardRef(function SelectablePill(\n {\n defaultChecked = false,\n checked: checkedProp,\n className,\n onChange = noop,\n disabled = false,\n ...rest\n }: SelectablePillProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: defaultChecked,\n name: \"SelectablePill\",\n state: \"checked\",\n });\n\n const handleClick = useCallback(\n (event: SyntheticEvent<HTMLDivElement>) => {\n setChecked(!checked);\n onChange(event, !checked);\n },\n [checked, onChange, setChecked]\n );\n\n return (\n <PillBase\n aria-checked={checked}\n aria-roledescription=\"Selectable Pill\"\n clickable\n disabled={disabled}\n className={clsx(withBaseName(`selectable`), className, {\n [withBaseName(`checked`)]: checked,\n })}\n icon={<PillCheckbox checked={checked} />}\n role=\"checkbox\"\n onClick={handleClick}\n {...rest}\n ref={ref}\n />\n );\n});\n"],"names":["makePrefixer","pillBaseName","forwardRef","SelectablePill","useControlled","useCallback","jsx","PillBase","clsx","PillCheckbox"],"mappings":";;;;;;;;;;;;AAOA,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAmBnB,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,cAAiB,GAAA,KAAA;AAAA,EACjB,OAAS,EAAA,WAAA;AAAA,EACT,SAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACR,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,kBAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAS,EAAA,cAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAA0C,KAAA;AACzC,MAAA,UAAA,CAAW,CAAC,OAAO,CAAA,CAAA;AACnB,MAAS,QAAA,CAAA,KAAA,EAAO,CAAC,OAAO,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAS,EAAA,QAAA,EAAU,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IACC,cAAc,EAAA,OAAA;AAAA,IACd,sBAAqB,EAAA,iBAAA;AAAA,IACrB,SAAS,EAAA,IAAA;AAAA,IACT,QAAA;AAAA,IACA,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,CAAA,UAAA,CAAY,GAAG,SAAW,EAAA;AAAA,MACrD,CAAC,YAAa,CAAA,CAAA,OAAA,CAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,sBAAOF,cAAA,CAAAG,yBAAA,EAAA;AAAA,MAAa,OAAA;AAAA,KAAkB,CAAA;AAAA,IACtC,IAAK,EAAA,UAAA;AAAA,IACL,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/pill/internal/DeleteButton.js CHANGED Viewed

@@ -5,19 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@salt-ds/icons');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var constants = require('../constants.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const withBaseName = core.makePrefixer(constants.pillBaseName);
 const DeleteButton = (props) => {
   const { disabled, active, className, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
     "aria-hidden": "true",
-    className: cx__default["default"](
+    className: clsx.clsx(
       withBaseName("deleteButton"),
       {
         [withBaseName("deleteButton-disabled")]: disabled,

package/dist-cjs/packages/lab/src/pill/internal/DeleteButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeleteButton.js","sources":["../src/pill/internal/DeleteButton.tsx"],"sourcesContent":["import { CloseSmallIcon } from \"@salt-ds/icons\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport cn from \"~~classnames~~\";\nimport { MouseEvent } from \"react\";\nimport { pillBaseName } from \"../constants\";\n\nexport interface DeleteButtonProps extends ButtonProps {\n /*\n Active state.\n */\n active?: boolean;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const DeleteButton = (props: DeleteButtonProps) => {\n const { disabled, active, className, ...restProps } = props;\n return (\n <Button\n aria-hidden=\"true\"\n className={cn(\n withBaseName(\"deleteButton\"),\n {\n [withBaseName(\"deleteButton-disabled\")]: disabled,\n [withBaseName(\"deleteButton-active\")]: active,\n },\n className\n )}\n data-testid=\"pill-delete-button\"\n disabled={disabled}\n onMouseEnter={(event: MouseEvent<HTMLButtonElement>) =>\n event.stopPropagation()\n }\n tabIndex={-1}\n variant=\"secondary\"\n {...restProps}\n >\n <CloseSmallIcon className={withBaseName(\"deleteIcon\")} />\n </Button>\n );\n};\n"],"names":["makePrefixer","pillBaseName","jsx","Button","cn","CloseSmallIcon"],"mappings":"~~;;;;;;;;;;;;;;~~AAaA,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,SAAA,EAAA,GAAc,WAAc,GAAA,KAAA,CAAA;AACtD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAAC,~~sBAAA~~;AAAA,MACT,aAAa,cAAc,CAAA;AAAA,MAC3B;AAAA,QACE,CAAC,YAAa,CAAA,uBAAuB,CAAI,GAAA,QAAA;AAAA,QACzC,CAAC,YAAa,CAAA,qBAAqB,CAAI,GAAA,MAAA;AAAA,OACzC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAc,EAAA,CAAC,KACb,KAAA,KAAA,CAAM,eAAgB,EAAA;AAAA,IAExB,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEJ,QAAC,kBAAAF,cAAA,CAAAG,oBAAA,EAAA;AAAA,MAAe,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,KAAG,CAAA;AAAA,GACzD,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"DeleteButton.js","sources":["../src/pill/internal/DeleteButton.tsx"],"sourcesContent":["import { CloseSmallIcon } from \"@salt-ds/icons\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { MouseEvent } from \"react\";\nimport { pillBaseName } from \"../constants\";\n\nexport interface DeleteButtonProps extends ButtonProps {\n /*\n Active state.\n */\n active?: boolean;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const DeleteButton = (props: DeleteButtonProps) => {\n const { disabled, active, className, ...restProps } = props;\n return (\n <Button\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(\"deleteButton\"),\n {\n [withBaseName(\"deleteButton-disabled\")]: disabled,\n [withBaseName(\"deleteButton-active\")]: active,\n },\n className\n )}\n data-testid=\"pill-delete-button\"\n disabled={disabled}\n onMouseEnter={(event: MouseEvent<HTMLButtonElement>) =>\n event.stopPropagation()\n }\n tabIndex={-1}\n variant=\"secondary\"\n {...restProps}\n >\n <CloseSmallIcon className={withBaseName(\"deleteIcon\")} />\n </Button>\n );\n};\n"],"names":["makePrefixer","pillBaseName","jsx","Button","clsx","CloseSmallIcon"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,SAAA,EAAA,GAAc,WAAc,GAAA,KAAA,CAAA;AACtD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAAC,SAAA;AAAA,MACT,aAAa,cAAc,CAAA;AAAA,MAC3B;AAAA,QACE,CAAC,YAAa,CAAA,uBAAuB,CAAI,GAAA,QAAA;AAAA,QACzC,CAAC,YAAa,CAAA,qBAAqB,CAAI,GAAA,MAAA;AAAA,OACzC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAc,EAAA,CAAC,KACb,KAAA,KAAA,CAAM,eAAgB,EAAA;AAAA,IAExB,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEJ,QAAC,kBAAAF,cAAA,CAAAG,oBAAA,EAAA;AAAA,MAAe,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,KAAG,CAAA;AAAA,GACzD,CAAA,CAAA;AAEJ;;;;"}