@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist-cjs/packages/lab/src/dropdown/DropdownBase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\nimport { Portal } from \"../portal\";\nimport { isDesktop, useWindow } from \"../window\";\n\nimport \"./Dropdown.css\";\n\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = clsx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = useWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      }\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: clsx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={clsx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? 0,\n                left: x ?? 0,\n                position: strategy,\n                maxHeight: maxPopupHeight ?? undefined,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useRef","clsx","Children","useId","useWindow","useDropdownBase","useState","isDesktop","flip","shift","limitShift","size","useFloatingUI","useForkRef","id","cloneElement","forwardCallbackProps","width","className","jsxs","jsx","Portal"],"mappings":"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"}

package/dist-cjs/packages/lab/src/dropdown/DropdownButton.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=DropdownButton.css.js.map

package/dist-cjs/packages/lab/src/dropdown/DropdownButton.css.js.map

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

package/dist-cjs/packages/lab/src/dropdown/DropdownButton.js

@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
-require('../form-field-context/FormFieldContext.js');
-require('../form-field-context/FormFieldContextNext.js');
-var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
-var React = require('react');
-var clsx = require('clsx');
-require('./DropdownButton.css.js');
-
-const withBaseName = core.makePrefixer("saltDropdownButton");
-const DropdownButton = React.forwardRef(function DropdownButton2({
-  IconComponent = icons.ChevronDownIcon,
-  ariaHideOptionRole,
-  className,
-  disabled,
-  iconSize = icons.DEFAULT_ICON_SIZE,
-  isOpen,
-  label,
-  labelId,
-  fullWidth,
-  posInSet,
-  setSize,
-  labelAriaAttributes,
-  ...rest
-}, ref) {
-  const { inFormField } = useFormFieldProps.useFormFieldProps();
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-    className: clsx.clsx(
-      withBaseName(),
-      {
-        [withBaseName("fullwidth")]: fullWidth,
-        [withBaseName("formField")]: inFormField
-      },
-      className
-    ),
-    "data-testid": "dropdown-button",
-    disabled,
-    variant: "secondary",
-    ...rest,
-    ref,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: withBaseName("content"),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          "aria-hidden": ariaHideOptionRole ? "true" : void 0,
-          ...labelAriaAttributes,
-          className: withBaseName("buttonLabel"),
-          id: labelId,
-          role: "option",
-          children: label
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
-          className: withBaseName("icon"),
-          size: iconSize,
-          "aria-label": null,
-          "aria-hidden": "true"
-        })
-      ]
-    })
-  });
-});
-
-exports.DropdownButton = DropdownButton;
-//# sourceMappingURL=DropdownButton.js.map

package/dist-cjs/packages/lab/src/dropdown/DropdownButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon, IconProps, DEFAULT_ICON_SIZE } from \"@salt-ds/icons\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { clsx } from \"clsx\";\nimport { AriaAttributes, ComponentType, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent = ChevronDownIcon,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const { inFormField } = useFormFieldProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <IconComponent\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownButton","ChevronDownIcon","DEFAULT_ICON_SIZE","useFormFieldProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAgB,GAAAC,qBAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,mCAAkB,EAAA,CAAA;AAI1C,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACCA,cAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/dropdown/useClickAway.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-const NO_HANDLERS = [];
-const useClickAway = ({
-  popperRef,
-  rootRef,
-  isOpen,
-  onClose
-}) => {
-  React.useEffect(() => {
-    const [clickHandler, escapeKeyHandler] = isOpen ? [
-      (evt) => {
-        var _a, _b;
-        const targetElement = evt.target;
-        if (!((_a = popperRef.current) == null ? void 0 : _a.contains(targetElement)) && !((_b = rootRef.current) == null ? void 0 : _b.contains(targetElement))) {
-          onClose();
-        }
-      },
-      (e) => {
-        if (e.key === "Escape") {
-          onClose();
-        }
-      }
-    ] : NO_HANDLERS;
-    if (clickHandler && escapeKeyHandler) {
-      document.body.addEventListener("mousedown", clickHandler, true);
-      document.body.addEventListener("keydown", escapeKeyHandler, true);
-    }
-    return () => {
-      if (clickHandler && escapeKeyHandler) {
-        document.body.removeEventListener("mousedown", clickHandler, true);
-        document.body.removeEventListener("keydown", escapeKeyHandler, true);
-      }
-    };
-  }, [isOpen, onClose]);
-};
-
-exports.useClickAway = useClickAway;
-//# sourceMappingURL=useClickAway.js.map

