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

package/dist-cjs/pagination/ArrowButton.js

@@ -1,64 +0,0 @@
-'use strict';
-
-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 utils = require('./utils.js');
-
-const contentByType = /* @__PURE__ */ new Map([
-  [
-    "previous",
-    {
-      icon: icons.ChevronLeftIcon,
-      name: "Previous Page",
-      className: utils.withBaseName("previousButton")
-    }
-  ],
-  [
-    "next",
-    {
-      icon: icons.ChevronRightIcon,
-      name: "Next Page",
-      className: utils.withBaseName("nextButton")
-    }
-  ]
-]);
-const ArrowButton = ({
-  arrowButtonType,
-  onPress,
-  onKeyDown: onKeyDownProp,
-  onClick: onClickProp,
-  ...restProps
-}) => {
-  const { icon: Icon, name, className } = contentByType.get(arrowButtonType);
-  const onKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      onPress();
-    }
-    onKeyDownProp && onKeyDownProp(event);
-  };
-  const onClick = (event) => {
-    onPress();
-    onClickProp && onClickProp(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-    ...restProps,
-    variant: "secondary",
-    className: clsx.clsx(utils.withBaseName("arrowButton"), className),
-    role: "link",
-    name,
-    "aria-label": name,
-    onKeyDown,
-    onClick,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
-      "aria-label": name
-    })
-  });
-};
-
-exports.ArrowButton = ArrowButton;
-//# sourceMappingURL=ArrowButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArrowButton.js","sources":["../src/pagination/ArrowButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon, IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, KeyboardEventHandler, MouseEventHandler } from \"react\";\nimport { withBaseName } from \"./utils\";\n\nexport type ArrowButtonType = \"previous\" | \"next\";\n\nexport interface ArrowButtonProps extends ButtonProps {\n  arrowButtonType: ArrowButtonType;\n  onPress: () => void;\n}\n\ninterface ButtonContent {\n  icon: ComponentType<IconProps>;\n  name: string;\n  className: string;\n}\n\nconst contentByType = new Map<ArrowButtonType, ButtonContent>([\n  [\n    \"previous\",\n    {\n      icon: ChevronLeftIcon,\n      name: \"Previous Page\",\n      className: withBaseName(\"previousButton\"),\n    },\n  ],\n  [\n    \"next\",\n    {\n      icon: ChevronRightIcon,\n      name: \"Next Page\",\n      className: withBaseName(\"nextButton\"),\n    },\n  ],\n]);\n\nexport const ArrowButton = ({\n  arrowButtonType,\n  onPress,\n  onKeyDown: onKeyDownProp,\n  onClick: onClickProp,\n  ...restProps\n}: ArrowButtonProps) => {\n  const { icon: Icon, name, className } = contentByType.get(arrowButtonType)!;\n\n  const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      onPress();\n    }\n    onKeyDownProp && onKeyDownProp(event);\n  };\n\n  const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPress();\n    onClickProp && onClickProp(event);\n  };\n\n  return (\n    <Button\n      {...restProps}\n      variant=\"secondary\"\n      className={clsx(withBaseName(\"arrowButton\"), className)}\n      role=\"link\"\n      name={name}\n      aria-label={name}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n    >\n      <Icon aria-label={name} />\n    </Button>\n  );\n};\n"],"names":["ChevronLeftIcon","withBaseName","ChevronRightIcon","jsx","Button","clsx"],"mappings":";;;;;;;;;;AAmBA,MAAM,aAAA,uBAAoB,GAAoC,CAAA;AAAA,EAC5D;AAAA,IACE,UAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAAA,qBAAA;AAAA,MACN,IAAM,EAAA,eAAA;AAAA,MACN,SAAA,EAAWC,mBAAa,gBAAgB,CAAA;AAAA,KAC1C;AAAA,GACF;AAAA,EACA;AAAA,IACE,MAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAAC,sBAAA;AAAA,MACN,IAAM,EAAA,WAAA;AAAA,MACN,SAAA,EAAWD,mBAAa,YAAY,CAAA;AAAA,KACtC;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAEM,MAAM,cAAc,CAAC;AAAA,EAC1B,eAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,OAAS,EAAA,WAAA;AAAA,EACN,GAAA,SAAA;AACL,CAAwB,KAAA;AACtB,EAAM,MAAA,EAAE,MAAM,IAAM,EAAA,IAAA,EAAM,WAAc,GAAA,aAAA,CAAc,IAAI,eAAe,CAAA,CAAA;AAEzE,EAAM,MAAA,SAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAQ,OAAA,EAAA,CAAA;AAAA,KACV;AACA,IAAA,aAAA,IAAiB,cAAc,KAAK,CAAA,CAAA;AAAA,GACtC,CAAA;AAEA,EAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,IAAQ,OAAA,EAAA,CAAA;AACR,IAAA,WAAA,IAAe,YAAY,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAA,uBACGE,cAAA,CAAAC,WAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAAC,SAAA,CAAKJ,kBAAa,CAAA,aAAa,GAAG,SAAS,CAAA;AAAA,IACtD,IAAK,EAAA,MAAA;AAAA,IACL,IAAA;AAAA,IACA,YAAY,EAAA,IAAA;AAAA,IACZ,SAAA;AAAA,IACA,OAAA;AAAA,IAEA,QAAC,kBAAAE,cAAA,CAAA,IAAA,EAAA;AAAA,MAAK,YAAY,EAAA,IAAA;AAAA,KAAM,CAAA;AAAA,GAC1B,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/pagination/CompactControls.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var CompactInput = require('./CompactInput.js');
-var PageButton = require('./PageButton.js');
-var utils = require('./utils.js');
-
-const CompactControls = ({
-  page,
-  count,
-  onPageChange,
-  FormFieldProps: FormFieldProps2
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CompactInput.CompactInput, {
-        page,
-        count,
-        onPageChange,
-        FormFieldProps: FormFieldProps2
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: utils.withBaseName("compactSeparator"),
-        children: "of"
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(PageButton.PageButton, {
-        page: count,
-        onPageChange,
-        disabled: page === count
-      })
-    ]
-  });
-};
-
-exports.CompactControls = CompactControls;
-//# sourceMappingURL=CompactControls.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CompactControls.js","sources":["../src/pagination/CompactControls.tsx"],"sourcesContent":["import { FormFieldLegacyProps as FormFieldProps } from \"../form-field-legacy\";\nimport { CompactInput } from \"./CompactInput\";\nimport { PageButton } from \"./PageButton\";\nimport { withBaseName } from \"./utils\";\n\nexport interface CompactControlsProps {\n  count: number;\n  page: number;\n  onPageChange: (page: number) => void;\n  FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const CompactControls = ({\n  page,\n  count,\n  onPageChange,\n  FormFieldProps,\n}: CompactControlsProps) => {\n  return (\n    <>\n      <CompactInput\n        page={page}\n        count={count}\n        onPageChange={onPageChange}\n        FormFieldProps={FormFieldProps}\n      />\n      <span className={withBaseName(\"compactSeparator\")}>of</span>\n      <PageButton\n        page={count}\n        onPageChange={onPageChange}\n        disabled={page === count}\n      />\n    </>\n  );\n};\n"],"names":["FormFieldProps","jsxs","Fragment","jsx","CompactInput","withBaseName","PageButton"],"mappings":";;;;;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAAA,EAAAA,eAAAA;AACF,CAA4B,KAAA;AAC1B,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,yBAAA,EAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,YAAA;AAAA,QACA,cAAgBJ,EAAAA,eAAAA;AAAA,OAClB,CAAA;AAAA,sBACCG,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAWE,mBAAa,kBAAkB,CAAA;AAAA,QAAG,QAAA,EAAA,IAAA;AAAA,OAAE,CAAA;AAAA,sBACpDF,cAAA,CAAAG,qBAAA,EAAA;AAAA,QACC,IAAM,EAAA,KAAA;AAAA,QACN,YAAA;AAAA,QACA,UAAU,IAAS,KAAA,KAAA;AAAA,OACrB,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/pagination/RegularControls.js

