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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (458) hide show

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

@@ -6,13 +6,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
-require('../tooltip/Tooltip.js');
-var TooltipContext = require('../tooltip/TooltipContext.js');
-var useTooltip = require('../tooltip/useTooltip.js');
-var constants = require('./constants.js');
 var DeleteButton = require('./internal/DeleteButton.js');
-require('./Pill.css.js');
 var DivButton = require('./internal/DivButton.js');
+var constants = require('./constants.js');
+require('./Pill.css.js');
 const useEllipsisIsActive = () => {
   const labelRef = React.useRef(null);
@@ -45,7 +42,6 @@ const PillBase = React.forwardRef(function PillBase2({
   onKeyUp = noop,
   ...rest
 }, ref) {
-  const { Tooltip, enterDelay, leaveDelay, placement } = TooltipContext.useTooltipContext();
   const [active, setActive] = React.useState(false);
   const [labelRef, ellipsis] = useEllipsisIsActive();
   const clickKeys = ["Enter", " "];
@@ -84,56 +80,44 @@ const PillBase = React.forwardRef(function PillBase2({
       });
     }
   };
-  const { getTriggerProps, getTooltipProps } = useTooltip.useTooltip({
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
+    content: label,
     disabled: !ellipsis && disabled,
-    enterDelay,
-    placement,
-    leaveDelay
-  });
-  const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-    "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,
-    ...rest
-  });
-  const handleRef = core.useForkRef(triggerRef, ref);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
-        ...getTooltipProps({ title: label, ...TooltipProps2 })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Component, {
-        ref: handleRef,
-        ...triggerProps,
-        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
-        ]
-      })
-    ]
+    ...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
+      ]
+    })
   });
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n ReactEventHandler,\n SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { TooltipProps, useTooltip, useTooltipContext } from \"../tooltip\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\n\nimport \"./Pill.css\";\nimport { DivButton } from \"./internal/DivButton\";\n\nconst useEllipsisIsActive = (): [\n MutableRefObject<HTMLDivElement \| null>,\n boolean\n] => {\n const labelRef = useRef<HTMLDivElement \| null>(null);\n const [showEllipsis, setShowEllipsis] = useState(false);\n\n useIsomorphicLayoutEffect(() => {\n if (labelRef.current) {\n setShowEllipsis(\n labelRef.current.offsetWidth < labelRef.current.scrollWidth\n );\n }\n }, []);\n return [labelRef, showEllipsis];\n};\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport interface PillBaseProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Props passed to the tooltip\n /\n TooltipProps?: Partial<TooltipProps>;\n /\n Defines a human-readable, author-localized description for the role of an element.\n \n This should be in favour of aria-label for `Pill`\n /\n \"aria-roledescription\"?: string;\n /\n * Clickable variation. Use 'onClick' for callback.\n /\n clickable?: boolean;\n /\n Shows delete icon. Use `onDelete` for callback.\n /\n deletable?: boolean;\n /\n Override the default delete icon element. Shown only if `deletable` is set.\n /\n // TODO: Should this be DeleteIcon (caps)?\n deleteIcon?: ReactElement;\n /\n If `true`, the pill will be disabled.\n /\n disabled?: boolean;\n /\n Whether the pill is been highlighted.\n * If `true`, the pill will display Tooltip when text within is truncated.\n /\n highlighted?: boolean;\n /\n Icon element.\n /\n // TODO: Should this be Icon (caps)?\n icon?: ReactElement;\n /\n The content of the label.\n /\n label?: string;\n /\n Callback function fired when pill is clicked.\n /\n onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /\n Callback function fired when the delete icon is clicked. Used when `deletable` is true.\n */\n onDelete?: ReactEventHandler<HTMLElement>;\n}\n\nexport const PillBase = forwardRef(function PillBase(\n {\n TooltipProps = {},\n \"aria-roledescription\": ariaRoledescription = \"Pill\",\n label,\n className,\n // New API\n clickable,\n disabled,\n // TODO: Should this be a prop as we have variant: 'closable'\n // New API.\n deletable,\n deleteIcon: deleteIconProp,\n // TODO: Not implemented. Consider to add `useImperativeHandle` like API to Tooltip?\n highlighted,\n icon,\n onClick = noop,\n onDelete,\n onKeyDown = noop,\n onKeyUp = noop,\n ...rest\n }: PillBaseProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n\n const [active, setActive] = useState(false);\n const [labelRef, ellipsis] = useEllipsisIsActive();\n const clickKeys = [\"Enter\", \" \"];\n\n const pillIcon =\n // FIXME: icon type\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n icon && isValidElement<any>(icon)\n ? cloneElement(icon, {\n ...icon.props,\n // FIXME: icon.props is any\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n className: clsx(withBaseName(\"icon\"), icon.props.className),\n })\n : icon;\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown(event);\n if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {\n setActive(true);\n }\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyUp(event);\n setActive(false);\n };\n\n const handleClick = (event: SyntheticEvent<HTMLDivElement, Event>) => {\n onClick(event);\n };\n\n // FIXME: use polymorphic button as div for deletable and clickable cases.\n const Component = deletable \|\| clickable ? DivButton : \"div\";\n\n const renderDeleteIcon = () => {\n // FIXME: deleteIconProp type\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (deleteIconProp && isValidElement<any>(deleteIconProp)) {\n return cloneElement(deleteIconProp, {\n className: clsx(\n withBaseName(`deleteButton`),\n // FIXME: deleteIconProp.props is any\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n deleteIconProp.props.className\n ),\n disabled,\n onClick: onDelete,\n });\n } else {\n return <DeleteButton disabled={disabled} onClick={onDelete} />;\n }\n };\n\n const { getTriggerProps, getTooltipProps } = useTooltip({\n disabled: !ellipsis && disabled,\n enterDelay,\n placement,\n leaveDelay,\n });\n\n const { ref: triggerRef, ...triggerProps } = getTriggerProps<\n typeof Component\n >({\n \"aria-disabled\": disabled \|\| undefined,\n \"aria-roledescription\": ariaRoledescription,\n className: clsx(\n withBaseName(),\n {\n [withBaseName(\"clickable\")]: clickable,\n [withBaseName(\"deletable\")]: deletable && !disabled,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n },\n className\n ),\n // @ts-ignore\n \"data-testid\": \"pill\",\n onKeyDown: disabled ? undefined : handleKeyDown,\n onKeyUp: disabled ? undefined : handleKeyUp,\n onClick: disabled ? undefined : handleClick,\n role: \"button\",\n tabIndex: disabled ? -1 : 0,\n ...rest,\n });\n\n const handleRef = useForkRef(triggerRef, ref);\n\n return (\n <>\n <Tooltip {...getTooltipProps({ title: label, ...TooltipProps })} />\n <Component ref={handleRef} {...triggerProps}>\n {pillIcon \|\| null}\n <div className={withBaseName(\"label\")} ref={labelRef}>\n <span className={withBaseName(\"innerLabel\")}>{label}</span>\n </div>\n {deletable ? renderDeleteIcon() : null}\n </Component>\n </>\n );\n});\n"],"names":["useRef","useState","useIsomorphicLayoutEffect","makePrefixer","pillBaseName","forwardRef","PillBase","TooltipProps","useTooltipContext","isValidElement","cloneElement","clsx","DivButton","jsx","DeleteButton","useTooltip","useForkRef","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;AA2BA,MAAM,sBAAsB,MAGvB;AACH,EAAM,MAAA,QAAA,GAAWA,aAA8B,IAAI,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAEtD,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,SAAS,OAAS,EAAA;AACpB,MAAA,eAAA;AAAA,QACE,QAAS,CAAA,OAAA,CAAQ,WAAc,GAAA,QAAA,CAAS,OAAQ,CAAA,WAAA;AAAA,OAClD,CAAA;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AACL,EAAO,OAAA,CAAC,UAAU,YAAY,CAAA,CAAA;AAChC,CAAA,CAAA;AAEA,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAEnB,MAAM,YAAA,GAAeC,kBAAaC,sBAAY,CAAA,CAAA;AAsDjC,MAAA,QAAA,GAAWC,gBAAW,CAAA,SAASC,SAC1C,CAAA;AAAA,EACE,YAAA,EAAAC,gBAAe,EAAC;AAAA,EAChB,wBAAwB,mBAAsB,GAAA,MAAA;AAAA,EAC9C,KAAA;AAAA,EACA,SAAA;AAAA,EAEA,SAAA;AAAA,EACA,QAAA;AAAA,EAGA,SAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EAEZ,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAU,GAAA,IAAA;AAAA,EACV,QAAA;AAAA,EACA,SAAY,GAAA,IAAA;AAAA,EACZ,OAAU,GAAA,IAAA;AAAA,EACP,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,OAAS,EAAA,UAAA,EAAY,UAAY,EAAA,SAAA,KAAcC,gCAAkB,EAAA,CAAA;AAEzE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIP,eAAS,KAAK,CAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,QAAA,EAAU,QAAQ,CAAA,GAAI,mBAAoB,EAAA,CAAA;AACjD,EAAM,MAAA,SAAA,GAAY,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAE/B,EAAA,MAAM,WAGJ,IAAQ,IAAAQ,oBAAA,CAAoB,IAAI,CAAA,GAC5BC,mBAAa,IAAM,EAAA;AAAA,IACjB,GAAG,IAAK,CAAA,KAAA;AAAA,IAGR,WAAWC,SAAK,CAAA,YAAA,CAAa,MAAM,CAAG,EAAA,IAAA,CAAK,MAAM,SAAS,CAAA;AAAA,GAC3D,CACD,GAAA,IAAA,CAAA;AAEN,EAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AAC9D,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAI,IAAA,CAAC,YAAY,CAAC,SAAA,IAAa,UAAU,OAAQ,CAAA,KAAA,CAAM,GAAG,CAAA,KAAM,CAAI,CAAA,EAAA;AAClE,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAiD,KAAA;AACpE,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,GACf,CAAA;AAGA,EAAM,MAAA,SAAA,GAAY,SAAa,IAAA,SAAA,GAAYC,mBAAY,GAAA,KAAA,CAAA;AAEvD,EAAA,MAAM,mBAAmB,MAAM;AAG7B,IAAI,IAAA,cAAA,IAAkBH,oBAAoB,CAAA,cAAc,CAAG,EAAA;AACzD,MAAA,OAAOC,mBAAa,cAAgB,EAAA;AAAA,QAClC,SAAW,EAAAC,SAAA;AAAA,UACT,aAAa,CAAc,YAAA,CAAA,CAAA;AAAA,UAG3B,eAAe,KAAM,CAAA,SAAA;AAAA,SACvB;AAAA,QACA,QAAA;AAAA,QACA,OAAS,EAAA,QAAA;AAAA,OACV,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,uBAAQE,cAAA,CAAAC,yBAAA,EAAA;AAAA,QAAa,QAAA;AAAA,QAAoB,OAAS,EAAA,QAAA;AAAA,OAAU,CAAA,CAAA;AAAA,KAC9D;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAIC,qBAAW,CAAA;AAAA,IACtD,QAAA,EAAU,CAAC,QAAY,IAAA,QAAA;AAAA,IACvB,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,GAAA,EAAK,UAAe,EAAA,GAAA,YAAA,KAAiB,eAE3C,CAAA;AAAA,IACA,iBAAiB,QAAY,IAAA,KAAA,CAAA;AAAA,IAC7B,sBAAwB,EAAA,mBAAA;AAAA,IACxB,SAAW,EAAAJ,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,aAAa,CAAC,QAAA;AAAA,QAC3C,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IAEA,aAAe,EAAA,MAAA;AAAA,IACf,SAAA,EAAW,WAAW,KAAY,CAAA,GAAA,aAAA;AAAA,IAClC,OAAA,EAAS,WAAW,KAAY,CAAA,GAAA,WAAA;AAAA,IAChC,OAAA,EAAS,WAAW,KAAY,CAAA,GAAA,WAAA;AAAA,IAChC,IAAM,EAAA,QAAA;AAAA,IACN,QAAA,EAAU,WAAW,CAAK,CAAA,GAAA,CAAA;AAAA,IAC1B,GAAG,IAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAYK,eAAW,CAAA,UAAA,EAAY,GAAG,CAAA,CAAA;AAE5C,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACL,cAAA,CAAA,OAAA,EAAA;AAAA,QAAS,GAAG,eAAgB,CAAA,EAAE,OAAO,KAAO,EAAA,GAAGN,eAAc,CAAA;AAAA,OAAG,CAAA;AAAA,sBAChEU,eAAA,CAAA,SAAA,EAAA;AAAA,QAAU,GAAK,EAAA,SAAA;AAAA,QAAY,GAAG,YAAA;AAAA,QAC5B,QAAA,EAAA;AAAA,UAAY,QAAA,IAAA,IAAA;AAAA,0BACZJ,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAG,GAAK,EAAA,QAAA;AAAA,YAC1C,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,cAAI,QAAA,EAAA,KAAA;AAAA,aAAM,CAAA;AAAA,WACtD,CAAA;AAAA,UACC,SAAA,GAAY,kBAAqB,GAAA,IAAA;AAAA,SAAA;AAAA,OACpC,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n ReactEventHandler,\n SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport {\n makePrefixer,\n 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 \"./Pill.css\";\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 [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","isValidElement","cloneElement","clsx","DivButton","jsx","DeleteButton","Tooltip","jsxs"],"mappings":"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"}