package/dist-cjs/packages/lab/src/dropdown/useClickAway.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useClickAway.js","sources":["../src/dropdown/useClickAway.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: () => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              onClose();\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              onClose();\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose]);\n};\n"],"names":["useEffect"],"mappings":";;;;;;AAYA,MAAM,cAA2D,EAAC,CAAA;AAE3D,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AACJ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AAvB/B,QAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAwBY,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,EAAA,CAAC,EAAU,GAAA,SAAA,CAAA,OAAA,KAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC7B,CAAA,CAAA,IAAA,EAAA,CAAC,EAAQ,GAAA,OAAA,CAAA,OAAA,KAAR,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC3B,CAAA,CAAA,EAAA;AACA,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,OAAO,CAAC,CAAA,CAAA;AACtB;;;;"}

package/dist-cjs/packages/lab/src/dropdown/useDropdown.js

@@ -1,95 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@salt-ds/core');
-var React = require('react');
-require('../list/Highlighter.js');
-require('../list/ListItem.js');
-require('../list/List.js');
-var useList = require('../list/useList.js');
-require('../list/VirtualizedList.js');
-require('../common-hooks/collectionProvider.js');
-var itemToString = require('../common-hooks/itemToString.js');
-require('../common-hooks/keyUtils.js');
-require('../utils/useFloatingUI.js');
-require('react/jsx-runtime');
-require('../responsive/useResizeObserver.js');
-
-const NULL_REF = { current: null };
-const useDropdown = ({
-  collectionHook,
-  defaultHighlightedIndex: defaultHighlightedIndexProp,
-  defaultIsOpen,
-  defaultSelected,
-  highlightedIndex: highlightedIndexProp,
-  isOpen: isOpenProp,
-  itemToString: itemToString$1 = itemToString.itemToString,
-  onHighlight,
-  onOpenChange,
-  onSelectionChange,
-  selected,
-  selectionStrategy
-}) => {
-  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
-  const [isOpen, setIsOpen] = core.useControlled({
-    controlled: isOpenProp,
-    default: defaultIsOpen != null ? defaultIsOpen : false,
-    name: "useDropdownList"
-  });
-  const handleSelectionChange = React.useCallback(
-    (evt, selected2) => {
-      if (!isMultiSelect) {
-        setIsOpen(false);
-        onOpenChange == null ? void 0 : onOpenChange(false);
-      }
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, selected2);
-    },
-    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]
-  );
-  const listHook = useList.useList({
-    collectionHook,
-    defaultHighlightedIndex: (defaultHighlightedIndexProp != null ? defaultHighlightedIndexProp : highlightedIndexProp === void 0) ? 0 : void 0,
-    defaultSelected,
-    label: "useDropDownList",
-    onSelectionChange: handleSelectionChange,
-    containerRef: NULL_REF,
-    highlightedIndex: highlightedIndexProp,
-    onHighlight,
-    selected,
-    selectionStrategy,
-    tabToSelect: !isMultiSelect
-  });
-  const handleOpenChange = React.useCallback(
-    (open) => {
-      setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange, setIsOpen]
-  );
-  const triggerLabel = React.useMemo(() => {
-    if (isMultiSelect && Array.isArray(listHook.selected)) {
-      const selectedItems = listHook.selected;
-      if (selectedItems.length === 0) {
-        return void 0;
-      } else if (selectedItems.length === 1) {
-        const { value } = selectedItems[0];
-        return value === null ? void 0 : itemToString$1(value);
-      } else {
-        return `${selectedItems.length} items selected`;
-      }
-    } else {
-      const selectedItem = listHook.selected;
-      return selectedItem == null || selectedItem.value === null ? void 0 : itemToString$1(selectedItem.value);
-    }
-  }, [isMultiSelect, itemToString$1, listHook.selected]);
-  return {
-    isOpen,
-    onOpenChange: handleOpenChange,
-    triggerLabel,
-    ...listHook
-  };
-};
-
-exports.useDropdown = useDropdown;
-//# sourceMappingURL=useDropdown.js.map

