@salt-ds/lab 1.0.0-alpha.25 → 1.0.0-alpha.27

package/dist-cjs/pagination/Paginator.js

@@ -3,72 +3,62 @@
 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 clsx = require('clsx');
 var React = require('react');
-var ArrowButton = require('./ArrowButton.js');
-var CompactControls = require('./CompactControls.js');
-var RegularControls = require('./RegularControls.js');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var PageRanges = require('./PageRanges.js');
 var usePaginationContext = require('./usePaginationContext.js');
-var utils = require('./utils.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
-var Pagination = require('./Pagination.css.js');
+var Paginator$1 = require('./Paginator.css.js');
 
+const withBaseName = core.makePrefixer("saltPaginator");
 const Paginator = React.forwardRef(
-  ({
-    className,
-    boundaryCount,
-    siblingCount,
-    showPreviousNext = true,
-    FormFieldProps: FormFieldProps2,
-    ...restProps
-  }, forwardedRef) => {
+  function Paginator2({ className, boundaryCount, siblingCount, ...restProps }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
-      testId: "salt-pagination",
-      css: Pagination,
+      testId: "salt-paginator",
+      css: Paginator$1,
       window: targetWindow
     });
-    const { count, page, onPageChange, compact, setPaginatorElement } = usePaginationContext.usePaginationContext();
-    const ref = core.useForkRef(setPaginatorElement, forwardedRef);
-    const onPreviousPage = React.useCallback(() => {
-      onPageChange(Math.max(1, page - 1));
-    }, [page, onPageChange]);
-    const onNextPage = React.useCallback(() => {
-      onPageChange(Math.min(page + 1, count));
-    }, [page, onPageChange, count]);
+    const { count, page, onPageChange } = usePaginationContext.usePaginationContext();
+    const onPreviousPage = (event) => {
+      onPageChange(event, Math.max(1, page - 1));
+    };
+    const onNextPage = (event) => {
+      onPageChange(event, Math.min(page + 1, count));
+    };
     const isOnFirstPage = page === 1;
     const isOnLastPage = page === count;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: clsx.clsx(utils.withBaseName(), className),
+      className: clsx.clsx(withBaseName(), className),
       ...restProps,
       ref,
       children: [
-        showPreviousNext && /* @__PURE__ */ jsxRuntime.jsx(ArrowButton.ArrowButton, {
-          arrowButtonType: "previous",
-          onPress: onPreviousPage,
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+          variant: "secondary",
+          "aria-label": "Previous Page",
+          onClick: onPreviousPage,
           disabled: isOnFirstPage,
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {})
+          className: withBaseName("arrowButton-previous"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {
+            "aria-hidden": true
+          })
         }),
-        compact ? /* @__PURE__ */ jsxRuntime.jsx(CompactControls.CompactControls, {
-          count,
-          page,
-          onPageChange,
-          FormFieldProps: FormFieldProps2
-        }) : /* @__PURE__ */ jsxRuntime.jsx(RegularControls.RegularControls, {
-          count,
-          page,
-          onPageChange,
+        /* @__PURE__ */ jsxRuntime.jsx(PageRanges.PageRanges, {
           siblingCount,
           boundaryCount
         }),
-        showPreviousNext && /* @__PURE__ */ jsxRuntime.jsx(ArrowButton.ArrowButton, {
-          arrowButtonType: "next",
-          onPress: onNextPage,
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+          variant: "secondary",
+          "aria-label": "Next Page",
+          onClick: onNextPage,
           disabled: isOnLastPage,
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {})
+          className: withBaseName("arrowButton-next"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
+            "aria-hidden": true
+          })
         })
       ]
     });

package/dist-cjs/pagination/Paginator.js.map