package/dist-cjs/packages/lab/src/query-input/internal/CategoryList.js CHANGED Viewed

@@ -10,6 +10,7 @@ require('../../list/ListItem.js');
 var List = require('../../list/List.js');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
+require('../../utils/useFloatingUI.js');
 require('../../responsive/useResizeObserver.js');
 require('../../list/VirtualizedList.js');
 var CategoryListItem = require('./CategoryListItem.js');

package/dist-cjs/packages/lab/src/query-input/internal/CategoryList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoryList.js","sources":["../src/query-input/internal/CategoryList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useRef, useState } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { SelectHandler } from \"../../common-hooks\";\nimport { List } from \"../../list\";\nimport { CategoryListItem } from \"./CategoryListItem\";\nimport { CategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryList\");\n\nexport interface CategoryListProps {\n categories: QueryInputCategory[];\n rootWidth: number;\n onCategorySelect: (category: QueryInputCategory \| null) => void;\n highlightedCategoryIndex?: number;\n setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n}\n\nconst getCategoryLabel = (category: QueryInputCategory) => category.name;\n\nexport function CategoryList(props: CategoryListProps) {\n const {\n categories,\n rootWidth,\n onCategorySelect,\n highlightedCategoryIndex,\n setHighlightedCategoryIndex,\n } = props;\n\n const measureRef = useRef<HTMLDivElement>(null);\n const [measuredCategories, setMeasuredCategories] = useState<\n QueryInputCategory[]\n >([]);\n const [contextValue, setContextValue] = useState<CategoryListContext>({\n width: 0,\n });\n\n useIsomorphicLayoutEffect(() => {\n setTimeout(() => {\n if (measureRef.current) {\n const width = measureRef.current.offsetWidth;\n setMeasuredCategories(categories);\n setContextValue({\n width,\n });\n }\n }, 0);\n }, [categories, setMeasuredCategories, setContextValue]);\n\n const onSelect: SelectHandler<QueryInputCategory> = useCallback(\n (_, item) => {\n onCategorySelect(item);\n },\n [onCategorySelect]\n );\n\n const isMeasuring = measuredCategories !== categories;\n\n if (isMeasuring) {\n return (\n <div ref={measureRef} className={withBaseName(\"categoryWidthMeasure\")}>\n {categories.map((c, i) => {\n return (\n <div key={i} className={withBaseName(\"category\")}>\n {c.name}\n </div>\n );\n })}\n </div>\n );\n }\n\n return (\n <CategoryListContext.Provider value={contextValue}>\n <List<QueryInputCategory>\n ListItem={CategoryListItem}\n data-testid=\"category-list\"\n highlightedIndex={highlightedCategoryIndex}\n itemToString={getCategoryLabel}\n onHighlight={setHighlightedCategoryIndex}\n onSelect={onSelect}\n source={categories}\n width={rootWidth}\n />\n </CategoryListContext.Provider>\n );\n}\n"],"names":["makePrefixer","useRef","useState","useIsomorphicLayoutEffect","useCallback","jsx","CategoryListContext","List","CategoryListItem"],"mappings":"~~;;;;;;;;;;;;;;;;;~~AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAS,CAAA,IAAA,CAAA;AAE7D,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAAC,cAAA,CAElD,EAAE,CAAA,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAA8B,CAAA;AAAA,IACpE,KAAO,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,WAAW,OAAQ,CAAA,WAAA,CAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA,CAAA;AAChC,QAAgB,eAAA,CAAA;AAAA,UACd,KAAA;AAAA,SACD,CAAA,CAAA;AAAA,OACH;AAAA,OACC,CAAC,CAAA,CAAA;AAAA,GACH,EAAA,CAAC,UAAY,EAAA,qBAAA,EAAuB,eAAe,CAAC,CAAA,CAAA;AAEvD,EAAA,MAAM,QAA8C,GAAAC,iBAAA;AAAA,IAClD,CAAC,GAAG,IAAS,KAAA;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAuB,KAAA,UAAA,CAAA;AAE3C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,UAAA;AAAA,MAAY,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,MACjE,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACxB,QAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAY,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAC5C,QAAE,EAAA,CAAA,CAAA,IAAA;AAAA,SAAA,EADK,CAEV,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAAA,cAAA,CAACC,wCAAoB,QAApB,EAAA;AAAA,IAA6B,KAAO,EAAA,YAAA;AAAA,IACnC,QAAC,kBAAAD,cAAA,CAAAE,SAAA,EAAA;AAAA,MACC,QAAU,EAAAC,iCAAA;AAAA,MACV,aAAY,EAAA,eAAA;AAAA,MACZ,gBAAkB,EAAA,wBAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,WAAa,EAAA,2BAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,KAAO,EAAA,SAAA;AAAA,KACT,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"CategoryList.js","sources":["../src/query-input/internal/CategoryList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useRef, useState } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { SelectHandler } from \"../../common-hooks\";\nimport { List } from \"../../list\";\nimport { CategoryListItem } from \"./CategoryListItem\";\nimport { CategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryList\");\n\nexport interface CategoryListProps {\n categories: QueryInputCategory[];\n rootWidth: number;\n onCategorySelect: (category: QueryInputCategory \| null) => void;\n highlightedCategoryIndex?: number;\n setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n}\n\nconst getCategoryLabel = (category: QueryInputCategory) => category.name;\n\nexport function CategoryList(props: CategoryListProps) {\n const {\n categories,\n rootWidth,\n onCategorySelect,\n highlightedCategoryIndex,\n setHighlightedCategoryIndex,\n } = props;\n\n const measureRef = useRef<HTMLDivElement>(null);\n const [measuredCategories, setMeasuredCategories] = useState<\n QueryInputCategory[]\n >([]);\n const [contextValue, setContextValue] = useState<CategoryListContext>({\n width: 0,\n });\n\n useIsomorphicLayoutEffect(() => {\n setTimeout(() => {\n if (measureRef.current) {\n const width = measureRef.current.offsetWidth;\n setMeasuredCategories(categories);\n setContextValue({\n width,\n });\n }\n }, 0);\n }, [categories, setMeasuredCategories, setContextValue]);\n\n const onSelect: SelectHandler<QueryInputCategory> = useCallback(\n (_, item) => {\n onCategorySelect(item);\n },\n [onCategorySelect]\n );\n\n const isMeasuring = measuredCategories !== categories;\n\n if (isMeasuring) {\n return (\n <div ref={measureRef} className={withBaseName(\"categoryWidthMeasure\")}>\n {categories.map((c, i) => {\n return (\n <div key={i} className={withBaseName(\"category\")}>\n {c.name}\n </div>\n );\n })}\n </div>\n );\n }\n\n return (\n <CategoryListContext.Provider value={contextValue}>\n <List<QueryInputCategory>\n ListItem={CategoryListItem}\n data-testid=\"category-list\"\n highlightedIndex={highlightedCategoryIndex}\n itemToString={getCategoryLabel}\n onHighlight={setHighlightedCategoryIndex}\n onSelect={onSelect}\n source={categories}\n width={rootWidth}\n />\n </CategoryListContext.Provider>\n );\n}\n"],"names":["makePrefixer","useRef","useState","useIsomorphicLayoutEffect","useCallback","jsx","CategoryListContext","List","CategoryListItem"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAS,CAAA,IAAA,CAAA;AAE7D,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAAC,cAAA,CAElD,EAAE,CAAA,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAA8B,CAAA;AAAA,IACpE,KAAO,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,WAAW,OAAQ,CAAA,WAAA,CAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA,CAAA;AAChC,QAAgB,eAAA,CAAA;AAAA,UACd,KAAA;AAAA,SACD,CAAA,CAAA;AAAA,OACH;AAAA,OACC,CAAC,CAAA,CAAA;AAAA,GACH,EAAA,CAAC,UAAY,EAAA,qBAAA,EAAuB,eAAe,CAAC,CAAA,CAAA;AAEvD,EAAA,MAAM,QAA8C,GAAAC,iBAAA;AAAA,IAClD,CAAC,GAAG,IAAS,KAAA;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAuB,KAAA,UAAA,CAAA;AAE3C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,UAAA;AAAA,MAAY,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,MACjE,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACxB,QAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAY,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAC5C,QAAE,EAAA,CAAA,CAAA,IAAA;AAAA,SAAA,EADK,CAEV,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAAA,cAAA,CAACC,wCAAoB,QAApB,EAAA;AAAA,IAA6B,KAAO,EAAA,YAAA;AAAA,IACnC,QAAC,kBAAAD,cAAA,CAAAE,SAAA,EAAA;AAAA,MACC,QAAU,EAAAC,iCAAA;AAAA,MACV,aAAY,EAAA,eAAA;AAAA,MACZ,gBAAkB,EAAA,wBAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,WAAa,EAAA,2BAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,KAAO,EAAA,SAAA;AAAA,KACT,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/query-input/internal/CategoryListItem.js CHANGED Viewed

@@ -11,6 +11,7 @@ var ListItem = require('../../list/ListItem.js');
 require('../../list/List.js');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
+require('../../utils/useFloatingUI.js');
 require('../../responsive/useResizeObserver.js');
 require('../../list/VirtualizedList.js');
 var CategoryListContext = require('./CategoryListContext.js');

package/dist-cjs/packages/lab/src/query-input/internal/CategoryListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoryListItem.js","sources":["../src/query-input/internal/CategoryListItem.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { CSSProperties, useMemo, useRef } from \"react\";\nimport { ListItem, ListItemProps, ListItemType } from \"../../list\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { useCategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryListItem\");\n\nexport interface CategoryListItemProps\n extends ListItemProps<QueryInputCategory> {\n category: QueryInputCategory;\n}\n\nexport const CategoryListItem: ListItemType<QueryInputCategory> =\n function CategoryListItem({ item: category, ...props }) {\n const textRef = useRef<HTMLDivElement>(null);\n const context = useCategoryListContext();\n\n const textStyle: CSSProperties = useMemo(\n () => ({\n minWidth: context.width,\n }),\n [context.width]\n );\n\n return (\n <ListItem {...props} label={category?.name}>\n <div ref={textRef} className={withBaseName(\"text\")} style={textStyle}>\n {category?.name}\n </div>\n <div className={withBaseName(\"valuesContainer\")}>\n <span>(</span>\n <span className={withBaseName(\"values\")}>\n {category?.values.join(\", \")}\n </span>\n <span>)</span>\n </div>\n <ChevronRightIcon className={withBaseName(\"chevron\")} />\n </ListItem>\n );\n };\n"],"names":["makePrefixer","CategoryListItem","useRef","useCategoryListContext","useMemo","jsxs","ListItem","jsx","ChevronRightIcon"],"mappings":"~~;;;;;;;;;;;;;;;;;~~AAOA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAOjD,MAAM,mBACX,SAASC,iBAAAA,CAAiB,EAAE,IAAM,EAAA,QAAA,EAAA,GAAa,OAAS,EAAA;AACtD,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAUC,0CAAuB,EAAA,CAAA;AAEvC,EAAA,MAAM,SAA2B,GAAAC,aAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAQ,CAAA,KAAA;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAAC,iBAAA,EAAA;AAAA,IAAU,GAAG,KAAA;AAAA,IAAO,OAAO,QAAU,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,IACpC,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAK,EAAA,OAAA;AAAA,QAAS,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAG,KAAO,EAAA,SAAA;AAAA,QACxD,QAAU,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,OACb,CAAA;AAAA,sBACCF,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QAC5C,QAAA,EAAA;AAAA,0BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACNA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YACnC,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,OAAO,IAAK,CAAA,IAAA,CAAA;AAAA,WACzB,CAAA;AAAA,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,SAAA;AAAA,OACT,CAAA;AAAA,sBACCA,cAAA,CAAAC,sBAAA,EAAA;AAAA,QAAiB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GACxD,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"CategoryListItem.js","sources":["../src/query-input/internal/CategoryListItem.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { CSSProperties, useMemo, useRef } from \"react\";\nimport { ListItem, ListItemProps, ListItemType } from \"../../list\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { useCategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryListItem\");\n\nexport interface CategoryListItemProps\n extends ListItemProps<QueryInputCategory> {\n category: QueryInputCategory;\n}\n\nexport const CategoryListItem: ListItemType<QueryInputCategory> =\n function CategoryListItem({ item: category, ...props }) {\n const textRef = useRef<HTMLDivElement>(null);\n const context = useCategoryListContext();\n\n const textStyle: CSSProperties = useMemo(\n () => ({\n minWidth: context.width,\n }),\n [context.width]\n );\n\n return (\n <ListItem {...props} label={category?.name}>\n <div ref={textRef} className={withBaseName(\"text\")} style={textStyle}>\n {category?.name}\n </div>\n <div className={withBaseName(\"valuesContainer\")}>\n <span>(</span>\n <span className={withBaseName(\"values\")}>\n {category?.values.join(\", \")}\n </span>\n <span>)</span>\n </div>\n <ChevronRightIcon className={withBaseName(\"chevron\")} />\n </ListItem>\n );\n };\n"],"names":["makePrefixer","CategoryListItem","useRef","useCategoryListContext","useMemo","jsxs","ListItem","jsx","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAOjD,MAAM,mBACX,SAASC,iBAAAA,CAAiB,EAAE,IAAM,EAAA,QAAA,EAAA,GAAa,OAAS,EAAA;AACtD,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAUC,0CAAuB,EAAA,CAAA;AAEvC,EAAA,MAAM,SAA2B,GAAAC,aAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAQ,CAAA,KAAA;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAAC,iBAAA,EAAA;AAAA,IAAU,GAAG,KAAA;AAAA,IAAO,OAAO,QAAU,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,IACpC,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAK,EAAA,OAAA;AAAA,QAAS,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAG,KAAO,EAAA,SAAA;AAAA,QACxD,QAAU,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,OACb,CAAA;AAAA,sBACCF,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QAC5C,QAAA,EAAA;AAAA,0BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACNA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YACnC,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,OAAO,IAAK,CAAA,IAAA,CAAA;AAAA,WACzB,CAAA;AAAA,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,SAAA;AAAA,OACT,CAAA;AAAA,sBACCA,cAAA,CAAAC,sBAAA,EAAA;AAAA,QAAiB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GACxD,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/query-input/internal/QueryInputBody.js CHANGED Viewed

@@ -11,6 +11,7 @@ var ToggleButtonGroup = require('../../toggle-button/ToggleButtonGroup.js');
 var TokenizedInput = require('../../tokenized-input/TokenizedInput.js');
 require('../../tokenized-input/TokenizedInputBase.js');
 require('clipboard-copy');
+require('../../utils/useFloatingUI.js');
 require('../../form-field-context/FormFieldContext.js');
 const withBaseName = core.makePrefixer("saltQueryInputBody");

package/dist-cjs/packages/lab/src/query-input/internal/QueryInputBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n Ref,\n SyntheticEvent,\n useMemo,\n} from \"react\";\n\nimport {\n ToggleButton,\n ToggleButtonGroup,\n ToggleButtonGroupChangeEventHandler,\n} from \"../../toggle-button\";\nimport {\n ChangeHandler,\n StringToItem,\n TokenizedInput,\n} from \"../../tokenized-input\";\nimport { QueryInputItem } from \"../queryInputTypes\";\nimport { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n inputRef: Ref<HTMLInputElement>;\n disabled?: boolean;\n showCategory?: boolean;\n selectedItems: QueryInputItem[];\n onBlur: FocusEventHandler<HTMLInputElement>;\n onFocus: FocusEventHandler<HTMLInputElement>;\n onInputFocus: FocusEventHandler<HTMLInputElement>;\n onInputBlur: FocusEventHandler<HTMLInputElement>;\n onInputClick: (event: SyntheticEvent) => void;\n onInputClear: () => void;\n inputValue?: string;\n onInputChange: ChangeEventHandler<HTMLInputElement>;\n isFocused?: boolean;\n onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n onKeyDown: KeyboardEventHandler<HTMLInputElement \| HTMLButtonElement>;\n booleanOperator: BooleanOperator;\n onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n function QueryInputBody(props, ref) {\n const {\n inputRef,\n disabled,\n selectedItems,\n onInputFocus,\n onInputBlur,\n showCategory,\n inputValue,\n onInputChange,\n isFocused,\n onInputClear,\n onSelectedItemsChange,\n onKeyDown,\n onInputClick,\n booleanOperator,\n onBooleanOperatorChange,\n } = props;\n\n const itemToString = useMemo(() => {\n if (showCategory) {\n return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n }\n return (item: QueryInputItem) => item.value;\n }, [showCategory]);\n\n const stringToItem: StringToItem<QueryInputItem> = (\n selectedItems,\n value\n ) => {\n return {\n category: null,\n value,\n };\n };\n\n const onChange: ToggleButtonGroupChangeEventHandler = (event, index) => {\n const newBooleanOperator = index === 0 ? \"and\" : \"or\";\n onBooleanOperatorChange(newBooleanOperator);\n };\n\n return (\n <div ref={ref} className={withBaseName()}>\n <FilterIcon />\n <TokenizedInput\n inputRef={inputRef}\n disabled={disabled}\n className={withBaseName(\"input\")}\n selectedItems={selectedItems}\n itemToString={itemToString as any}\n stringToItem={stringToItem as any}\n onInputFocus={onInputFocus}\n onInputBlur={onInputBlur}\n value={inputValue}\n onClick={onInputClick}\n onInputChange={onInputChange}\n expanded={isFocused}\n onClear={onInputClear}\n onChange={onSelectedItemsChange as any}\n onKeyDown={onKeyDown}\n />\n <div className={withBaseName(\"separator\")} />\n <ToggleButtonGroup\n variant=\"secondary\"\n className={withBaseName(\"buttonGroup\")}\n data-testid=\"boolean-selector\"\n selectedIndex={booleanOperator === \"and\" ? 0 : 1}\n onChange={onChange}\n >\n <ToggleButton value=\"and\">And</ToggleButton>\n <ToggleButton value=\"or\">Or</ToggleButton>\n </ToggleButtonGroup>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","QueryInputBody","useMemo","selectedItems","jsxs","jsx","FilterIcon","TokenizedInput","ToggleButtonGroup","ToggleButton"],"mappings":"~~;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n Ref,\n SyntheticEvent,\n useMemo,\n} from \"react\";\n\nimport {\n ToggleButton,\n ToggleButtonGroup,\n ToggleButtonGroupChangeEventHandler,\n} from \"../../toggle-button\";\nimport {\n ChangeHandler,\n StringToItem,\n TokenizedInput,\n} from \"../../tokenized-input\";\nimport { QueryInputItem } from \"../queryInputTypes\";\nimport { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n inputRef: Ref<HTMLInputElement>;\n disabled?: boolean;\n showCategory?: boolean;\n selectedItems: QueryInputItem[];\n onBlur: FocusEventHandler<HTMLInputElement>;\n onFocus: FocusEventHandler<HTMLInputElement>;\n onInputFocus: FocusEventHandler<HTMLInputElement>;\n onInputBlur: FocusEventHandler<HTMLInputElement>;\n onInputClick: (event: SyntheticEvent) => void;\n onInputClear: () => void;\n inputValue?: string;\n onInputChange: ChangeEventHandler<HTMLInputElement>;\n isFocused?: boolean;\n onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n onKeyDown: KeyboardEventHandler<HTMLInputElement \| HTMLButtonElement>;\n booleanOperator: BooleanOperator;\n onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n function QueryInputBody(props, ref) {\n const {\n inputRef,\n disabled,\n selectedItems,\n onInputFocus,\n onInputBlur,\n showCategory,\n inputValue,\n onInputChange,\n isFocused,\n onInputClear,\n onSelectedItemsChange,\n onKeyDown,\n onInputClick,\n booleanOperator,\n onBooleanOperatorChange,\n } = props;\n\n const itemToString = useMemo(() => {\n if (showCategory) {\n return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n }\n return (item: QueryInputItem) => item.value;\n }, [showCategory]);\n\n const stringToItem: StringToItem<QueryInputItem> = (\n selectedItems,\n value\n ) => {\n return {\n category: null,\n value,\n };\n };\n\n const onChange: ToggleButtonGroupChangeEventHandler = (event, index) => {\n const newBooleanOperator = index === 0 ? \"and\" : \"or\";\n onBooleanOperatorChange(newBooleanOperator);\n };\n\n return (\n <div ref={ref} className={withBaseName()}>\n <FilterIcon />\n <TokenizedInput\n inputRef={inputRef}\n disabled={disabled}\n className={withBaseName(\"input\")}\n selectedItems={selectedItems}\n itemToString={itemToString as any}\n stringToItem={stringToItem as any}\n onInputFocus={onInputFocus}\n onInputBlur={onInputBlur}\n value={inputValue}\n onClick={onInputClick}\n onInputChange={onInputChange}\n expanded={isFocused}\n onClear={onInputClear}\n onChange={onSelectedItemsChange as any}\n onKeyDown={onKeyDown}\n />\n <div className={withBaseName(\"separator\")} />\n <ToggleButtonGroup\n variant=\"secondary\"\n className={withBaseName(\"buttonGroup\")}\n data-testid=\"boolean-selector\"\n selectedIndex={booleanOperator === \"and\" ? 0 : 1}\n onChange={onChange}\n >\n <ToggleButton value=\"and\">And</ToggleButton>\n <ToggleButton value=\"or\">Or</ToggleButton>\n </ToggleButtonGroup>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","QueryInputBody","useMemo","selectedItems","jsxs","jsx","FilterIcon","TokenizedInput","ToggleButtonGroup","ToggleButton"],"mappings":"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"}