package/dist-cjs/packages/lab/src/dropdown/useDropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"./dropdownTypes\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectionStrategy,\n} from \"../common-hooks\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      } else if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      } else {\n        return `${selectedItems.length} items selected`;\n      }\n    } else {\n      const selectedItem = listHook.selected as CollectionItem<Item>;\n      return selectedItem == null || selectedItem.value === null\n        ? undefined\n        : itemToString(selectedItem.value);\n    }\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","useControlled","useCallback","selected","useList","useMemo"],"mappings":"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"}

package/dist-cjs/packages/lab/src/dropdown/useDropdownBase.js

@@ -1,144 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@salt-ds/core');
-var React = require('react');
-var useClickAway = require('./useClickAway.js');
-require('react/jsx-runtime');
-var useResizeObserver = require('../responsive/useResizeObserver.js');
-require('../utils/useFloatingUI.js');
-require('../form-field-context/FormFieldContext.js');
-require('../form-field-context/FormFieldContextNext.js');
-var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
-
-const NO_OBSERVER = [];
-const useDropdownBase = ({
-  ariaLabelledBy: ariaLabelledByProp,
-  defaultIsOpen,
-  disabled,
-  fullWidth: fullWidthProp,
-  id,
-  isOpen: isOpenProp,
-  onOpenChange,
-  onKeyDown: onKeyDownProp,
-  openOnFocus,
-  popupComponent: { props: componentProps },
-  popupWidth: popupWidthProp,
-  rootRef,
-  width
-}) => {
-  var _a;
-  const justFocused = React.useRef(null);
-  const popperRef = React.useRef(null);
-  const popperCallbackRef = React.useCallback((element) => {
-    popperRef.current = element;
-  }, []);
-  const [isOpen, setIsOpen] = core.useControlled({
-    controlled: isOpenProp,
-    default: Boolean(defaultIsOpen),
-    name: "useDropdown",
-    state: "isOpen"
-  });
-  const {
-    inFormField,
-    setFocused: setFormFieldFocused,
-    a11yProps: { "aria-labelledby": ariaLabelledBy, ...restA11yProps } = {}
-  } = useFormFieldProps.useFormFieldProps();
-  const [popup, setPopup] = React.useState({
-    width: (_a = popupWidthProp != null ? popupWidthProp : width) != null ? _a : 0
-  });
-  const showDropdown = React.useCallback(() => {
-    setIsOpen(true);
-    onOpenChange == null ? void 0 : onOpenChange(true);
-  }, [onOpenChange, setIsOpen]);
-  const hideDropdown = React.useCallback(() => {
-    setIsOpen(false);
-    onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange, setIsOpen]);
-  useClickAway.useClickAway({
-    popperRef,
-    rootRef,
-    isOpen,
-    onClose: hideDropdown
-  });
-  const handleTriggerFocus = React.useCallback(() => {
-    if (!disabled) {
-      setFormFieldFocused == null ? void 0 : setFormFieldFocused(true);
-      if (openOnFocus) {
-        setIsOpen(true);
-        onOpenChange == null ? void 0 : onOpenChange(true);
-        justFocused.current = window.setTimeout(() => {
-          justFocused.current = null;
-        }, 1e3);
-      }
-    }
-  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);
-  const handleTriggerBlur = React.useCallback(() => {
-    setFormFieldFocused == null ? void 0 : setFormFieldFocused(false);
-  }, [setFormFieldFocused]);
-  const handleTriggerToggle = React.useCallback(
-    (e) => {
-      if (["Enter", " "].indexOf(
-        e.key
-      ) === -1) {
-        const newIsOpen = !isOpen;
-        setIsOpen(newIsOpen);
-        onOpenChange == null ? void 0 : onOpenChange(newIsOpen);
-      }
-    },
-    [isOpen, setIsOpen, onOpenChange]
-  );
-  const handleKeydown = React.useCallback(
-    (evt) => {
-      if ((evt.key === "Tab" || evt.key === "Escape") && isOpen) {
-        hideDropdown();
-      } else if ((evt.key === "Enter" || evt.key === "ArrowDown" || evt.key === " ") && !isOpen) {
-        evt.preventDefault();
-        showDropdown();
-      } else {
-        onKeyDownProp == null ? void 0 : onKeyDownProp(evt);
-      }
-    },
-    [hideDropdown, isOpen, onKeyDownProp, showDropdown]
-  );
-  const fullWidth = fullWidthProp != null ? fullWidthProp : inFormField;
-  const measurements2 = fullWidth ? useResizeObserver.WidthOnly : NO_OBSERVER;
-  useResizeObserver.useResizeObserver(rootRef, measurements2, setPopup, fullWidth);
-  const componentId = `${id}-dropdown`;
-  const getAriaLabelledBy = (labelledBy, labelledByProp) => {
-    if (labelledBy === void 0 && labelledByProp === void 0) {
-      return void 0;
-    } else {
-      return [labelledBy, labelledByProp].filter((x) => !!x).join(" ");
-    }
-  };
-  const triggerProps = {
-    ...restA11yProps,
-    "aria-expanded": isOpen,
-    "aria-labelledby": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),
-    "aria-owns": isOpen ? componentId : void 0,
-    id: `${id}-control`,
-    onClick: disabled || openOnFocus ? void 0 : handleTriggerToggle,
-    onFocus: handleTriggerFocus,
-    onBlur: handleTriggerBlur,
-    role: "listbox",
-    onKeyDown: disabled ? void 0 : handleKeydown,
-    style: { width: fullWidth ? void 0 : width }
-  };
-  const dropdownComponentProps = {
-    "aria-labelledby": ariaLabelledBy,
-    id: componentId,
-    width: popup.width
-  };
-  return {
-    componentProps: dropdownComponentProps,
-    popperRef: popperCallbackRef,
-    isOpen,
-    label: "Dropdown Button",
-    triggerProps
-  };
-};
-
-exports.useDropdownBase = useDropdownBase;
-//# sourceMappingURL=useDropdownBase.js.map