@@ -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 { 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 { FormFieldLegacyProps as FormFieldProps } from \"../form-field-legacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginationCss from \"./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 targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pagination\",\n      css: paginationCss,\n      window: targetWindow,\n    });\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","useWindow","useComponentCssInjection","paginationCss","usePaginationContext","useForkRef","useCallback","jsxs","clsx","withBaseName","jsx","ArrowButton","ChevronLeftIcon","CompactControls","RegularControls","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAuBO,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,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,cAAgBb,EAAAA,eAAAA;AAAA,SAClB,oBAECU,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;;;;"}
+{"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageRanges } from \"./PageRanges\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginatorCss from \"./Paginator.css\";\n\nconst withBaseName = makePrefixer(\"saltPaginator\");\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of pages next to the arrow buttons when page range is truncated.\n   */\n  boundaryCount?: number;\n  /**\n   * Number of pages on each side of the current page when page range is truncated.\n   */\n  siblingCount?: number;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n  function Paginator(\n    { className, boundaryCount, siblingCount, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-paginator\",\n      css: paginatorCss,\n      window: targetWindow,\n    });\n\n    const { count, page, onPageChange } = usePaginationContext();\n\n    const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.max(1, page - 1));\n    };\n\n    const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.min(page + 1, count));\n    };\n\n    const isOnFirstPage = page === 1;\n    const isOnLastPage = page === count;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n        <Button\n          variant=\"secondary\"\n          aria-label=\"Previous Page\"\n          onClick={onPreviousPage}\n          disabled={isOnFirstPage}\n          className={withBaseName(\"arrowButton-previous\")}\n        >\n          <ChevronLeftIcon aria-hidden />\n        </Button>\n        <PageRanges siblingCount={siblingCount} boundaryCount={boundaryCount} />\n        <Button\n          variant=\"secondary\"\n          aria-label=\"Next Page\"\n          onClick={onNextPage}\n          disabled={isOnLastPage}\n          className={withBaseName(\"arrowButton-next\")}\n        >\n          <ChevronRightIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Paginator","useWindow","useComponentCssInjection","paginatorCss","usePaginationContext","jsxs","clsx","jsx","Button","ChevronLeftIcon","PageRanges","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAa1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,WACP,EAAE,SAAA,EAAW,eAAe,YAAiB,EAAA,GAAA,SAAA,IAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiBC,yCAAqB,EAAA,CAAA;AAE3D,IAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KAC3C,CAAA;AAEA,IAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KAC/C,CAAA;AAEA,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,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,eAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UACV,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,UAE9C,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA;AAAA,YAAgB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAC/B,CAAA;AAAA,wBACCF,cAAA,CAAAG,qBAAA,EAAA;AAAA,UAAW,YAAA;AAAA,UAA4B,aAAA;AAAA,SAA8B,CAAA;AAAA,wBACrEH,cAAA,CAAAC,WAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,WAAA;AAAA,UACX,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UACV,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAE1C,QAAC,kBAAAD,cAAA,CAAAI,sBAAA,EAAA;AAAA,YAAiB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAChC,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/pagination/usePaginationContext.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var PaginationContext = require('./PaginationContext.js');
 var React = require('react');
+var PaginationContext = require('./PaginationContext.js');
 
 const usePaginationContext = () => {
   const context = React.useContext(PaginationContext.paginationContext);

package/dist-cjs/pagination/usePaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginationContext.js","sources":["../src/pagination/usePaginationContext.ts"],"sourcesContent":["import { paginationContext } from \"./PaginationContext\";\nimport { useContext } from \"react\";\n\nexport const usePaginationContext = () => {\n  const context = useContext(paginationContext);\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!context) {\n      console.error(`usePaginationContext should be used inside of Pagination`);\n    }\n  }\n  return context;\n};\n"],"names":["useContext","paginationContext"],"mappings":";;;;;;;AAGO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,OAAA,GAAUA,iBAAWC,mCAAiB,CAAA,CAAA;AAC5C,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA,CAAQ,MAAM,CAA0D,wDAAA,CAAA,CAAA,CAAA;AAAA,KAC1E;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"usePaginationContext.js","sources":["../src/pagination/usePaginationContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { paginationContext } from \"./PaginationContext\";\n\nexport const usePaginationContext = () => {\n  const context = useContext(paginationContext);\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!context) {\n      console.error(`usePaginationContext should be used inside of Pagination`);\n    }\n  }\n  return context;\n};\n"],"names":["useContext","paginationContext"],"mappings":";;;;;;;AAGO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,OAAA,GAAUA,iBAAWC,mCAAiB,CAAA,CAAA;AAC5C,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA,CAAQ,MAAM,CAA0D,wDAAA,CAAA,CAAA,CAAA;AAAA,KAC1E;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist-cjs/scrim/Scrim.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltScrim {\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  bottom: 0;\n  height: 100%;\n  display: flex;\n  z-index: 1199;\n  position: fixed;\n  align-items: center;\n  justify-content: center;\n  background: var(--saltScrim-background, var(--salt-overlayable-background));\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n  outline: none;\n}\n\n/* Style applied to the root element when containerFix={true} */\n.saltScrim-containerFix {\n  position: absolute;\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltScrim {\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  bottom: 0;\n  height: 100%;\n  display: flex;\n  z-index: calc(var(--salt-zIndex-drawer) - 1);\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  background: var(--saltScrim-background, var(--salt-overlayable-background));\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n  outline: none;\n}\n\n/* Style applied to the root element when fixed={true} */\n.saltScrim-fixed {\n  position: fixed;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Scrim.css.js.map