package/dist-cjs/packages/lab/src/query-input/internal/SearchList.js CHANGED Viewed

@@ -11,6 +11,7 @@ var List = require('../../list/List.js');
 var ListItemGroup = require('../../list/ListItemGroup.js');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
+require('../../utils/useFloatingUI.js');
 require('../../responsive/useResizeObserver.js');
 require('../../list/VirtualizedList.js');
 require('../QueryInput.css.js');

package/dist-cjs/packages/lab/src/query-input/internal/SearchList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchList.js","sources":["../src/query-input/internal/SearchList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { List, ListItem, ListItemGroup } from \"../../list\";\n\nimport { SelectionChangeHandler } from \"../../common-hooks\";\n\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport \"../QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputSearchList\");\n\nexport interface SearchListProps {\n inputValue?: string;\n selectedItems?: QueryInputItem[];\n onChange: (items: QueryInputItem[]) => void;\n rootWidth: number;\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n}\n\nfunction itemToString(item: QueryInputItem) {\n return [item.category, item.value].join(\": \");\n}\n\nexport function SearchList(props: SearchListProps) {\n const {\n inputValue,\n selectedItems,\n onChange: onChangeProp,\n rootWidth,\n highlightedIndex,\n setHighlightedIndex,\n visibleCategories,\n } = props;\n\n const onChange: SelectionChangeHandler<QueryInputItem, \"multiple\"> =\n useCallback(\n (event, items) => {\n onChangeProp(items \|\| []);\n },\n [onChangeProp]\n );\n\n return (\n <List\n checkable={false}\n data-testid=\"search-list\"\n highlightedIndex={highlightedIndex}\n itemTextHighlightPattern={inputValue}\n itemToString={itemToString}\n onHighlight={setHighlightedIndex}\n onSelectionChange={onChange}\n selectionStrategy=\"multiple\"\n selected={selectedItems}\n width={rootWidth}\n >\n {visibleCategories.map((inputCategory: QueryInputCategory) => {\n return (\n <ListItemGroup key={inputCategory.name} label={inputCategory.name}>\n {inputCategory.values.map((label) => (\n <ListItem key={label} label={label} />\n ))}\n </ListItemGroup>\n );\n })}\n <ListItem className={withBaseName(\"addKeyword\")}>\n {`Add keyword: \"${inputValue}\"`}\n </ListItem>\n </List>\n );\n}\n"],"names":["makePrefixer","useCallback","jsxs","List","jsx","ListItemGroup","ListItem"],"mappings":"~~;;;;;;;;;;;;;;;;;~~AASA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAY5D,SAAS,aAAa,IAAsB,EAAA;AAC1C,EAAA,OAAO,CAAC,IAAK,CAAA,QAAA,EAAU,KAAK,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAC9C,CAAA;AAEO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,iBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,QACJ,GAAAC,iBAAA;AAAA,IACE,CAAC,OAAO,KAAU,KAAA;AAChB,MAAa,YAAA,CAAA,KAAA,IAAS,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEF,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IACC,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,aAAA;AAAA,IACZ,gBAAA;AAAA,IACA,wBAA0B,EAAA,UAAA;AAAA,IAC1B,YAAA;AAAA,IACA,WAAa,EAAA,mBAAA;AAAA,IACb,iBAAmB,EAAA,QAAA;AAAA,IACnB,iBAAkB,EAAA,UAAA;AAAA,IAClB,QAAU,EAAA,aAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IAEN,QAAA,EAAA;AAAA,MAAkB,iBAAA,CAAA,GAAA,CAAI,CAAC,aAAsC,KAAA;AAC5D,QAAA,uBACGC,cAAA,CAAAC,2BAAA,EAAA;AAAA,UAAuC,OAAO,aAAc,CAAA,IAAA;AAAA,UAC1D,QAAc,EAAA,aAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,0BACxBD,cAAA,CAAAE,iBAAA,EAAA;AAAA,YAAqB,KAAA;AAAA,WAAA,EAAP,KAAqB,CACrC,CAAA;AAAA,SAAA,EAHiB,cAAc,IAIlC,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,sBACAF,cAAA,CAAAE,iBAAA,EAAA;AAAA,QAAS,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,QAC3C,QAAiB,EAAA,CAAA,cAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SearchList.js","sources":["../src/query-input/internal/SearchList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { List, ListItem, ListItemGroup } from \"../../list\";\n\nimport { SelectionChangeHandler } from \"../../common-hooks\";\n\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport \"../QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputSearchList\");\n\nexport interface SearchListProps {\n inputValue?: string;\n selectedItems?: QueryInputItem[];\n onChange: (items: QueryInputItem[]) => void;\n rootWidth: number;\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n}\n\nfunction itemToString(item: QueryInputItem) {\n return [item.category, item.value].join(\": \");\n}\n\nexport function SearchList(props: SearchListProps) {\n const {\n inputValue,\n selectedItems,\n onChange: onChangeProp,\n rootWidth,\n highlightedIndex,\n setHighlightedIndex,\n visibleCategories,\n } = props;\n\n const onChange: SelectionChangeHandler<QueryInputItem, \"multiple\"> =\n useCallback(\n (event, items) => {\n onChangeProp(items \|\| []);\n },\n [onChangeProp]\n );\n\n return (\n <List\n checkable={false}\n data-testid=\"search-list\"\n highlightedIndex={highlightedIndex}\n itemTextHighlightPattern={inputValue}\n itemToString={itemToString}\n onHighlight={setHighlightedIndex}\n onSelectionChange={onChange}\n selectionStrategy=\"multiple\"\n selected={selectedItems}\n width={rootWidth}\n >\n {visibleCategories.map((inputCategory: QueryInputCategory) => {\n return (\n <ListItemGroup key={inputCategory.name} label={inputCategory.name}>\n {inputCategory.values.map((label) => (\n <ListItem key={label} label={label} />\n ))}\n </ListItemGroup>\n );\n })}\n <ListItem className={withBaseName(\"addKeyword\")}>\n {`Add keyword: \"${inputValue}\"`}\n </ListItem>\n </List>\n );\n}\n"],"names":["makePrefixer","useCallback","jsxs","List","jsx","ListItemGroup","ListItem"],"mappings":";;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAY5D,SAAS,aAAa,IAAsB,EAAA;AAC1C,EAAA,OAAO,CAAC,IAAK,CAAA,QAAA,EAAU,KAAK,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAC9C,CAAA;AAEO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,iBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,QACJ,GAAAC,iBAAA;AAAA,IACE,CAAC,OAAO,KAAU,KAAA;AAChB,MAAa,YAAA,CAAA,KAAA,IAAS,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEF,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IACC,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,aAAA;AAAA,IACZ,gBAAA;AAAA,IACA,wBAA0B,EAAA,UAAA;AAAA,IAC1B,YAAA;AAAA,IACA,WAAa,EAAA,mBAAA;AAAA,IACb,iBAAmB,EAAA,QAAA;AAAA,IACnB,iBAAkB,EAAA,UAAA;AAAA,IAClB,QAAU,EAAA,aAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IAEN,QAAA,EAAA;AAAA,MAAkB,iBAAA,CAAA,GAAA,CAAI,CAAC,aAAsC,KAAA;AAC5D,QAAA,uBACGC,cAAA,CAAAC,2BAAA,EAAA;AAAA,UAAuC,OAAO,aAAc,CAAA,IAAA;AAAA,UAC1D,QAAc,EAAA,aAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,0BACxBD,cAAA,CAAAE,iBAAA,EAAA;AAAA,YAAqB,KAAA;AAAA,WAAA,EAAP,KAAqB,CACrC,CAAA;AAAA,SAAA,EAHiB,cAAc,IAIlC,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,sBACAF,cAAA,CAAAE,iBAAA,EAAA;AAAA,QAAS,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,QAC3C,QAAiB,EAAA,CAAA,cAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/query-input/internal/ValueList.js CHANGED Viewed