package/dist-cjs/packages/lab/src/dropdown/useDropdownBase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\nimport { measurements, useResizeObserver, WidthOnly } from \"../responsive\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupComponent: { props: componentProps },\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    setFocused: setFormFieldFocused,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange, setIsOpen]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange, setIsOpen]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    if (!disabled) {\n      setFormFieldFocused?.(true);\n\n      if (openOnFocus) {\n        setIsOpen(true);\n        onOpenChange?.(true);\n        // Suppress response to click if click was the cause of focus\n        justFocused.current = window.setTimeout(() => {\n          justFocused.current = null;\n        }, 1000);\n      }\n    }\n  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);\n\n  const handleTriggerBlur = useCallback(() => {\n    setFormFieldFocused?.(false);\n  }, [setFormFieldFocused]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, setIsOpen, onOpenChange]\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown]\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    } else {\n      return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n    }\n  };\n\n  // TODO do we use aria-popup - valid values are menu, disloag, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: handleTriggerFocus,\n    onBlur: handleTriggerBlur,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["useRef","useCallback","useControlled","useFormFieldProps","useState","useClickAway","measurements","WidthOnly","useResizeObserver"],"mappings":"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"}

package/dist-cjs/packages/lab/src/editable-label/EditableLabel.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".saltEditableLabel {\n  --saltInput-minWidth: 14px;\n  --saltInput-position: absolute;\n  --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n  --editableLabel-height: var(--saltEditableLabel-height, 26px);\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.saltEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  right: var(--editableLabel-padding, 0);\n}\n\n.saltEditableLabel-input {\n  outline: none;\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=EditableLabel.css.js.map