@@ -1,58 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var utils = require('./utils.js');
-var usePagination = require('./usePagination.js');
-var PageButton = require('./PageButton.js');
-
-const Ellipsis = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: utils.withBaseName("ellipsis"),
-    children: `\u2026`
-  });
-};
-const mapRange = (range, fn) => {
-  const result = [];
-  for (let i = range[0]; i <= range[1]; ++i) {
-    result.push(fn(i));
-  }
-  return result;
-};
-function RegularControls({
-  page,
-  count,
-  onPageChange,
-  siblingCount = 2,
-  boundaryCount = 1
-}) {
-  const renderPages = (range, selectedPage) => {
-    if (!range) {
-      return null;
-    }
-    return mapRange(range, (i) => /* @__PURE__ */ jsxRuntime.jsx(PageButton.PageButton, {
-      page: i,
-      isSelected: selectedPage === i,
-      onPageChange
-    }, i));
-  };
-  const [leftPages, middlePages, rightPages] = usePagination.usePagination(
-    page,
-    count,
-    Math.max(1, boundaryCount),
-    siblingCount
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      renderPages(leftPages, page),
-      leftPages && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}),
-      renderPages(middlePages, page),
-      rightPages && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}),
-      renderPages(rightPages, page)
-    ]
-  });
-}
-
-exports.RegularControls = RegularControls;
-//# sourceMappingURL=RegularControls.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RegularControls.js","sources":["../src/pagination/RegularControls.tsx"],"sourcesContent":["import { withBaseName } from \"./utils\";\nimport { PageRange, usePagination } from \"./usePagination\";\nimport { ReactElement } from \"react\";\nimport { PageButton } from \"./PageButton\";\n\nexport interface RegularControlsProps {\n  count: number;\n  page: number;\n  onPageChange: (page: number) => void;\n  boundaryCount?: number;\n  siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n  return <div className={withBaseName(\"ellipsis\")}>{`\\u2026`}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n  const result: ReactElement[] = [];\n  for (let i = range[0]; i <= range[1]; ++i) {\n    result.push(fn(i));\n  }\n  return result;\n};\n\nexport function RegularControls({\n  page,\n  count,\n  onPageChange,\n  siblingCount = 2,\n  boundaryCount = 1,\n}: RegularControlsProps) {\n  const renderPages = (range?: PageRange, selectedPage?: number) => {\n    if (!range) {\n      return null;\n    }\n    return mapRange(range, (i) => (\n      <PageButton\n        key={i}\n        page={i}\n        isSelected={selectedPage === i}\n        onPageChange={onPageChange}\n      />\n    ));\n  };\n\n  const [leftPages, middlePages, rightPages] = usePagination(\n    page,\n    count,\n    Math.max(1, boundaryCount),\n    siblingCount\n  );\n\n  return (\n    <>\n      {renderPages(leftPages, page)}\n      {leftPages && <Ellipsis />}\n      {renderPages(middlePages, page)}\n      {rightPages && <Ellipsis />}\n      {renderPages(rightPages, page)}\n    </>\n  );\n}\n"],"names":["jsx","withBaseName","PageButton","usePagination","jsxs","Fragment"],"mappings":";;;;;;;;;AAaA,MAAM,WAAW,MAAM;AACrB,EAAA,uBAAQA,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAWC,mBAAa,UAAU,CAAA;AAAA,IAAI,QAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GAAS,CAAA,CAAA;AAC7D,CAAA,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC,CAAA;AAChC,EAAA,KAAA,IAAS,IAAI,KAAM,CAAA,CAAA,CAAA,EAAI,KAAK,KAAM,CAAA,CAAA,CAAA,EAAI,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACnB;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA,CAAA;AAClB,CAAyB,EAAA;AACvB,EAAM,MAAA,WAAA,GAAc,CAAC,KAAA,EAAmB,YAA0B,KAAA;AAChE,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AACA,IAAA,OAAO,QAAS,CAAA,KAAA,EAAO,CAAC,CAAA,qBACrBD,cAAA,CAAAE,qBAAA,EAAA;AAAA,MAEC,IAAM,EAAA,CAAA;AAAA,MACN,YAAY,YAAiB,KAAA,CAAA;AAAA,MAC7B,YAAA;AAAA,KAAA,EAHK,CAIP,CACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAAC,2BAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB,YAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACG,QAAA,EAAA;AAAA,MAAA,WAAA,CAAY,WAAW,IAAI,CAAA;AAAA,MAC3B,SAAA,mCAAc,QAAS,EAAA,EAAA,CAAA;AAAA,MACvB,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA,MAC7B,UAAA,mCAAe,QAAS,EAAA,EAAA,CAAA;AAAA,MACxB,WAAA,CAAY,YAAY,IAAI,CAAA;AAAA,KAAA;AAAA,GAC/B,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/pagination/utils.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@salt-ds/core');
-
-const withBaseName = core.makePrefixer("saltPagination");
-
-exports.withBaseName = withBaseName;
-//# sourceMappingURL=utils.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sources":["../src/pagination/utils.ts"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nexport const withBaseName = makePrefixer(\"saltPagination\");\n"],"names":["makePrefixer"],"mappings":";;;;;;AAEa,MAAA,YAAA,GAAeA,kBAAa,gBAAgB;;;;"}