package/dist-cjs/scrim/Scrim.js

@@ -3,166 +3,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var ariaHidden = require('aria-hidden');
 var clsx = require('clsx');
-var noScroll = require('no-scroll');
 var React = require('react');
 var core = require('@salt-ds/core');
-var FocusManager = require('../focus-manager/FocusManager.js');
-var PreventFocus = require('./internal/PreventFocus.js');
-var ScrimContext = require('./ScrimContext.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var Scrim$1 = require('./Scrim.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var noScroll__default = /*#__PURE__*/_interopDefaultLegacy(noScroll);
-
-const scrims = /* @__PURE__ */ new Set();
-const getDefaultParent = () => typeof document !== "undefined" ? document.body : null;
-const noop = () => {
-};
 const withBaseName = core.makePrefixer("saltScrim");
-function preventSelection(parent = getDefaultParent()) {
-  if (parent) {
-    const previous = parent.style.userSelect;
-    parent.style.userSelect = "none";
-    return () => {
-      parent.style.userSelect = previous;
-    };
-  }
-  return noop;
-}
-const defaultSelector = `
-[tabindex="0"],
-a:not([tabindex="-1"]),
-area:not([tabindex="-1"]),
-details:not([tabindex="-1"]),
-iframe:not([tabindex="-1"]),
-select:not([tabindex="-1"]),
-textarea:not([tabindex="-1"]),
-button:not([tabindex="-1"]),
-input:not([tabindex="-1"])
-`;
-const Scrim = React.forwardRef(function Scrim2({
-  autoFocusRef,
-  closeWithEscape = false,
-  className,
-  children,
-  disableAutoFocus,
-  disableFocusTrap,
-  disableReturnFocus,
-  fallbackFocusRef,
-  onBackDropClick,
-  onClose,
-  open,
-  containerRef,
-  enableContainerMode = false,
-  returnFocusOptions,
-  tabEnabledSelectors = defaultSelector,
-  zIndex,
-  ...rest
-}, ref) {
+const Scrim = React.forwardRef(function Scrim2({ className, children, fixed = false, open = true, ...rest }, ref) {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-scrim",
     css: Scrim$1,
     window: targetWindow
   });
-  const scrimRef = React.useRef(null);
-  const setWrapperRef = core.useForkRef(ref, scrimRef);
-  const undoAria = React.useRef(noop);
-  const undoSelection = React.useRef(noop);
-  const undoTabIndex = React.useRef(noop);
-  const scrimId = core.useId();
-  React.useEffect(() => {
-    if (open && !(containerRef == null ? void 0 : containerRef.current)) {
-      scrims.add(scrimId);
-      noScroll__default["default"].on();
-    }
-    return () => {
-      if (open) {
-        scrims.delete(scrimId);
-        if (scrims.size === 0) {
-          noScroll__default["default"].off();
-        }
-      }
-    };
-  }, [open, containerRef, scrimId]);
-  React.useEffect(() => {
-    if (open) {
-      const parent = (containerRef == null ? void 0 : containerRef.current) || void 0;
-      if (scrimRef.current) {
-        undoAria.current = ariaHidden.hideOthers(scrimRef.current, parent);
-      }
-    }
-    return () => {
-      var _a;
-      (_a = undoAria.current) == null ? void 0 : _a.call(undoAria);
-    };
-  }, [open, containerRef]);
-  React.useEffect(() => {
-    if (open) {
-      const parent = containerRef == null ? void 0 : containerRef.current;
-      if (parent) {
-        undoSelection.current = preventSelection(parent);
-        undoTabIndex.current = PreventFocus.preventFocusOthers(
-          scrimRef.current,
-          tabEnabledSelectors,
-          parent
-        );
-      }
-    }
-    return () => {
-      var _a, _b;
-      (_a = undoSelection.current) == null ? void 0 : _a.call(undoSelection);
-      (_b = undoTabIndex.current) == null ? void 0 : _b.call(undoTabIndex);
-    };
-  }, [open, containerRef, tabEnabledSelectors]);
-  React.useEffect(() => {
-    if (closeWithEscape && open && scrimRef.current) {
-      const escapeHandler = (event) => {
-        if (event.key === "Escape") {
-          onClose == null ? void 0 : onClose();
-        }
-      };
-      const doc = core.ownerDocument(scrimRef.current);
-      doc.addEventListener("keydown", escapeHandler);
-      return () => {
-        doc.removeEventListener("keydown", escapeHandler);
-      };
-    }
-  }, [closeWithEscape, onClose, open]);
   if (!open) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    "aria-modal": !enableContainerMode,
-    className: clsx.clsx(className, withBaseName(), {
-      [withBaseName("containerFix")]: enableContainerMode
-    }),
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("fixed")]: fixed
+      },
+      className
+    ),
     "data-testid": "scrim",