package/dist-cjs/packages/lab/src/editable-label/EditableLabel.css.js.map

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

package/dist-cjs/packages/lab/src/editable-label/EditableLabel.js

@@ -1,108 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
-var core = require('@salt-ds/core');
-var Input = require('../input/Input.js');
-require('../input/StaticInputAdornment.js');
-require('./EditableLabel.css.js');
-
-const classBase = "saltEditableLabel";
-const EditableLabel = React.forwardRef(function EditableLabel2({
-  className: classNameProp,
-  defaultEditing,
-  defaultValue,
-  editing: editingProp,
-  onChange,
-  onEnterEditMode,
-  onExitEditMode,
-  value: valueProp
-}, forwardedRef) {
-  const inputRef = React.useRef(null);
-  const [value, setValue] = core.useControlled({
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : "",
-    name: "EditableLabel",
-    state: "value"
-  });
-  const [editing, setEditing] = core.useControlled({
-    controlled: editingProp,
-    default: defaultEditing != null ? defaultEditing : false,
-    name: "EditableLabel",
-    state: "editing"
-  });
-  const initialValue = React.useRef(value);
-  core.useIsomorphicLayoutEffect(() => {
-    if (editing) {
-      if (inputRef.current !== null) {
-        inputRef.current.select();
-        inputRef.current.focus();
-      }
-    }
-  }, [editing, inputRef]);
-  const enterEditMode = React.useCallback(() => {
-    setEditing(true);
-    onEnterEditMode && onEnterEditMode();
-  }, [onEnterEditMode, setEditing]);
-  const exitEditMode = ({
-    cancelEdit = false,
-    allowDeactivation = false
-  } = {}) => {
-    setEditing(false);
-    const originalValue = initialValue.current;
-    if (originalValue !== value) {
-      if (cancelEdit) {
-        setValue(originalValue);
-      } else {
-        initialValue.current = value;
-      }
-    }
-    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);
-  };
-  const handleChange = (evt) => {
-    const { value: value2 } = evt.target;
-    setValue(value2);
-    onChange && onChange(value2);
-  };
-  const handleDoubleClick = () => {
-    enterEditMode();
-  };
-  const handleBlur = () => {
-    exitEditMode({ allowDeactivation: true });
-  };
-  const handleKeyDown = (evt) => {
-    if (editing && evt.key === "Enter") {
-      evt.stopPropagation();
-      exitEditMode();
-    } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
-      evt.stopPropagation();
-    } else if (evt.key === "Escape") {
-      exitEditMode({ cancelEdit: true });
-    }
-  };
-  const className = clsx.clsx(classBase, classNameProp, {
-    [`${classBase}-editing`]: editing
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className,
-    onDoubleClick: handleDoubleClick,
-    "data-text": value,
-    ref: forwardedRef,
-    children: editing ? /* @__PURE__ */ jsxRuntime.jsx(Input.Input, {
-      inputProps: { className: `${classBase}-input` },
-      value,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      ref: inputRef,
-      style: { padding: 0 },
-      textAlign: "left"
-    }) : value
-  });
-});
-
-exports.EditableLabel = EditableLabel;
-//# sourceMappingURL=EditableLabel.js.map

package/dist-cjs/packages/lab/src/editable-label/EditableLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = clsx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","EditableLabel","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","clsx","jsx","Input"],"mappings":"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"}

package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: var(--salt-size-container-spacing);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=FileDropZone.css.js.map

package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.css.js.map

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