package/dist-cjs/pill/ClosablePill.js

@@ -1,61 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-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');
-
-const deleteKeys = ["Enter", "Delete", "Backspace"];
-const noop = () => void 0;
-const withBaseName = core.makePrefixer(constants.pillBaseName);
-const ClosablePill = React.forwardRef(function ClosablePill2({
-  onDelete,
-  label,
-  disabled,
-  onClick = noop,
-  className,
-  deleteIcon,
-  ...rest
-}, ref) {
-  const [active, setActive] = React.useState(false);
-  const handleKeyDown = React.useCallback((event) => {
-    if (deleteKeys.includes(event.key)) {
-      setActive(true);
-    }
-  }, []);
-  const handleKeyUp = (event) => {
-    setActive(false);
-    if (!disabled && deleteKeys.includes(event.key)) {
-      onDelete == null ? void 0 : onDelete(event);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(PillBase.PillBase, {
-    "aria-roledescription": "Closable Pill",
-    className: clsx.clsx(
-      {
-        [withBaseName("active")]: active
-      },
-      className
-    ),
-    deletable: true,
-    deleteIcon: deleteIcon || /* @__PURE__ */ jsxRuntime.jsx(DeleteButton.DeleteButton, {
-      active,
-      disabled
-    }),
-    disabled,
-    label,
-    onDelete,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    ...rest,
-    ref
-  });
-});
-
-exports.ClosablePill = ClosablePill;
-//# sourceMappingURL=ClosablePill.js.map

package/dist-cjs/pill/ClosablePill.js.map

@@ -1 +0,0 @@
-{"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/pill/Pill.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-actionable-primary-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-actionable-primary-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-actionable-primary-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-actionable-primary-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-actionable-primary-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-actionable-primary-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-actionable-primary-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-actionable-primary-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-actionable-primary-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-actionable-primary-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  --saltButton-background: var(--pill-background);\n  --saltButton-color: var(--pill-text-color);\n  --saltButton-fontSize: var(--pill-fontSize);\n  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);\n  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  --saltButton-minWidth: var(--saltPill-minWidth, 40px);\n}\n\n.saltPill {\n  align-items: center;\n  border-radius: var(--saltPill-borderRadius, 0);\n  display: inline-flex;\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Pill.css.js.map

package/dist-cjs/pill/Pill.css.js.map

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

package/dist-cjs/pill/Pill.js

@@ -1,49 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ClosablePill = require('./ClosablePill.js');
-var PillBase = require('./PillBase.js');
-var SelectablePill = require('./SelectablePill.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-var Pill$1 = require('./Pill.css.js');
-
-const getVariant = (deletable, variantProp) => {
-  if (variantProp) {
-    return variantProp;
-  } else {
-    return deletable !== void 0 ? "closable" : "basic";
-  }
-};
-const Pill = React.forwardRef(function Pill2({ variant: variantProp, ...restProps }, ref) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-pill",
-    css: Pill$1,
-    window: targetWindow
-  });
-  const variant = getVariant(restProps.deletable, variantProp);
-  if (variant === "selectable") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectablePill.SelectablePill, {
-      ...restProps,
-      ref
-    });
-  } else if (variant === "closable") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ClosablePill.ClosablePill, {
-      ...restProps,
-      ref
-    });
-  } else {
-    return /* @__PURE__ */ jsxRuntime.jsx(PillBase.PillBase, {
-      clickable: true,
-      ...restProps,
-      ref
-    });
-  }
-});
-
-exports.Pill = Pill;
-//# sourceMappingURL=Pill.js.map