@@ -11,6 +11,7 @@ var List = require('../../list/List.js');
 require('react');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
+require('../../utils/useFloatingUI.js');
 require('../../responsive/useResizeObserver.js');
 require('../../list/VirtualizedList.js');

package/dist-cjs/packages/lab/src/query-input/internal/ValueList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { QueryInputCategory } from \"../queryInputTypes\";\nimport { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon } from \"@salt-ds/icons\";\nimport { List, ListItem } from \"../../list\";\nimport { SelectHandler } from \"../../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n category: QueryInputCategory \| null;\n rootWidth: number;\n onBack: () => void;\n selectedValues: string[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n highlightedValueIndex?: number;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n const {\n category,\n rootWidth,\n onBack,\n selectedValues,\n onValueToggle,\n highlightedValueIndex,\n setHighlightedValueIndex,\n } = props;\n\n const handleSelect: SelectHandler = (_, value: string) => {\n onValueToggle(category!, value);\n };\n\n const items: ReactElement[] = category\n ? category.values.map((value) => (\n <ListItem key={value} item={value}>\n {value}\n </ListItem>\n ))\n : [];\n\n return (\n <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n <List\n borderless={true}\n checkable={false}\n highlightedIndex={highlightedValueIndex}\n onHighlight={setHighlightedValueIndex}\n onSelect={handleSelect}\n selectionStrategy=\"multiple\"\n selected={selectedValues}\n width={rootWidth}\n >\n <ListItem\n className={withBaseName(\"back\")}\n onClick={onBack}\n selectable={false}\n >\n <ChevronLeftIcon />\n <div className={withBaseName(\"category\")}>\n {category ? category.name : \"\"}\n </div>\n </ListItem>\n {items}\n </List>\n </div>\n );\n}\n"],"names":["makePrefixer","jsx","ListItem","jsxs","List","ChevronLeftIcon"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAOA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA,CAAA;AAYpD,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,wBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAkB,KAAA;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,QAAwB,QAC1B,GAAA,QAAA,CAAS,OAAO,GAAI,CAAA,CAAC,0BAClBC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IAAqB,IAAM,EAAA,KAAA;AAAA,IACzB,QAAA,EAAA,KAAA;AAAA,GADY,EAAA,KAEf,CACD,CAAA,GACD,EAAC,CAAA;AAEL,EAAA,uBACGD,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,QAAU,EAAA,CAAA;AAAA,IAAG,aAAY,EAAA,YAAA;AAAA,IACvD,QAAC,kBAAAE,eAAA,CAAAC,SAAA,EAAA;AAAA,MACC,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,KAAA;AAAA,MACX,gBAAkB,EAAA,qBAAA;AAAA,MAClB,WAAa,EAAA,wBAAA;AAAA,MACb,QAAU,EAAA,YAAA;AAAA,MACV,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAACD,eAAA,CAAAD,iBAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAACI,qBAAgB,EAAA,EAAA,CAAA;AAAA,4BAChBJ,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cACpC,QAAA,EAAA,QAAA,GAAW,SAAS,IAAO,GAAA,EAAA;AAAA,aAC9B,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { QueryInputCategory } from \"../queryInputTypes\";\nimport { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon } from \"@salt-ds/icons\";\nimport { List, ListItem } from \"../../list\";\nimport { SelectHandler } from \"../../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n category: QueryInputCategory \| null;\n rootWidth: number;\n onBack: () => void;\n selectedValues: string[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n highlightedValueIndex?: number;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n const {\n category,\n rootWidth,\n onBack,\n selectedValues,\n onValueToggle,\n highlightedValueIndex,\n setHighlightedValueIndex,\n } = props;\n\n const handleSelect: SelectHandler = (_, value: string) => {\n onValueToggle(category!, value);\n };\n\n const items: ReactElement[] = category\n ? category.values.map((value) => (\n <ListItem key={value} item={value}>\n {value}\n </ListItem>\n ))\n : [];\n\n return (\n <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n <List\n borderless={true}\n checkable={false}\n highlightedIndex={highlightedValueIndex}\n onHighlight={setHighlightedValueIndex}\n onSelect={handleSelect}\n selectionStrategy=\"multiple\"\n selected={selectedValues}\n width={rootWidth}\n >\n <ListItem\n className={withBaseName(\"back\")}\n onClick={onBack}\n selectable={false}\n >\n <ChevronLeftIcon />\n <div className={withBaseName(\"category\")}>\n {category ? category.name : \"\"}\n </div>\n </ListItem>\n {items}\n </List>\n </div>\n );\n}\n"],"names":["makePrefixer","jsx","ListItem","jsxs","List","ChevronLeftIcon"],"mappings":";;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA,CAAA;AAYpD,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,wBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAkB,KAAA;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,QAAwB,QAC1B,GAAA,QAAA,CAAS,OAAO,GAAI,CAAA,CAAC,0BAClBC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IAAqB,IAAM,EAAA,KAAA;AAAA,IACzB,QAAA,EAAA,KAAA;AAAA,GADY,EAAA,KAEf,CACD,CAAA,GACD,EAAC,CAAA;AAEL,EAAA,uBACGD,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,QAAU,EAAA,CAAA;AAAA,IAAG,aAAY,EAAA,YAAA;AAAA,IACvD,QAAC,kBAAAE,eAAA,CAAAC,SAAA,EAAA;AAAA,MACC,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,KAAA;AAAA,MACX,gBAAkB,EAAA,qBAAA;AAAA,MAClB,WAAa,EAAA,wBAAA;AAAA,MACb,QAAU,EAAA,YAAA;AAAA,MACV,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAACD,eAAA,CAAAD,iBAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAACI,qBAAgB,EAAA,EAAA,CAAA;AAAA,4BAChBJ,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cACpC,QAAA,EAAA,QAAA,GAAW,SAAS,IAAO,GAAA,EAAA;AAAA,aAC9B,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/query-input/internal/ValueSelector.js CHANGED Viewed