-    onClick: onBackDropClick,
-    ref: setWrapperRef,
-    role: "dialog",
-    style: {
-      zIndex
-    },
+    ref,
     ...rest,
-    children: /* @__PURE__ */ jsxRuntime.jsx(FocusManager.FocusManager, {
-      active: open,
-      autoFocusRef,
-      disableAutoFocus,
-      disableFocusTrap: disableFocusTrap || !!enableContainerMode,
-      disableReturnFocus,
-      returnFocusOptions,
-      tabEnabledSelectors,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ScrimContext.ScrimContext.Provider, {
-        value: onClose,
-        children
-      })
-    })
+    children
   });
 });
 

package/dist-cjs/scrim/Scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { hideOthers } from \"aria-hidden\";\nimport { clsx } from \"clsx\";\nimport noScroll from \"no-scroll\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  RefObject,\n  SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { makePrefixer, ownerDocument, useForkRef, useId } from \"@salt-ds/core\";\nimport { FocusManager, FocusManagerProps } from \"../focus-manager\";\nimport { preventFocusOthers } from \"./internal/PreventFocus\";\nimport { ScrimContext } from \"./ScrimContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst scrims = new Set();\n\nconst getDefaultParent = () =>\n  typeof document !== \"undefined\" ? document.body : null;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nfunction preventSelection(parent = getDefaultParent()): () => void {\n  if (parent) {\n    const previous = parent.style.userSelect;\n    parent.style.userSelect = \"none\";\n\n    return () => {\n      parent.style.userSelect = previous;\n    };\n  }\n  return noop;\n}\n\nconst defaultSelector = `\n[tabindex=\"0\"],\na:not([tabindex=\"-1\"]),\narea:not([tabindex=\"-1\"]),\ndetails:not([tabindex=\"-1\"]),\niframe:not([tabindex=\"-1\"]),\nselect:not([tabindex=\"-1\"]),\ntextarea:not([tabindex=\"-1\"]),\nbutton:not([tabindex=\"-1\"]),\ninput:not([tabindex=\"-1\"])\n`;\n\nexport interface ScrimProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Ref of the element that automatically receives focus when the Scrim is opened.\n   */\n  autoFocusRef?: FocusManagerProps[\"autoFocusRef\"];\n  /**\n   * Prop to enable escape key to close scrim.\n   * The default value of this props is false\n   */\n  closeWithEscape?: boolean;\n  /**\n   * If `true`, the trap focus will not automatically shift focus to itself when it opens, and\n   * replace it to the last focused element when it closes.\n   */\n  disableAutoFocus?: boolean;\n  /**\n   * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.\n   */\n  disableFocusTrap?: boolean;\n  /**\n   * If `true`, the trap focus will not restore focus to previously focused element once\n   * trap focus is hidden.\n   */\n  disableReturnFocus?: boolean;\n  /**\n   * By default, an error will be thrown if the focus trap contains no elements in its tab order.\n   * With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found.\n   * For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements.\n   */\n  fallbackFocusRef?: FocusManagerProps[\"fallbackFocusRef\"];\n  /**\n   * The handler for backdrop click on Scrim.\n   */\n  onBackDropClick?: (e: SyntheticEvent) => void;\n  /**\n   * The handler for onClose of Scrim.\n   */\n  onClose?: () => void;\n  /**\n   * To maintain open and close of the scrim.\n   */\n  open?: boolean;\n  /**\n   * Set to true to enable the container use case. If true the Scrim will be bound to a container ref you pass via the `parentRef` prop.\n   * Default value is false, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  enableContainerMode?: boolean;\n  /**\n   * Prop necessary to enable container use case. Pass the parent element ref that you want Scrim to be bound to.\n   * Default value is undefined, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  containerRef?: RefObject<HTMLElement>;\n  /**\n   * Options object to pass to the `focus()` method that is called on the previously focused element when Scrim is closed.\n   */\n  returnFocusOptions?: FocusManagerProps[\"returnFocusOptions\"];\n  /**\n   * comma separated string of query selectors which may need to be overridden for edge cases.\n   */\n  tabEnabledSelectors?: string;\n  /**\n   * Prop to pass z-index for Scrim.\n   */\n  zIndex?: number;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  {\n    autoFocusRef,\n    closeWithEscape = false,\n    className,\n    children,\n    disableAutoFocus,\n    disableFocusTrap,\n    disableReturnFocus,\n    fallbackFocusRef,\n    onBackDropClick,\n    onClose,\n    open,\n    containerRef,\n    enableContainerMode = false,\n    returnFocusOptions,\n    tabEnabledSelectors = defaultSelector,\n    zIndex,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrim\",\n    css: scrimCss,\n    window: targetWindow,\n  });\n\n  const scrimRef = useRef<HTMLDivElement>(null);\n  const setWrapperRef = useForkRef(ref, scrimRef);\n  const undoAria = useRef(noop);\n  const undoSelection = useRef(noop);\n  const undoTabIndex = useRef(noop);\n  const scrimId = useId();\n\n  useEffect(() => {\n    if (open && !containerRef?.current) {\n      scrims.add(scrimId);\n      noScroll.on();\n    }\n\n    return () => {\n      if (open) {\n        scrims.delete(scrimId);\n        if (scrims.size === 0) {\n          noScroll.off();\n        }\n      }\n    };\n  }, [open, containerRef, scrimId]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current || undefined;\n\n      if (scrimRef.current) {\n        undoAria.current = hideOthers(scrimRef.current, parent);\n      }\n    }\n\n    return () => {\n      undoAria.current?.();\n    };\n  }, [open, containerRef]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current;\n\n      if (parent) {\n        undoSelection.current = preventSelection(parent);\n        undoTabIndex.current = preventFocusOthers(\n          scrimRef.current,\n          tabEnabledSelectors,\n          parent\n        );\n      }\n    }\n\n    return () => {\n      undoSelection.current?.();\n      undoTabIndex.current?.();\n    };\n  }, [open, containerRef, tabEnabledSelectors]);\n\n  useEffect(() => {\n    if (closeWithEscape && open && scrimRef.current) {\n      const escapeHandler = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") {\n          onClose?.();\n        }\n      };\n\n      const doc = ownerDocument(scrimRef.current);\n      doc.addEventListener(\"keydown\", escapeHandler);\n\n      return () => {\n        doc.removeEventListener(\"keydown\", escapeHandler);\n      };\n    }\n  }, [closeWithEscape, onClose, open]);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-modal={!enableContainerMode}\n      className={clsx(className, withBaseName(), {\n        [withBaseName(\"containerFix\")]: enableContainerMode,\n      })}\n      data-testid=\"scrim\"\n      onClick={onBackDropClick}\n      ref={setWrapperRef}\n      role=\"dialog\"\n      style={{\n        zIndex,\n      }}\n      {...rest}\n    >\n      <FocusManager\n        active={open}\n        autoFocusRef={autoFocusRef}\n        disableAutoFocus={disableAutoFocus}\n        disableFocusTrap={disableFocusTrap || !!enableContainerMode}\n        disableReturnFocus={disableReturnFocus}\n        returnFocusOptions={returnFocusOptions}\n        tabEnabledSelectors={tabEnabledSelectors}\n      >\n        <ScrimContext.Provider value={onClose}>\n          {children}\n        </ScrimContext.Provider>\n      </FocusManager>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Scrim","useWindow","useComponentCssInjection","scrimCss","useRef","useForkRef","useId","useEffect","noScroll","hideOthers","preventFocusOthers","ownerDocument","jsx","clsx","FocusManager","ScrimContext"],"mappings":"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"}
+{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true` the scrim is bound to the document viewport.\n   * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n   */\n  fixed?: boolean;\n  /**\n   * If `true` the scrim is shown.\n   */\n  open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  { className, children, fixed = false, open = true, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrim\",\n    css: scrimCss,\n    window: targetWindow,\n  });\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fixed\")]: fixed,\n        },\n        className\n      )}\n      data-testid=\"scrim\"\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Scrim","useWindow","useComponentCssInjection","scrimCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAAC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/tokenized-input/internal/InputPill.js

@@ -7,9 +7,7 @@ var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var useWidth = require('./useWidth.js');
-var Pill = require('../../pill/Pill.js');
-require('../../pill/ClosablePill.js');
-require('../../pill/SelectablePill.js');
+var icons = require('@salt-ds/icons');
 
 const withBaseName = core.makePrefixer("saltInputPill");
 const InputPill = React.memo(function InputPill2(props) {
@@ -20,10 +18,10 @@ const InputPill = React.memo(function InputPill2(props) {
     hidden,
     highlighted,
     index,
+    label,
     lastVisible,
     onDelete,
     pillsRef,
-    tabIndex: tabIndexProp,
     ...restProps
   } = props;
   const ref = React.useRef(null);
@@ -42,7 +40,7 @@ const InputPill = React.memo(function InputPill2(props) {
   const handleDelete = () => {
     onDelete == null ? void 0 : onDelete(index);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Pill.Pill, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Pill, {
     className: clsx.clsx(
       withBaseName(),
       {
@@ -53,12 +51,18 @@ const InputPill = React.memo(function InputPill2(props) {
       className
     ),
     disabled,
-    onDelete: isRemovable ? handleDelete : void 0,
+    tabIndex: -1,
+    onClick: isRemovable ? handleDelete : void 0,
     ref,
     role: "option",
-    tabIndex: void 0,
-    variant: isRemovable ? "closable" : "basic",
-    ...restProps
+    ...restProps,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: withBaseName("label"),
+        children: label
+      }),
+      isRemovable && /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
+    ]
   });
 });
 

package/dist-cjs/tokenized-input/internal/InputPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { memo, MutableRefObject, useRef } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { Pill, PillProps } from \"../../pill\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = Omit<\n  PillProps<\"basic\" | \"closable\">,\n  \"variant\" | \"onDelete\" | \"clickable\"\n> & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<{ [index: number]: number | undefined }>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    tabIndex: tabIndexProp,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className\n      )}\n      disabled={disabled}\n      onDelete={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      tabIndex={undefined}\n      variant={isRemovable ? \"closable\" : \"basic\"}\n      {...restProps}\n    />\n  );\n});\n"],"names":["makePrefixer","memo","InputPill","useRef","useIsomorphicLayoutEffect","getWidth","jsx","Pill","clsx"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAgC1C,MAAM,SAAY,GAAAC,UAAA,CAAK,SAASC,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACP,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAMC,aAA8B,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAASC,iBAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAAD,8BAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACGE,cAAA,CAAAC,SAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEL,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,UAAa,GAAA,OAAA;AAAA,IACnC,GAAG,SAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { memo, MutableRefObject, useRef } from \"react\";\nimport {\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n  Pill,\n  PillProps,\n} from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<Record<number, number | undefined>>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Pill label.\n   */\n  label?: string;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    label,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLButtonElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className\n      )}\n      disabled={disabled}\n      tabIndex={-1}\n      onClick={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      {...restProps}\n    >\n      <span className={withBaseName(\"label\")}>{label}</span>\n      {isRemovable && <CloseIcon />}\n    </Pill>\n  );\n});\n"],"names":["makePrefixer","memo","InputPill","useRef","useIsomorphicLayoutEffect","getWidth","jsxs","Pill","clsx","jsx","CloseIcon"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAiC1C,MAAM,SAAY,GAAAC,UAAA,CAAK,SAASC,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAMC,aAAiC,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAASC,iBAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAAD,8BAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACGE,eAAA,CAAAC,SAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACtC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEJ,GAAG,SAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAI,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAC9C,WAAA,mCAAgBC,eAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7B,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Style applied to the root element */\n.saltTokenizedInputNext-container {\n  width: 100%;\n}\n.saltTokenizedInputNext {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);\n  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);\n  --tokenizedInput-border: none;\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--tokenizedInput-background);\n  border: var(--tokenizedInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: 100%;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Style applied on hover */\n.saltTokenizedInputNext:hover {\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--tokenizedInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltTokenizedInputNext:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--tokenizedInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltTokenizedInputNext-primary {\n  --tokenizedInput-background: var(--salt-editable-primary-background);\n  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);\n  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltTokenizedInputNext-secondary {\n  --tokenizedInput-background: var(--salt-editable-secondary-background);\n  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltTokenizedInputNext-error,\n.saltTokenizedInputNext-error:hover {\n  --tokenizedInput-background: var(--salt-status-error-background);\n  --tokenizedInput-background-active: var(--salt-status-error-background);\n  --tokenizedInput-background-hover: var(--salt-status-error-background);\n  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltTokenizedInputNext-warning,\n.saltTokenizedInputNext-warning:hover {\n  --tokenizedInput-background: var(--salt-status-warning-background);\n  --tokenizedInput-background-active: var(--salt-status-warning-background);\n  --tokenizedInput-background-hover: var(--salt-status-warning-background);\n  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltTokenizedInputNext-success,\n.saltTokenizedInputNext-success:hover {\n  --tokenizedInput-background: var(--salt-status-success-background);\n  --tokenizedInput-background-active: var(--salt-status-success-background);\n  --tokenizedInput-background-hover: var(--salt-status-success-background);\n  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltTokenizedInputNext-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  flex-basis: 0;\n  height: var(--salt-text-lineHeight);\n  font: inherit;\n  letter-spacing: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n  min-width: 1px; /* requires a min width to be visible */\n}\n.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {\n  flex-grow: 1;\n  min-width: 4em; /* on expanded, use the same min-width as input*/\n}\n\n/* Style applied to placeholder */\n.saltTokenizedInputNext-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltTokenizedInputNext-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltTokenizedInputNext-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltTokenizedInputNext-focused {\n  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltTokenizedInputNext-readOnly,\n.saltTokenizedInputNext-readOnly:active,\n.saltTokenizedInputNext-readOnly:hover {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltTokenizedInputNext-disabled,\n.saltTokenizedInputNext-disabled:hover,\n.saltTokenizedInputNext-disabled:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltTokenizedInputNext-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltTokenizedInputNext.saltTokenizedInputNext-bordered {\n  --tokenizedInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltTokenizedInputNext-bordered:active,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n.saltTokenizedInputNext-statusAdornment {\n  margin-left: auto;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: auto;\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: 0;\n}\n\n.saltTokenizedInputNext .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {\n  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;\n}\n.saltTokenizedInputNext-hidden {\n  display: none;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TokenizedInputNext.css.js.map

package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedInputNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}