package/dist-cjs/pill/Pill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactElement } from \"react\";\n\nimport { ClosablePill, ClosablePillProps } from \"./ClosablePill\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\nimport { SelectablePill, SelectablePillProps } from \"./SelectablePill\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport pillCss from \"./Pill.css\";\n\nexport type PillVariant = \"basic\" | \"closable\" | \"selectable\";\n\nexport interface PillVariantProps<T extends PillVariant = \"basic\"> {\n  /**\n   * Determines the variant of pill\n   */\n  variant?: T;\n}\n\n// Generic checks makes sure that incompatiable props like `onChange` can be inferred correctly when using different variants\nexport type PillProps<T extends PillVariant = \"basic\"> = T extends \"closable\"\n  ? ClosablePillProps & PillVariantProps<T>\n  : T extends \"basic\"\n  ? PillBaseProps & PillVariantProps<T>\n  : SelectablePillProps & PillVariantProps<T>;\n\nconst getVariant = (deletable?: boolean, variantProp?: PillVariant) => {\n  if (variantProp) {\n    return variantProp;\n  } else {\n    return deletable !== undefined ? \"closable\" : \"basic\";\n  }\n};\n\nexport const Pill = forwardRef(function Pill(\n  { variant: variantProp, ...restProps }: PillProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\n  const variant = getVariant(restProps.deletable, variantProp);\n  if (variant === \"selectable\") {\n    return <SelectablePill {...(restProps as SelectablePillProps)} ref={ref} />;\n  } else if (variant === \"closable\") {\n    return <ClosablePill {...restProps} ref={ref} />;\n  } else {\n    return <PillBase clickable {...restProps} ref={ref} />;\n  }\n}) as <T extends PillVariant = \"basic\">(\n  p: PillProps<T> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReactElement<PillProps<T>>;\n"],"names":["forwardRef","Pill","useWindow","useComponentCssInjection","pillCss","jsx","SelectablePill","ClosablePill","PillBase"],"mappings":";;;;;;;;;;;;;AA0BA,MAAM,UAAA,GAAa,CAAC,SAAA,EAAqB,WAA8B,KAAA;AACrE,EAAA,IAAI,WAAa,EAAA;AACf,IAAO,OAAA,WAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,SAAA,KAAc,SAAY,UAAa,GAAA,OAAA,CAAA;AAAA,GAChD;AACF,CAAA,CAAA;AAEa,MAAA,IAAA,GAAOA,iBAAW,SAASC,KAAAA,CACtC,EAAE,OAAS,EAAA,WAAA,EAAA,GAAgB,SAAU,EAAA,EACrC,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,OAAU,GAAA,UAAA,CAAW,SAAU,CAAA,SAAA,EAAW,WAAW,CAAA,CAAA;AAC3D,EAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,IAAA,uBAAQC,cAAA,CAAAC,6BAAA,EAAA;AAAA,MAAgB,GAAI,SAAA;AAAA,MAAmC,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAC3E,MAAA,IAAW,YAAY,UAAY,EAAA;AACjC,IAAA,uBAAQD,cAAA,CAAAE,yBAAA,EAAA;AAAA,MAAc,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACzC,MAAA;AACL,IAAA,uBAAQF,cAAA,CAAAG,iBAAA,EAAA;AAAA,MAAS,SAAS,EAAA,IAAA;AAAA,MAAE,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACtD;AACF,CAAC;;;;"}