@@ -8,10 +8,9 @@ var React = require('react');
 var CategoryList = require('./CategoryList.js');
 var SearchList = require('./SearchList.js');
 var ValueList = require('./ValueList.js');
+var Portal = require('../../portal/Portal.js');
 var WindowContext = require('../../window/WindowContext.js');
 require('../../window/ElectronWindow.js');
-var useFloatingUI = require('../../popper/useFloatingUI.js');
-var Portal = require('../../portal/Portal.js');
 const withBaseName = core.makePrefixer("saltQueryInputValueSelector");
 function ValueSelector(props) {
@@ -76,7 +75,7 @@ function ValueSelector(props) {
     });
   };
   const Window = WindowContext.useWindow();
-  const { reference, floating, x, y, strategy } = useFloatingUI.useFloatingUI({
+  const { reference, floating, x, y, strategy } = core.useFloatingUI({
     placement: "bottom"
   });
   const handleRef = core.useForkRef(floating, popperRef);

package/dist-cjs/packages/lab/src/query-input/internal/ValueSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { Dispatch, Ref, SetStateAction, useMemo } from \"react\";\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport { CategoryList } from \"./CategoryList\";\nimport { SearchList } from \"./SearchList\";\nimport { ValueList } from \"./ValueList\";\nimport { ~~useWindow~~ } from \"../../~~window~~\";\nimport { ~~useFloatingUI~~ } from \"../../~~popper~~\";\~~nimport { Portal } from \"../../portal\";\~~n\nconst withBaseName = makePrefixer(\"saltQueryInputValueSelector\");\n\nexport interface ValueSelectorProps {\n isOpen: boolean;\n anchorElement: HTMLElement \| null;\n popperRef: Ref<HTMLDivElement>;\n\n inputValue?: string;\n categories: QueryInputCategory[];\n selectedCategory: QueryInputCategory \| null;\n onSelectedCategoryChange: (category: QueryInputCategory \| null) => void;\n\n width: number;\n selectedItems: QueryInputItem[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n onSearchListChange: (items: QueryInputItem[]) => void;\n\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n\n highlightedCategoryIndex?: number;\n highlightedValueIndex?: number;\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueSelector(props: ValueSelectorProps) {\n const {\n isOpen,\n inputValue,\n anchorElement,\n popperRef,\n categories,\n selectedCategory,\n onSelectedCategoryChange,\n width,\n selectedItems,\n onValueToggle,\n highlightedIndex,\n visibleCategories,\n highlightedCategoryIndex,\n highlightedValueIndex,\n onSearchListChange,\n setHighlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedIndex,\n } = props;\n\n const selectedCategoryValues = useMemo(() => {\n if (!selectedCategory) {\n return [];\n }\n return selectedItems\n .filter((item) => item.category === selectedCategory.name)\n .map(({ value }) => value);\n }, [selectedCategory, selectedItems]);\n\n const onBackToCategories = () => {\n onSelectedCategoryChange(null);\n };\n\n const renderContent = () => {\n if (inputValue) {\n return (\n <SearchList\n inputValue={inputValue}\n selectedItems={selectedItems}\n onChange={onSearchListChange}\n rootWidth={width}\n highlightedIndex={highlightedIndex}\n visibleCategories={visibleCategories}\n setHighlightedIndex={setHighlightedIndex}\n />\n );\n }\n\n if (!selectedCategory) {\n return (\n <CategoryList\n categories={categories}\n rootWidth={width}\n onCategorySelect={onSelectedCategoryChange}\n highlightedCategoryIndex={highlightedCategoryIndex}\n setHighlightedCategoryIndex={setHighlightedCategoryIndex}\n />\n );\n }\n\n return (\n <ValueList\n category={selectedCategory}\n rootWidth={width}\n onBack={onBackToCategories}\n selectedValues={selectedCategoryValues}\n onValueToggle={onValueToggle}\n highlightedValueIndex={highlightedValueIndex}\n setHighlightedValueIndex={setHighlightedValueIndex}\n />\n );\n };\n\n const Window = useWindow();\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement: \"bottom\",\n });\n const handleRef = useForkRef<HTMLDivElement>(floating, popperRef);\n useIsomorphicLayoutEffect(() => {\n if (anchorElement) {\n reference(anchorElement);\n }\n }, [reference, anchorElement]);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <Portal>\n <Window\n style={{\n top: y ?? \"\",\n left: x ?? \"\",\n position: strategy,\n }}\n ref={handleRef}\n >\n <div className={withBaseName(\"content\")}>{renderContent()}</div>\n </Window>\n </Portal>\n );\n}\n"],"names":["makePrefixer","useMemo","jsx","SearchList","CategoryList","ValueList","useWindow","useFloatingUI","useForkRef","useIsomorphicLayoutEffect","Portal"],"mappings":"~~;;;;;;;;;;;;;;;~~AAcA,MAAM,YAAA,GAAeA,kBAAa,6BAA6B,CAAA,CAAA;AA2BxD,SAAS,cAAc,KAA2B,EAAA;AACvD,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,wBAAA;AAAA,IACA,qBAAA;AAAA,IACA,kBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,IACA,mBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,sBAAA,GAAyBC,cAAQ,MAAM;AAC3C,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AACA,IAAA,OAAO,aACJ,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,KAAK,QAAa,KAAA,gBAAA,CAAiB,IAAI,CAAA,CACxD,GAAI,CAAA,CAAC,EAAE,KAAA,OAAY,KAAK,CAAA,CAAA;AAAA,GAC1B,EAAA,CAAC,gBAAkB,EAAA,aAAa,CAAC,CAAA,CAAA;AAEpC,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAA,wBAAA,CAAyB,IAAI,CAAA,CAAA;AAAA,GAC/B,CAAA;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,QACC,UAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAU,EAAA,kBAAA;AAAA,QACV,SAAW,EAAA,KAAA;AAAA,QACX,gBAAA;AAAA,QACA,iBAAA;AAAA,QACA,mBAAA;AAAA,OACF,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,uBACGD,cAAA,CAAAE,yBAAA,EAAA;AAAA,QACC,UAAA;AAAA,QACA,SAAW,EAAA,KAAA;AAAA,QACX,gBAAkB,EAAA,wBAAA;AAAA,QAClB,wBAAA;AAAA,QACA,2BAAA;AAAA,OACF,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACGF,cAAA,CAAAG,mBAAA,EAAA;AAAA,MACC,QAAU,EAAA,gBAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,MAAQ,EAAA,kBAAA;AAAA,MACR,cAAgB,EAAA,sBAAA;AAAA,MAChB,aAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,MAAM,SAASC,uBAAU,EAAA,CAAA;AACzB,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,GAAG,CAAG,EAAA,QAAA,KAAaC,~~2BAAc~~,CAAA;AAAA,IAC5D,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA,CAAA;AACD,EAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,QAAA,EAAU,SAAS,CAAA,CAAA;AAChE,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,SAAA,CAAU,aAAa,CAAA,CAAA;AAAA,KACzB;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,aAAa,CAAC,CAAA,CAAA;AAE7B,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGP,cAAA,CAAAQ,aAAA,EAAA;AAAA,IACC,QAAC,kBAAAR,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MAEL,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAI,QAAc,EAAA,aAAA,EAAA;AAAA,OAAE,CAAA;AAAA,KAC5D,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { Dispatch, Ref, SetStateAction, useMemo } from \"react\";\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport { CategoryList } from \"./CategoryList\";\nimport { SearchList } from \"./SearchList\";\nimport { ValueList } from \"./ValueList\";\nimport { Portal } from \"../../portal\";\nimport { useWindow } from \"../../window\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueSelector\");\n\nexport interface ValueSelectorProps {\n isOpen: boolean;\n anchorElement: HTMLElement \| null;\n popperRef: Ref<HTMLDivElement>;\n\n inputValue?: string;\n categories: QueryInputCategory[];\n selectedCategory: QueryInputCategory \| null;\n onSelectedCategoryChange: (category: QueryInputCategory \| null) => void;\n\n width: number;\n selectedItems: QueryInputItem[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n onSearchListChange: (items: QueryInputItem[]) => void;\n\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n\n highlightedCategoryIndex?: number;\n highlightedValueIndex?: number;\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueSelector(props: ValueSelectorProps) {\n const {\n isOpen,\n inputValue,\n anchorElement,\n popperRef,\n categories,\n selectedCategory,\n onSelectedCategoryChange,\n width,\n selectedItems,\n onValueToggle,\n highlightedIndex,\n visibleCategories,\n highlightedCategoryIndex,\n highlightedValueIndex,\n onSearchListChange,\n setHighlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedIndex,\n } = props;\n\n const selectedCategoryValues = useMemo(() => {\n if (!selectedCategory) {\n return [];\n }\n return selectedItems\n .filter((item) => item.category === selectedCategory.name)\n .map(({ value }) => value);\n }, [selectedCategory, selectedItems]);\n\n const onBackToCategories = () => {\n onSelectedCategoryChange(null);\n };\n\n const renderContent = () => {\n if (inputValue) {\n return (\n <SearchList\n inputValue={inputValue}\n selectedItems={selectedItems}\n onChange={onSearchListChange}\n rootWidth={width}\n highlightedIndex={highlightedIndex}\n visibleCategories={visibleCategories}\n setHighlightedIndex={setHighlightedIndex}\n />\n );\n }\n\n if (!selectedCategory) {\n return (\n <CategoryList\n categories={categories}\n rootWidth={width}\n onCategorySelect={onSelectedCategoryChange}\n highlightedCategoryIndex={highlightedCategoryIndex}\n setHighlightedCategoryIndex={setHighlightedCategoryIndex}\n />\n );\n }\n\n return (\n <ValueList\n category={selectedCategory}\n rootWidth={width}\n onBack={onBackToCategories}\n selectedValues={selectedCategoryValues}\n onValueToggle={onValueToggle}\n highlightedValueIndex={highlightedValueIndex}\n setHighlightedValueIndex={setHighlightedValueIndex}\n />\n );\n };\n\n const Window = useWindow();\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement: \"bottom\",\n });\n const handleRef = useForkRef<HTMLDivElement>(floating, popperRef);\n useIsomorphicLayoutEffect(() => {\n if (anchorElement) {\n reference(anchorElement);\n }\n }, [reference, anchorElement]);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <Portal>\n <Window\n style={{\n top: y ?? \"\",\n left: x ?? \"\",\n position: strategy,\n }}\n ref={handleRef}\n >\n <div className={withBaseName(\"content\")}>{renderContent()}</div>\n </Window>\n </Portal>\n );\n}\n"],"names":["makePrefixer","useMemo","jsx","SearchList","CategoryList","ValueList","useWindow","useFloatingUI","useForkRef","useIsomorphicLayoutEffect","Portal"],"mappings":"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"}