package/dist-cjs/pill/PillBase.js

@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
-var core = require('@salt-ds/core');
-var DeleteButton = require('./internal/DeleteButton.js');
-var DivButton = require('./internal/DivButton.js');
-var constants = require('./constants.js');
-var Pill = require('./Pill.css.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-
-const useEllipsisIsActive = () => {
-  const labelRef = React.useRef(null);
-  const [showEllipsis, setShowEllipsis] = React.useState(false);
-  core.useIsomorphicLayoutEffect(() => {
-    if (labelRef.current) {
-      setShowEllipsis(
-        labelRef.current.offsetWidth < labelRef.current.scrollWidth
-      );
-    }
-  }, []);
-  return [labelRef, showEllipsis];
-};
-const noop = () => void 0;
-const withBaseName = core.makePrefixer(constants.pillBaseName);
-const PillBase = React.forwardRef(function PillBase2({
-  TooltipProps: TooltipProps2 = {},
-  "aria-roledescription": ariaRoledescription = "Pill",
-  label,
-  className,
-  clickable,
-  disabled,
-  deletable,
-  deleteIcon: deleteIconProp,
-  highlighted,
-  icon,
-  onClick = noop,
-  onDelete,
-  onKeyDown = noop,
-  onKeyUp = noop,
-  ...rest
-}, ref) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-pill",
-    css: Pill,
-    window: targetWindow
-  });
-  const [active, setActive] = React.useState(false);
-  const [labelRef, ellipsis] = useEllipsisIsActive();
-  const clickKeys = ["Enter", " "];
-  const pillIcon = icon && React.isValidElement(icon) ? React.cloneElement(icon, {
-    ...icon.props,
-    className: clsx.clsx(withBaseName("icon"), icon.props.className)
-  }) : icon;
-  const handleKeyDown = (event) => {
-    onKeyDown(event);
-    if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {
-      setActive(true);
-    }
-  };
-  const handleKeyUp = (event) => {
-    onKeyUp(event);
-    setActive(false);
-  };
-  const handleClick = (event) => {
-    onClick(event);
-  };
-  const Component = deletable || clickable ? DivButton.DivButton : "div";
-  const renderDeleteIcon = () => {
-    if (deleteIconProp && React.isValidElement(deleteIconProp)) {
-      return React.cloneElement(deleteIconProp, {
-        className: clsx.clsx(
-          withBaseName(`deleteButton`),
-          deleteIconProp.props.className
-        ),
-        disabled,
-        onClick: onDelete
-      });
-    } else {
-      return /* @__PURE__ */ jsxRuntime.jsx(DeleteButton.DeleteButton, {
-        disabled,
-        onClick: onDelete
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
-    content: label,
-    disabled: !ellipsis && disabled,
-    ...TooltipProps2,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
-      "aria-disabled": disabled || void 0,
-      "aria-roledescription": ariaRoledescription,
-      className: clsx.clsx(
-        withBaseName(),
-        {
-          [withBaseName("clickable")]: clickable,
-          [withBaseName("deletable")]: deletable && !disabled,
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("active")]: active
-        },
-        className
-      ),
-      "data-testid": "pill",
-      onKeyDown: disabled ? void 0 : handleKeyDown,
-      onKeyUp: disabled ? void 0 : handleKeyUp,
-      onClick: disabled ? void 0 : handleClick,
-      role: "button",
-      tabIndex: disabled ? -1 : 0,
-      ref,
-      ...rest,
-      children: [
-        pillIcon || null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: withBaseName("label"),
-          ref: labelRef,
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: withBaseName("innerLabel"),
-            children: label
-          })
-        }),
-        deletable ? renderDeleteIcon() : null
-      ]
-    })
-  });
-});
-
-exports.PillBase = PillBase;
-//# sourceMappingURL=PillBase.js.map