package/dist-cjs/packages/lab/src/query-input/useQueryInput.js CHANGED Viewed

@@ -7,6 +7,7 @@ var React = require('react');
 var usePopperStatus = require('./internal/usePopperStatus.js');
 require('react/jsx-runtime');
 require('../responsive/useResizeObserver.js');
+require('../utils/useFloatingUI.js');
 var useWidth = require('../responsive/useWidth.js');
 function useQueryInput(props, forwardedRef) {

package/dist-cjs/packages/lab/src/query-input/useQueryInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useQueryInput.js","sources":["../src/query-input/useQueryInput.ts"],"sourcesContent":["import { useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n Ref,\n RefObject,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { QueryInputBodyProps } from \"./internal/QueryInputBody\";\nimport { usePopperStatus } from \"./internal/usePopperStatus\";\nimport { ValueSelectorProps } from \"./internal/ValueSelector\";\nimport { QueryInputProps } from \"./QueryInput\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { useWidth } from \"../responsive\";\n\nexport type BooleanOperator = \"or\" \| \"and\";\n\nexport interface UseQueryInputResult {\n queryInputProps: {\n onFocus: FocusEventHandler<HTMLDivElement>;\n onBlur: FocusEventHandler<HTMLDivElement>;\n };\n queryInputBodyRef: Ref<HTMLDivElement>;\n queryInputBodyProps: QueryInputBodyProps;\n valueSelectorProps: ValueSelectorProps;\n}\n\nexport function useQueryInput(\n props: QueryInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): UseQueryInputResult {\n const bodyRef = useRef<HTMLDivElement>(null);\n const popperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [widthBodyRef, bodyWidth] = useWidth<HTMLDivElement>(true);\n\n const forkedRef1 = useForkRef<HTMLDivElement>(\n forwardedRef,\n bodyRef\n ) as RefObject<HTMLDivElement>;\n const queryInputBodyRef = useForkRef<HTMLDivElement>(\n forkedRef1,\n widthBodyRef\n );\n\n const [selectedItems, setSelectedItems] = useControlled({\n controlled: props.selectedItems,\n default: props.defaultSelectedItems \|\| [],\n name: \"QueryInput\",\n state: \"selectedItems\",\n });\n\n const [booleanOperator, setBooleanOperator] = useControlled({\n controlled: props.booleanOperator,\n default: props.defaultBooleanOperator \|\| \"and\",\n name: \"QueryInput\",\n state: \"booleanOperator\",\n });\n\n const popperStatus = usePopperStatus({\n initialOpen: false,\n autoClose: props.autoClose,\n });\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const [highlightedCategoryIndex, setHighlightedCategoryIndex] = useState(0);\n const [highlightedValueIndex, setHighlightedValueIndex] = useState(0);\n const [selectedCategory, setSelectedCategory] =\n useState<QueryInputCategory \| null>(null);\n const searchListIndexPositions = useRef<Array<QueryInputCategory \| string>>(\n []\n );\n\n const onInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onFocus(event);\n setIsFocused(true);\n };\n\n const onInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n if (!inputRef.current) {\n return;\n }\n const relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n inputRef.current.focus();\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n inputRef.current.focus();\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setIsFocused(true);\n popperStatus.onFocus(event);\n };\n\n const onBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n let relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onSelectedItemsChange = (newItems: QueryInputItem[] \| undefined) => {\n const newItem =\n newItems &&\n newItems.find(\n (item) => item.category == null && item.value === inputValue\n );\n if (newItem) {\n setInputValue(\"\");\n }\n setSelectedItems(newItems \|\| []);\n if (props.onChange) {\n props.onChange(newItems \|\| []);\n }\n popperStatus.onChange();\n };\n\n const onBooleanOperatorChange = (operator: BooleanOperator) => {\n setBooleanOperator(operator);\n if (props.onBooleanOperatorChange) {\n props.onBooleanOperatorChange(operator);\n }\n };\n\n const onSelectedCategoryChange = (category: QueryInputCategory \| null) => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n setSelectedCategory(category);\n };\n\n const [inputValue, setInputValue] = useState<string>(\"\");\n\n const searchListItems = useMemo(() => {\n const [searchListItems, indexPositions] = filterCategories(\n props.categories,\n inputValue\n );\n searchListIndexPositions.current = indexPositions;\n return searchListItems;\n }, [props.categories, inputValue]);\n\n const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newInputValue = event.target.value;\n setInputValue(newInputValue);\n // If we have search results, the first index position will be a header\n setHighlightedIndex(searchListIndexPositions.current.length === 0 ? 0 : 1);\n };\n\n const searchListItemCount = useMemo(() => {\n return searchListItems.reduce(\n (acc, category) => acc + category.values.length,\n 0\n );\n }, [searchListItems]);\n\n const onInputClear = () => {\n onSelectedItemsChange([]);\n };\n\n const onInputClick = () => {\n popperStatus.onClick();\n };\n\n const newItemFromSelected = (): QueryInputItem \| undefined => {\n const i = highlightedIndex;\n for (const category of searchListItems) {\n if (i < category.values.length) {\n const value = category.values[i];\n return {\n category: category.name,\n value,\n };\n }\n }\n };\n\n const { displayedItemCount = 10 } = props;\n\n const onSearchListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedIndex(0);\n return;\n case \"End\":\n setHighlightedIndex(searchListItemCount);\n return;\n case \"ArrowUp\":\n setHighlightedIndex((i) =>\n prevSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"ArrowDown\":\n // setHighlightedIndex((i) => Math.min(searchListItemCount, i + 1));\n setHighlightedIndex((i) =>\n nextSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"PageDown\":\n setHighlightedIndex((i) =>\n Math.min(searchListItemCount, i + displayedItemCount)\n );\n return;\n case \"PageUp\":\n setHighlightedIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"Enter\":\n if (highlightedIndex === searchListItemCount) {\n const newItems = [\n ...selectedItems,\n { category: null, value: inputValue },\n ];\n onSelectedItemsChange(newItems);\n } else {\n if (highlightedIndex >= 0 && highlightedIndex < searchListItemCount) {\n const newItem = newItemFromSelected();\n if (newItem) {\n const newItems = [...selectedItems, newItem];\n onSelectedItemsChange(newItems);\n }\n }\n setInputValue(\"\");\n }\n return;\n default:\n return;\n }\n };\n\n const onCategoryListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedCategoryIndex(0);\n return;\n case \"End\":\n setHighlightedCategoryIndex(props.categories.length - 1);\n return;\n case \"ArrowUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n case \"ArrowRight\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n default:\n return;\n }\n };\n\n const onValueListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedValueIndex(0);\n return;\n case \"End\":\n setHighlightedValueIndex(selectedCategory!.values.length);\n return;\n case \"ArrowUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (highlightedValueIndex === 0) {\n setSelectedCategory(null);\n } else {\n const value = selectedCategory!.values[highlightedValueIndex - 1];\n const newItems = selectedItems.filter(\n (item) =>\n !(\n item.category === selectedCategory!.name && item.value === value\n )\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: selectedCategory!.name, value });\n }\n onSelectedItemsChange(newItems);\n }\n return;\n case \"ArrowLeft\":\n setSelectedCategory(null);\n return;\n default:\n return;\n }\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onKeyDown(event);\n let key = event.key;\n if (event.key === \" \" && event.ctrlKey) {\n key = \"Enter\";\n }\n const isSearchListActive = inputValue !== \"\";\n const isCategoryListActive = !isSearchListActive && !selectedCategory;\n const isValueListActive = !isSearchListActive && !isCategoryListActive;\n if (isSearchListActive) {\n onSearchListKeyDown(key);\n } else if (isCategoryListActive) {\n onCategoryListKeyDown(key);\n } else {\n onValueListKeyDown(key);\n }\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n case \"Enter\":\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (isValueListActive) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (isCategoryListActive) {\n event.preventDefault();\n }\n break;\n case \"Escape\":\n setInputValue(\"\");\n }\n };\n\n const onValueToggle = (category: QueryInputCategory, value: string) => {\n const newItems = selectedItems.filter(\n (item) => !(item.category === category.name && item.value === value)\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: category.name, value });\n }\n onSelectedItemsChange(newItems);\n };\n\n return {\n queryInputBodyRef,\n queryInputProps: {\n onFocus,\n onBlur,\n },\n queryInputBodyProps: {\n inputRef: inputRef,\n disabled: props.disabled,\n selectedItems,\n onFocus,\n onBlur,\n onInputClick,\n onInputFocus,\n onInputBlur,\n onInputClear,\n inputValue,\n onInputChange,\n onSelectedItemsChange,\n onKeyDown,\n isFocused,\n booleanOperator,\n onBooleanOperatorChange,\n },\n valueSelectorProps: {\n isOpen: popperStatus.isOpen,\n categories: props.categories,\n selectedCategory,\n selectedItems,\n onValueToggle,\n onSearchListChange: onSelectedItemsChange,\n anchorElement: bodyRef.current,\n width: bodyWidth,\n onSelectedCategoryChange,\n popperRef,\n inputValue,\n highlightedIndex,\n visibleCategories: searchListItems,\n highlightedCategoryIndex,\n highlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedValueIndex,\n setHighlightedIndex,\n },\n };\n}\n\nfunction filterCategories(\n categories: QueryInputCategory[],\n inputValue?: string\n): [QueryInputCategory[], Array<QueryInputCategory \| string>] {\n // Note: if there is no input value, this List would not be display\n if (!inputValue) {\n return [categories, []];\n }\n const query = inputValue.toUpperCase();\n const visibleCategories: QueryInputCategory[] = [];\n const indexPositions: Array<QueryInputCategory \| string> = [];\n for (const c of categories) {\n const values = c.values.filter((v) => v.toUpperCase().includes(query));\n if (values.length > 0) {\n const queryInputCategory = {\n name: c.name,\n values,\n };\n visibleCategories.push(queryInputCategory);\n indexPositions.push(queryInputCategory, ...values);\n }\n }\n return [visibleCategories, indexPositions];\n}\n\nfunction nextSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index + 1;\n // Note: allow 1 for the extra ListItem we append to end of List\n if (nextIndex === indexPositions.length + 1) {\n return index;\n } else if (nextIndex === indexPositions.length) {\n return nextIndex;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex + 1;\n }\n}\n\nfunction prevSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index - 1;\n if (nextIndex === 0) {\n return index;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex - 1;\n }\n}\n"],"names":["useRef","useWidth","useForkRef","useControlled","usePopperStatus","useState","useMemo","searchListItems"],"mappings":"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"}
1	+ {"version":3,"file":"useQueryInput.js","sources":["../src/query-input/useQueryInput.ts"],"sourcesContent":["import { useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n Ref,\n RefObject,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { QueryInputBodyProps } from \"./internal/QueryInputBody\";\nimport { usePopperStatus } from \"./internal/usePopperStatus\";\nimport { ValueSelectorProps } from \"./internal/ValueSelector\";\nimport { QueryInputProps } from \"./QueryInput\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { useWidth } from \"../responsive\";\n\nexport type BooleanOperator = \"or\" \| \"and\";\n\nexport interface UseQueryInputResult {\n queryInputProps: {\n onFocus: FocusEventHandler<HTMLDivElement>;\n onBlur: FocusEventHandler<HTMLDivElement>;\n };\n queryInputBodyRef: Ref<HTMLDivElement>;\n queryInputBodyProps: QueryInputBodyProps;\n valueSelectorProps: ValueSelectorProps;\n}\n\nexport function useQueryInput(\n props: QueryInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): UseQueryInputResult {\n const bodyRef = useRef<HTMLDivElement>(null);\n const popperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [widthBodyRef, bodyWidth] = useWidth<HTMLDivElement>(true);\n\n const forkedRef1 = useForkRef<HTMLDivElement>(\n forwardedRef,\n bodyRef\n ) as RefObject<HTMLDivElement>;\n const queryInputBodyRef = useForkRef<HTMLDivElement>(\n forkedRef1,\n widthBodyRef\n );\n\n const [selectedItems, setSelectedItems] = useControlled({\n controlled: props.selectedItems,\n default: props.defaultSelectedItems \|\| [],\n name: \"QueryInput\",\n state: \"selectedItems\",\n });\n\n const [booleanOperator, setBooleanOperator] = useControlled({\n controlled: props.booleanOperator,\n default: props.defaultBooleanOperator \|\| \"and\",\n name: \"QueryInput\",\n state: \"booleanOperator\",\n });\n\n const popperStatus = usePopperStatus({\n initialOpen: false,\n autoClose: props.autoClose,\n });\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const [highlightedCategoryIndex, setHighlightedCategoryIndex] = useState(0);\n const [highlightedValueIndex, setHighlightedValueIndex] = useState(0);\n const [selectedCategory, setSelectedCategory] =\n useState<QueryInputCategory \| null>(null);\n const searchListIndexPositions = useRef<Array<QueryInputCategory \| string>>(\n []\n );\n\n const onInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onFocus(event);\n setIsFocused(true);\n };\n\n const onInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n if (!inputRef.current) {\n return;\n }\n const relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n inputRef.current.focus();\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n inputRef.current.focus();\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setIsFocused(true);\n popperStatus.onFocus(event);\n };\n\n const onBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n let relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onSelectedItemsChange = (newItems: QueryInputItem[] \| undefined) => {\n const newItem =\n newItems &&\n newItems.find(\n (item) => item.category == null && item.value === inputValue\n );\n if (newItem) {\n setInputValue(\"\");\n }\n setSelectedItems(newItems \|\| []);\n if (props.onChange) {\n props.onChange(newItems \|\| []);\n }\n popperStatus.onChange();\n };\n\n const onBooleanOperatorChange = (operator: BooleanOperator) => {\n setBooleanOperator(operator);\n if (props.onBooleanOperatorChange) {\n props.onBooleanOperatorChange(operator);\n }\n };\n\n const onSelectedCategoryChange = (category: QueryInputCategory \| null) => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n setSelectedCategory(category);\n };\n\n const [inputValue, setInputValue] = useState<string>(\"\");\n\n const searchListItems = useMemo(() => {\n const [searchListItems, indexPositions] = filterCategories(\n props.categories,\n inputValue\n );\n searchListIndexPositions.current = indexPositions;\n return searchListItems;\n }, [props.categories, inputValue]);\n\n const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newInputValue = event.target.value;\n setInputValue(newInputValue);\n // If we have search results, the first index position will be a header\n setHighlightedIndex(searchListIndexPositions.current.length === 0 ? 0 : 1);\n };\n\n const searchListItemCount = useMemo(() => {\n return searchListItems.reduce(\n (acc, category) => acc + category.values.length,\n 0\n );\n }, [searchListItems]);\n\n const onInputClear = () => {\n onSelectedItemsChange([]);\n };\n\n const onInputClick = () => {\n popperStatus.onClick();\n };\n\n const newItemFromSelected = (): QueryInputItem \| undefined => {\n const i = highlightedIndex;\n for (const category of searchListItems) {\n if (i < category.values.length) {\n const value = category.values[i];\n return {\n category: category.name,\n value,\n };\n }\n }\n };\n\n const { displayedItemCount = 10 } = props;\n\n const onSearchListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedIndex(0);\n return;\n case \"End\":\n setHighlightedIndex(searchListItemCount);\n return;\n case \"ArrowUp\":\n setHighlightedIndex((i) =>\n prevSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"ArrowDown\":\n // setHighlightedIndex((i) => Math.min(searchListItemCount, i + 1));\n setHighlightedIndex((i) =>\n nextSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"PageDown\":\n setHighlightedIndex((i) =>\n Math.min(searchListItemCount, i + displayedItemCount)\n );\n return;\n case \"PageUp\":\n setHighlightedIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"Enter\":\n if (highlightedIndex === searchListItemCount) {\n const newItems = [\n ...selectedItems,\n { category: null, value: inputValue },\n ];\n onSelectedItemsChange(newItems);\n } else {\n if (highlightedIndex >= 0 && highlightedIndex < searchListItemCount) {\n const newItem = newItemFromSelected();\n if (newItem) {\n const newItems = [...selectedItems, newItem];\n onSelectedItemsChange(newItems);\n }\n }\n setInputValue(\"\");\n }\n return;\n default:\n return;\n }\n };\n\n const onCategoryListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedCategoryIndex(0);\n return;\n case \"End\":\n setHighlightedCategoryIndex(props.categories.length - 1);\n return;\n case \"ArrowUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n case \"ArrowRight\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n default:\n return;\n }\n };\n\n const onValueListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedValueIndex(0);\n return;\n case \"End\":\n setHighlightedValueIndex(selectedCategory!.values.length);\n return;\n case \"ArrowUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (highlightedValueIndex === 0) {\n setSelectedCategory(null);\n } else {\n const value = selectedCategory!.values[highlightedValueIndex - 1];\n const newItems = selectedItems.filter(\n (item) =>\n !(\n item.category === selectedCategory!.name && item.value === value\n )\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: selectedCategory!.name, value });\n }\n onSelectedItemsChange(newItems);\n }\n return;\n case \"ArrowLeft\":\n setSelectedCategory(null);\n return;\n default:\n return;\n }\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onKeyDown(event);\n let key = event.key;\n if (event.key === \" \" && event.ctrlKey) {\n key = \"Enter\";\n }\n const isSearchListActive = inputValue !== \"\";\n const isCategoryListActive = !isSearchListActive && !selectedCategory;\n const isValueListActive = !isSearchListActive && !isCategoryListActive;\n if (isSearchListActive) {\n onSearchListKeyDown(key);\n } else if (isCategoryListActive) {\n onCategoryListKeyDown(key);\n } else {\n onValueListKeyDown(key);\n }\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n case \"Enter\":\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (isValueListActive) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (isCategoryListActive) {\n event.preventDefault();\n }\n break;\n case \"Escape\":\n setInputValue(\"\");\n }\n };\n\n const onValueToggle = (category: QueryInputCategory, value: string) => {\n const newItems = selectedItems.filter(\n (item) => !(item.category === category.name && item.value === value)\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: category.name, value });\n }\n onSelectedItemsChange(newItems);\n };\n\n return {\n queryInputBodyRef,\n queryInputProps: {\n onFocus,\n onBlur,\n },\n queryInputBodyProps: {\n inputRef: inputRef,\n disabled: props.disabled,\n selectedItems,\n onFocus,\n onBlur,\n onInputClick,\n onInputFocus,\n onInputBlur,\n onInputClear,\n inputValue,\n onInputChange,\n onSelectedItemsChange,\n onKeyDown,\n isFocused,\n booleanOperator,\n onBooleanOperatorChange,\n },\n valueSelectorProps: {\n isOpen: popperStatus.isOpen,\n categories: props.categories,\n selectedCategory,\n selectedItems,\n onValueToggle,\n onSearchListChange: onSelectedItemsChange,\n anchorElement: bodyRef.current,\n width: bodyWidth,\n onSelectedCategoryChange,\n popperRef,\n inputValue,\n highlightedIndex,\n visibleCategories: searchListItems,\n highlightedCategoryIndex,\n highlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedValueIndex,\n setHighlightedIndex,\n },\n };\n}\n\nfunction filterCategories(\n categories: QueryInputCategory[],\n inputValue?: string\n): [QueryInputCategory[], Array<QueryInputCategory \| string>] {\n // Note: if there is no input value, this List would not be display\n if (!inputValue) {\n return [categories, []];\n }\n const query = inputValue.toUpperCase();\n const visibleCategories: QueryInputCategory[] = [];\n const indexPositions: Array<QueryInputCategory \| string> = [];\n for (const c of categories) {\n const values = c.values.filter((v) => v.toUpperCase().includes(query));\n if (values.length > 0) {\n const queryInputCategory = {\n name: c.name,\n values,\n };\n visibleCategories.push(queryInputCategory);\n indexPositions.push(queryInputCategory, ...values);\n }\n }\n return [visibleCategories, indexPositions];\n}\n\nfunction nextSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index + 1;\n // Note: allow 1 for the extra ListItem we append to end of List\n if (nextIndex === indexPositions.length + 1) {\n return index;\n } else if (nextIndex === indexPositions.length) {\n return nextIndex;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex + 1;\n }\n}\n\nfunction prevSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index - 1;\n if (nextIndex === 0) {\n return index;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex - 1;\n }\n}\n"],"names":["useRef","useWidth","useForkRef","useControlled","usePopperStatus","useState","useMemo","searchListItems"],"mappings":"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"}

package/dist-cjs/packages/lab/src/responsive/useOverflow.js CHANGED Viewed

@@ -6,6 +6,7 @@ var React = require('react');
 var overflowUtils = require('./overflowUtils.js');
 var partition = require('../utils/partition.js');
 var core = require('@salt-ds/core');
+require('../utils/useFloatingUI.js');
 const NO_OVERFLOW_INDICATOR = { size: 0 };
 const getPriority = (item) => item.priority;