package/dist-cjs/pill/PillBase.js.map

@@ -1 +0,0 @@
-{"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  Tooltip,\n  TooltipProps,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\n\nimport { DeleteButton } from \"./internal/DeleteButton\";\nimport { DivButton } from \"./internal/DivButton\";\nimport { pillBaseName } from \"./constants\";\n\nimport pillCss from \"./Pill.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\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  return (\n    <Tooltip content={label} disabled={!ellipsis && disabled} {...TooltipProps}>\n      <Component\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        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        ref={ref}\n        {...rest}\n      >\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    </Tooltip>\n  );\n});\n"],"names":["useRef","useState","useIsomorphicLayoutEffect","makePrefixer","pillBaseName","forwardRef","PillBase","TooltipProps","useWindow","useComponentCssInjection","pillCss","isValidElement","cloneElement","clsx","DivButton","jsx","DeleteButton","Tooltip","jsxs"],"mappings":"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"}

package/dist-cjs/pill/SelectablePill.js

@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-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');
-
-const noop = () => void 0;
-const withBaseName = core.makePrefixer(constants.pillBaseName);
-const SelectablePill = React.forwardRef(function SelectablePill2({
-  defaultChecked = false,
-  checked: checkedProp,
-  className,
-  onChange = noop,
-  disabled = false,
-  ...rest
-}, ref) {
-  const [checked, setChecked] = core.useControlled({
-    controlled: checkedProp,
-    default: defaultChecked,
-    name: "SelectablePill",
-    state: "checked"
-  });
-  const handleClick = React.useCallback(
-    (event) => {
-      setChecked(!checked);
-      onChange(event, !checked);
-    },
-    [checked, onChange, setChecked]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(PillBase.PillBase, {
-    "aria-checked": checked,
-    "aria-roledescription": "Selectable Pill",
-    clickable: true,
-    disabled,
-    className: clsx.clsx(withBaseName(`selectable`), className, {
-      [withBaseName(`checked`)]: checked
-    }),
-    icon: /* @__PURE__ */ jsxRuntime.jsx(PillCheckbox.PillCheckbox, {
-      checked
-    }),
-    role: "checkbox",
-    onClick: handleClick,
-    ...rest,
-    ref
-  });
-});
-
-exports.SelectablePill = SelectablePill;
-//# sourceMappingURL=SelectablePill.js.map

package/dist-cjs/pill/SelectablePill.js.map

@@ -1 +0,0 @@
-{"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/pill/constants.js

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const pillBaseName = "saltPill";
-
-exports.pillBaseName = pillBaseName;
-//# sourceMappingURL=constants.js.map

package/dist-cjs/pill/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../src/pill/constants.ts"],"sourcesContent":["export const pillBaseName = \"saltPill\";\n"],"names":[],"mappings":";;;;AAAO,MAAM,YAAe,GAAA;;;;"}

package/dist-cjs/pill/internal/DeleteButton.js

@@ -1,37 +0,0 @@
-'use strict';
-
-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 clsx = require('clsx');
-var constants = require('../constants.js');
-
-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: clsx.clsx(
-      withBaseName("deleteButton"),
-      {
-        [withBaseName("deleteButton-disabled")]: disabled,
-        [withBaseName("deleteButton-active")]: active
-      },
-      className
-    ),
-    "data-testid": "pill-delete-button",
-    disabled,
-    onMouseEnter: (event) => event.stopPropagation(),
-    tabIndex: -1,
-    variant: "secondary",
-    ...restProps,
-    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseSmallIcon, {
-      className: withBaseName("deleteIcon")
-    })
-  });
-};
-
-exports.DeleteButton = DeleteButton;
-//# sourceMappingURL=DeleteButton.js.map

package/dist-cjs/pill/internal/DeleteButton.js.map

@@ -1 +0,0 @@
-{"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;;;;"}