@vuu-ui/vuu-ui-controls 0.8.44 → 0.8.45

package/esm/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../src/date-input/DateInput.tsx"],"sourcesContent":["import { toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport { DateValue } from \"@internationalized/date\";\nimport { clsx } from \"clsx\";\nimport {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { CalendarProps } from \"../calendar/Calendar\";\nimport { DatePopup } from \"../date-popup\";\nimport { useDatePicker } from \"./useDatePicker\";\n\nimport \"./DateInput.css\";\n\nconst classBase = \"vuuDateInput\";\n\nexport interface DateInputProps\n  extends Pick<CalendarProps, \"hideOutOfRangeDates\" | \"hideYearDropdown\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  inputProps?: Partial<HTMLAttributes<HTMLInputElement>>;\n  onChange: (selected: DateValue, source: \"input\" | \"calendar\") => void;\n  selectedDate: DateValue | undefined;\n  closeOnSelection?: boolean;\n  onBlur?: () => void;\n  className?: string;\n}\n\nexport const DateInput = ({\n  inputProps,\n  selectedDate,\n  onChange,\n  onBlur,\n  className,\n  ...htmlAttributes\n}: DateInputProps) => {\n  const { handleOnBlur } = useDatePicker({ onBlur });\n  const popupRef = useRef<HTMLButtonElement>(null);\n  const onInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      const v = e.target.value;\n      if (v === \"\") return;\n      else onChange(toCalendarDate(new Date(v)), \"input\");\n    },\n    [onChange]\n  );\n\n  const onKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>((e) => {\n    if (e.key === \"Tab\" && !e.shiftKey) {\n      requestAnimationFrame(() => {\n        popupRef.current?.focus();\n      });\n    }\n  }, []);\n\n  const onChangeCalendar = useCallback(\n    (date: DateValue) => {\n      onChange(date, \"calendar\");\n    },\n    [onChange]\n  );\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(classBase, className)}\n      onBlur={handleOnBlur}\n    >\n      <input\n        {...inputProps}\n        aria-label=\"date-input\"\n        className={clsx(\"saltInput-input\", classBase)}\n        type=\"date\"\n        value={selectedDate?.toString() ?? \"\"}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        max=\"9999-12-31\" // without this it shows expty space on the right\n      />\n\n      <DatePopup\n        data-embedded\n        onBlur={onBlur}\n        onChange={onChangeCalendar}\n        ref={popupRef}\n        selectedDate={selectedDate}\n        selectionVariant=\"default\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAeA,MAAM,SAAY,GAAA,cAAA,CAAA;AAaX,MAAM,YAAY,CAAC;AAAA,EACxB,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,EAAE,YAAa,EAAA,GAAI,aAAc,CAAA,EAAE,QAAQ,CAAA,CAAA;AACjD,EAAM,MAAA,QAAA,GAAW,OAA0B,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,CAAA,GAAI,EAAE,MAAO,CAAA,KAAA,CAAA;AACnB,MAAA,IAAI,CAAM,KAAA,EAAA;AAAI,QAAA,OAAA;AAAA;AACT,QAAA,QAAA,CAAS,eAAe,IAAI,IAAA,CAAK,CAAC,CAAC,GAAG,OAAO,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,WAAoD,CAAA,CAAC,CAAM,KAAA;AAC3E,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,KAAS,IAAA,CAAC,EAAE,QAAU,EAAA;AAClC,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,OACzB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACnB,MAAA,QAAA,CAAS,MAAM,UAAU,CAAA,CAAA;AAAA,KAC3B;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,IAAK,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACpC,MAAQ,EAAA,YAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,YAAW,EAAA,YAAA;AAAA,YACX,SAAA,EAAW,IAAK,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,YAC5C,IAAK,EAAA,MAAA;AAAA,YACL,KAAA,EAAO,YAAc,EAAA,QAAA,EAAc,IAAA,EAAA;AAAA,YACnC,QAAU,EAAA,aAAA;AAAA,YACV,SAAA;AAAA,YACA,GAAI,EAAA,YAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBAEA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,MAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,GAAK,EAAA,QAAA;AAAA,YACL,YAAA;AAAA,YACA,gBAAiB,EAAA,SAAA;AAAA,WAAA;AAAA,SACnB;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DateInput.js","sources":["../../src/date-input/DateInput.tsx"],"sourcesContent":["import { toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport { DateValue } from \"@internationalized/date\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { CalendarProps } from \"../calendar/Calendar\";\nimport { DatePopup } from \"../date-popup\";\nimport { useDatePicker } from \"./useDatePicker\";\n\nimport dateInputCss from \"./DateInput.css\";\n\nconst classBase = \"vuuDateInput\";\n\nexport interface DateInputProps\n  extends Pick<CalendarProps, \"hideOutOfRangeDates\" | \"hideYearDropdown\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  inputProps?: Partial<HTMLAttributes<HTMLInputElement>>;\n  onChange: (selected: DateValue, source: \"input\" | \"calendar\") => void;\n  selectedDate: DateValue | undefined;\n  closeOnSelection?: boolean;\n  onBlur?: () => void;\n  className?: string;\n}\n\nexport const DateInput = ({\n  inputProps,\n  selectedDate,\n  onChange,\n  onBlur,\n  className,\n  ...htmlAttributes\n}: DateInputProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-data-input\",\n    css: dateInputCss,\n    window: targetWindow,\n  });\n\n  const { handleOnBlur } = useDatePicker({ onBlur });\n  const popupRef = useRef<HTMLButtonElement>(null);\n  const onInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      const v = e.target.value;\n      if (v === \"\") return;\n      else onChange(toCalendarDate(new Date(v)), \"input\");\n    },\n    [onChange]\n  );\n\n  const onKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>((e) => {\n    if (e.key === \"Tab\" && !e.shiftKey) {\n      requestAnimationFrame(() => {\n        popupRef.current?.focus();\n      });\n    }\n  }, []);\n\n  const onChangeCalendar = useCallback(\n    (date: DateValue) => {\n      onChange(date, \"calendar\");\n    },\n    [onChange]\n  );\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(classBase, className)}\n      onBlur={handleOnBlur}\n    >\n      <input\n        {...inputProps}\n        aria-label=\"date-input\"\n        className={clsx(\"saltInput-input\", classBase)}\n        type=\"date\"\n        value={selectedDate?.toString() ?? \"\"}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        max=\"9999-12-31\" // without this it shows expty space on the right\n      />\n\n      <DatePopup\n        data-embedded\n        onBlur={onBlur}\n        onChange={onChangeCalendar}\n        ref={popupRef}\n        selectedDate={selectedDate}\n        selectionVariant=\"default\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiBA,MAAM,SAAY,GAAA,cAAA,CAAA;AAaX,MAAM,YAAY,CAAC;AAAA,EACxB,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAa,EAAA,GAAI,aAAc,CAAA,EAAE,QAAQ,CAAA,CAAA;AACjD,EAAM,MAAA,QAAA,GAAW,OAA0B,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,CAAA,GAAI,EAAE,MAAO,CAAA,KAAA,CAAA;AACnB,MAAA,IAAI,CAAM,KAAA,EAAA;AAAI,QAAA,OAAA;AAAA;AACT,QAAA,QAAA,CAAS,eAAe,IAAI,IAAA,CAAK,CAAC,CAAC,GAAG,OAAO,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,WAAoD,CAAA,CAAC,CAAM,KAAA;AAC3E,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,KAAS,IAAA,CAAC,EAAE,QAAU,EAAA;AAClC,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,OACzB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACnB,MAAA,QAAA,CAAS,MAAM,UAAU,CAAA,CAAA;AAAA,KAC3B;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,IAAK,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACpC,MAAQ,EAAA,YAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,YAAW,EAAA,YAAA;AAAA,YACX,SAAA,EAAW,IAAK,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,YAC5C,IAAK,EAAA,MAAA;AAAA,YACL,KAAA,EAAO,YAAc,EAAA,QAAA,EAAc,IAAA,EAAA;AAAA,YACnC,QAAU,EAAA,aAAA;AAAA,YACV,SAAA;AAAA,YACA,GAAI,EAAA,YAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBAEA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,MAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,GAAK,EAAA,QAAA;AAAA,YACL,YAAA;AAAA,YACA,gBAAiB,EAAA,SAAA;AAAA,WAAA;AAAA,SACnB;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/date-popup/DatePopup.js

@@ -13,6 +13,8 @@ import '../dropdown/Dropdown.js';
 import '../common-hooks/collectionProvider.js';
 import '../common-hooks/use-resize-observer.js';
 import '@vuu-ui/vuu-utils';
+import '@salt-ds/styles';
+import '@salt-ds/window';
 import { IconButton } from '../icon-button/IconButton.js';
 import { useDatePopup } from './useDatePopup.js';
 

package/esm/date-popup/DatePopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePopup.js","sources":["../../src/date-popup/DatePopup.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  today as getTodayDate,\n} from \"@internationalized/date\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { Calendar, CalendarProps } from \"../calendar\";\nimport { DropdownBase, DropdownCloseHandler } from \"../dropdown\";\nimport { IconButton } from \"../icon-button\";\nimport { useDatePopup } from \"./useDatePopup\";\n\nconst classBase = \"vuuDatePopup\";\n\nexport interface DatePopupProps\n  extends Pick<CalendarProps, \"selectionVariant\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onKeyDown\"> {\n  \"data-embedded\"?: boolean;\n  selectedDate?: DateValue;\n  onPopupClose?: DropdownCloseHandler;\n  onPopupOpen?: () => void;\n  onChange: (date: DateValue) => void;\n}\n\nconst tz = getLocalTimeZone();\nconst today = getTodayDate(tz);\n\nexport const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(\n  function DatePopup(\n    {\n      selectedDate,\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectionVariant,\n      \"data-embedded\": dataEmbedded,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const {\n      calendarRef,\n      date,\n      isOpen,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      handleOpenChange,\n      triggererRef,\n      visibleMonth,\n    } = useDatePopup({\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectedDate: selectedDate || today,\n      selectionVariant,\n    });\n\n    return (\n      <DropdownBase\n        {...htmlAttributes}\n        className={classBase}\n        isOpen={isOpen}\n        placement=\"below\"\n        onOpenChange={handleOpenChange}\n      >\n        <IconButton\n          data-embedded={dataEmbedded}\n          icon=\"date\"\n          ref={useForkRef(forwardedRef, triggererRef)}\n          variant=\"secondary\"\n          className={cx({ \"saltButton-active\": isOpen })}\n        />\n        <Calendar\n          visibleMonth={visibleMonth}\n          ref={calendarRef}\n          selectedDate={date}\n          selectionVariant=\"default\"\n          onSelectedDateChange={onSelectedDateChange}\n          onVisibleMonthChange={onVisibleMonthChange}\n          className={`${classBase}-calendar`}\n        />\n      </DropdownBase>\n    );\n  }\n);\n"],"names":["getTodayDate","DatePopup"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYlB,MAAM,KAAK,gBAAiB,EAAA,CAAA;AAC5B,MAAM,KAAA,GAAQA,QAAa,EAAE,CAAA,CAAA;AAEtB,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAiB,EAAA,YAAA;AAAA,IACjB,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,QACE,YAAa,CAAA;AAAA,MACf,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,YAAgB,IAAA,KAAA;AAAA,MAC9B,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAW,EAAA,SAAA;AAAA,QACX,MAAA;AAAA,QACA,SAAU,EAAA,OAAA;AAAA,QACV,YAAc,EAAA,gBAAA;AAAA,QAEd,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,eAAe,EAAA,YAAA;AAAA,cACf,IAAK,EAAA,MAAA;AAAA,cACL,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,cAC1C,OAAQ,EAAA,WAAA;AAAA,cACR,SAAW,EAAA,EAAA,CAAG,EAAE,mBAAA,EAAqB,QAAQ,CAAA;AAAA,aAAA;AAAA,WAC/C;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,YAAA;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,YAAc,EAAA,IAAA;AAAA,cACd,gBAAiB,EAAA,SAAA;AAAA,cACjB,oBAAA;AAAA,cACA,oBAAA;AAAA,cACA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,aAAA;AAAA,WACzB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DatePopup.js","sources":["../../src/date-popup/DatePopup.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  today as getTodayDate,\n} from \"@internationalized/date\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { Calendar, CalendarProps } from \"../calendar\";\nimport { DropdownBase, DropdownCloseHandler } from \"../dropdown\";\nimport { IconButton } from \"../icon-button\";\nimport { useDatePopup } from \"./useDatePopup\";\n\nconst classBase = \"vuuDatePopup\";\n\nexport interface DatePopupProps\n  extends Pick<CalendarProps, \"selectionVariant\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onKeyDown\"> {\n  \"data-embedded\"?: boolean;\n  selectedDate?: DateValue;\n  onPopupClose?: DropdownCloseHandler;\n  onPopupOpen?: () => void;\n  onChange: (date: DateValue) => void;\n}\n\nconst tz = getLocalTimeZone();\nconst today = getTodayDate(tz);\n\nexport const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(\n  function DatePopup(\n    {\n      selectedDate,\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectionVariant,\n      \"data-embedded\": dataEmbedded,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const {\n      calendarRef,\n      date,\n      isOpen,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      handleOpenChange,\n      triggererRef,\n      visibleMonth,\n    } = useDatePopup({\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectedDate: selectedDate || today,\n      selectionVariant,\n    });\n\n    return (\n      <DropdownBase\n        {...htmlAttributes}\n        className={classBase}\n        isOpen={isOpen}\n        placement=\"below\"\n        onOpenChange={handleOpenChange}\n      >\n        <IconButton\n          data-embedded={dataEmbedded}\n          icon=\"date\"\n          ref={useForkRef(forwardedRef, triggererRef)}\n          variant=\"secondary\"\n          className={cx({ \"saltButton-active\": isOpen })}\n        />\n        <Calendar\n          visibleMonth={visibleMonth}\n          ref={calendarRef}\n          selectedDate={date}\n          selectionVariant=\"default\"\n          onSelectedDateChange={onSelectedDateChange}\n          onVisibleMonthChange={onVisibleMonthChange}\n          className={`${classBase}-calendar`}\n        />\n      </DropdownBase>\n    );\n  }\n);\n"],"names":["getTodayDate","DatePopup"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYlB,MAAM,KAAK,gBAAiB,EAAA,CAAA;AAC5B,MAAM,KAAA,GAAQA,QAAa,EAAE,CAAA,CAAA;AAEtB,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAiB,EAAA,YAAA;AAAA,IACjB,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,QACE,YAAa,CAAA;AAAA,MACf,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,YAAgB,IAAA,KAAA;AAAA,MAC9B,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAW,EAAA,SAAA;AAAA,QACX,MAAA;AAAA,QACA,SAAU,EAAA,OAAA;AAAA,QACV,YAAc,EAAA,gBAAA;AAAA,QAEd,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,eAAe,EAAA,YAAA;AAAA,cACf,IAAK,EAAA,MAAA;AAAA,cACL,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,cAC1C,OAAQ,EAAA,WAAA;AAAA,cACR,SAAW,EAAA,EAAA,CAAG,EAAE,mBAAA,EAAqB,QAAQ,CAAA;AAAA,aAAA;AAAA,WAC/C;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,YAAA;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,YAAc,EAAA,IAAA;AAAA,cACd,gBAAiB,EAAA,SAAA;AAAA,cACjB,oBAAA;AAAA,cACA,oBAAA;AAAA,cACA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,aAAA;AAAA,WACzB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/esm/drag-drop/Draggable.css.js

@@ -0,0 +1,4 @@
+var draggableCss = ".vuuDraggable {\n  background: transparent;\n  box-shadow: var(--salt-overlayable-shadow-drag);\n  cursor: var(--salt-draggable-grab-cursor-active);\n  position: absolute;\n  opacity: .95;\n  z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n  display: var(--vuuDraggable-display, inline-block);\n  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n  transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n  width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n  display: var(--saltDraggable-display, inline-block);\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  height: 0px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n  transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  background-color: var(--salt-palette-accent-background);\n  height: 2px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  background-color: var(--salt-palette-accent-background);\n  position: absolute;\n  top: -2px;\n  left: -3px;\n}\n\n.vuuDraggable-settling {\n  transition-property: left, top;\n  transition-duration: .15s;\n  transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n  order: 1;\n}";
+
+export { draggableCss as default };
+//# sourceMappingURL=Draggable.css.js.map

package/esm/drag-drop/Draggable.css.js.map

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

package/esm/drag-drop/Draggable.js

@@ -1,12 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { useForkRef } from '@salt-ds/core';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { forwardRef, useCallback, useMemo } from 'react';
 import { Portal, PopupComponent } from '@vuu-ui/vuu-popups';
+import draggableCss from './Draggable.css.js';
 
 const makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
 const Draggable = forwardRef(
   function Draggable2({ wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-draggable",
+      css: draggableCss,
+      window: targetWindow
+    });
     const handleVuuDrop = useCallback(() => {
       onDropped?.();
     }, [onDropped]);

package/esm/drag-drop/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.js","sources":["../../src/drag-drop/Draggable.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  MutableRefObject,\n  RefCallback,\n  TransitionEventHandler,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\n\nimport \"./Draggable.css\";\n\nconst makeClassNames = (classNames: string) =>\n  classNames.split(\" \").map((className) => `vuuDraggable-${className}`);\n\nexport interface DraggableProps extends HTMLAttributes<HTMLDivElement> {\n  wrapperClassName: string;\n  element: HTMLElement;\n  onDropped?: () => void;\n  onTransitionEnd?: TransitionEventHandler;\n  scale?: number;\n  style: CSSProperties;\n}\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  function Draggable(\n    { wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 },\n    forwardedRef\n  ) {\n    const handleVuuDrop = useCallback(() => {\n      onDropped?.();\n    }, [onDropped]);\n\n    const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n      (el: HTMLDivElement) => {\n        if (el) {\n          el.innerHTML = \"\";\n          el.appendChild(element);\n          if (scale !== 1) {\n            el.style.transform = `scale(${scale},${scale})`;\n          }\n          el.addEventListener(\"vuu-dropped\", handleVuuDrop);\n        }\n      },\n      [element, handleVuuDrop, scale]\n    );\n    const forkedRef = useForkRef<HTMLDivElement>(forwardedRef, callbackRef);\n\n    const position = useMemo(\n      () => ({\n        left: 0,\n        top: 0,\n      }),\n      []\n    );\n\n    return (\n      <Portal>\n        <Popup\n          anchorElement={{ current: document.body }}\n          className=\"vuuPopup\"\n          placement=\"absolute\"\n          position={position}\n        >\n          <div\n            className={cx(\"vuuDraggable\", ...makeClassNames(wrapperClassName))}\n            ref={forkedRef}\n            onTransitionEnd={onTransitionEnd}\n            style={style}\n          />\n        </Popup>\n      </Portal>\n    );\n  }\n);\n\n// const colors = [\"black\", \"red\", \"green\", \"yellow\"];\n// let color_idx = 0;\nexport const createDragSpacer = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-spacer\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n\nexport const createDropIndicatorPosition = (): HTMLElement => {\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicatorPosition\";\n  return spacer;\n};\n\nexport const createDropIndicator = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicator\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n"],"names":["Draggable","Popup"],"mappings":"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"}
+{"version":3,"file":"Draggable.js","sources":["../../src/drag-drop/Draggable.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  MutableRefObject,\n  RefCallback,\n  TransitionEventHandler,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\n\nimport draggableCss from \"./Draggable.css\";\n\nconst makeClassNames = (classNames: string) =>\n  classNames.split(\" \").map((className) => `vuuDraggable-${className}`);\n\nexport interface DraggableProps extends HTMLAttributes<HTMLDivElement> {\n  wrapperClassName: string;\n  element: HTMLElement;\n  onDropped?: () => void;\n  onTransitionEnd?: TransitionEventHandler;\n  scale?: number;\n  style: CSSProperties;\n}\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  function Draggable(\n    { wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-draggable\",\n      css: draggableCss,\n      window: targetWindow,\n    });\n\n    const handleVuuDrop = useCallback(() => {\n      onDropped?.();\n    }, [onDropped]);\n\n    const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n      (el: HTMLDivElement) => {\n        if (el) {\n          el.innerHTML = \"\";\n          el.appendChild(element);\n          if (scale !== 1) {\n            el.style.transform = `scale(${scale},${scale})`;\n          }\n          el.addEventListener(\"vuu-dropped\", handleVuuDrop);\n        }\n      },\n      [element, handleVuuDrop, scale]\n    );\n    const forkedRef = useForkRef<HTMLDivElement>(forwardedRef, callbackRef);\n\n    const position = useMemo(\n      () => ({\n        left: 0,\n        top: 0,\n      }),\n      []\n    );\n\n    return (\n      <Portal>\n        <Popup\n          anchorElement={{ current: document.body }}\n          className=\"vuuPopup\"\n          placement=\"absolute\"\n          position={position}\n        >\n          <div\n            className={cx(\"vuuDraggable\", ...makeClassNames(wrapperClassName))}\n            ref={forkedRef}\n            onTransitionEnd={onTransitionEnd}\n            style={style}\n          />\n        </Popup>\n      </Portal>\n    );\n  }\n);\n\n// const colors = [\"black\", \"red\", \"green\", \"yellow\"];\n// let color_idx = 0;\nexport const createDragSpacer = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-spacer\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n\nexport const createDropIndicatorPosition = (): HTMLElement => {\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicatorPosition\";\n  return spacer;\n};\n\nexport const createDropIndicator = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicator\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n"],"names":["Draggable","Popup"],"mappings":"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"}

package/esm/dropdown/Dropdown.css.js

@@ -0,0 +1,4 @@
+var dropdownBaseCss = ".vuuDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  --saltButton-height: var(--vuuDropdown-height);\n  --saltButton-width : var(--vuuDropdown-width);\n\n  line-height: 0;\n  position: relative;\n\n}\n\n.vuuDropdownButton.saltButton-secondary {\n  --saltButton-background: var(--salt-editable-background);\n  --saltButton-color: var(--salt-editable-foreground);\n  --saltButton-borderStyle: solid;\n  --saltButton-borderColor: var(--salt-editable-borderColor);\n  --saltButton-borderWidth: 1px;\n}\n\n.vuuDropdown-fullWidth {\n  width: 100%;\n}\n\n.vuuDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n\n.vuuDropdown-popup-component {\n  --vuuList-borderStyle: none;\n}\n";
+
+export { dropdownBaseCss as default };
+//# sourceMappingURL=Dropdown.css.js.map

package/esm/dropdown/Dropdown.css.js.map

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

package/esm/dropdown/Dropdown.js

@@ -14,6 +14,8 @@ import { List } from '../list/List.js';
 import '../drag-drop/DragDropProvider.js';
 import '../drag-drop/Draggable.js';
 import 'clsx';
+import '@salt-ds/styles';
+import '@salt-ds/window';
 import { DropdownBase } from './DropdownBase.js';
 import { DropdownButton } from './DropdownButton.js';
 import { useDropdown } from './useDropdown.js';

package/esm/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport {\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n  SelectionType,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List, ListProps } from \"../list\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, S>,\n      | \"ListItem\"\n      | \"defaultSelected\"\n      | \"itemToString\"\n      | \"onSelect\"\n      | \"onSelectionChange\"\n      | \"selected\"\n      | \"selectionStrategy\"\n      | \"source\"\n      | \"width\"\n    > {\n  // TODO There is overlap here between ListProps and top level List props\n  ListProps?: Omit<ListProps<Item, S>, \"ListItem\" | \"itemToString\" | \"source\">;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, S>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    setContainerRef,\n    ...dropdownListHook\n  } = useDropdown<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    listRef,\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionStrategy,\n  });\n\n  const itemIdToItem = useCallback(\n    (itemId: string | string[]) => {\n      if (Array.isArray(itemId)) {\n        const items = itemId.map((id) => collectionHook.itemById(id));\n        return items as SelectionType<Item, S>;\n      } else {\n        return collectionHook.itemById(itemId) as SelectionType<Item, S>;\n      }\n    },\n    [collectionHook]\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...(dropdownListHook.isOpen ? listControlProps : {})}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        placement={\n          ListProps?.width === undefined ? \"below-full-width\" : \"below\"\n        }\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, S>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          ref={setContainerRef}\n          selected={selected === undefined ? undefined : itemIdToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, S extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","ListProps","id"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport {\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n  SelectionType,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List, ListProps } from \"../list\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, S>,\n      | \"ListItem\"\n      | \"defaultSelected\"\n      | \"itemToString\"\n      | \"onSelect\"\n      | \"onSelectionChange\"\n      | \"selected\"\n      | \"selectionStrategy\"\n      | \"source\"\n      | \"width\"\n    > {\n  // TODO There is overlap here between ListProps and top level List props\n  ListProps?: Omit<ListProps<Item, S>, \"ListItem\" | \"itemToString\" | \"source\">;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, S>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    setContainerRef,\n    ...dropdownListHook\n  } = useDropdown<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    listRef,\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionStrategy,\n  });\n\n  const itemIdToItem = useCallback(\n    (itemId: string | string[]) => {\n      if (Array.isArray(itemId)) {\n        const items = itemId.map((id) => collectionHook.itemById(id));\n        return items as SelectionType<Item, S>;\n      } else {\n        return collectionHook.itemById(itemId) as SelectionType<Item, S>;\n      }\n    },\n    [collectionHook]\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...(dropdownListHook.isOpen ? listControlProps : {})}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        placement={\n          ListProps?.width === undefined ? \"below-full-width\" : \"below\"\n        }\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, S>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          ref={setContainerRef}\n          selected={selected === undefined ? undefined : itemIdToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, S extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","ListProps","id"],"mappings":"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"}

package/esm/dropdown/DropdownBase.js

@@ -3,9 +3,12 @@ import { Portal, PopupComponent } from '@vuu-ui/vuu-popups';
 import { useId } from '@vuu-ui/vuu-utils';
 import { useForkRef } from '@salt-ds/core';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { forwardRef, useRef, Children, cloneElement } from 'react';
 import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
 import { useDropdownBase } from './useDropdownBase.js';
+import dropdownBaseCss from './Dropdown.css.js';
 
 const classBase = "vuuDropdown";
 const DropdownBase = forwardRef(
@@ -28,6 +31,12 @@ const DropdownBase = forwardRef(
     width,
     ...htmlAttributes
   }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-dropdown-base",
+      css: dropdownBaseCss,
+      window: targetWindow
+    });
     const rootRef = useRef(null);
     const className = cx(classBase, classNameProp, {
       [`${classBase}-fullWidth`]: fullWidth,

package/esm/dropdown/DropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","sources":["../../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\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 classBase = \"vuuDropdown\";\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      PopupProps,\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      defaultIsOpen,\n      disabled,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openKeys,\n      openOnFocus,\n      placement = \"below-full-width\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = cx(classBase, classNameProp, {\n      [`${classBase}-fullWidth`]: fullWidth,\n      [`${classBase}-disabled`]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n\n    const { componentProps, isOpen, popupComponentRef, triggerProps } =\n      useDropdownBase({\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openKeys,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      });\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\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: cx(className, `${classBase}-popup-component`),\n        id,\n        ref: popupComponentRef,\n        width: placement.endsWith(\"full-width\") ? \"auto\" : ownWidth ?? width,\n      });\n    };\n\n    const ref = useForkRef(rootRef, forwardedRef);\n\n    return (\n      <div {...htmlAttributes} className={className} id={idProp} ref={ref}>\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal>\n            <Popup\n              {...PopupProps}\n              anchorElement={rootRef}\n              placement={placement}\n            >\n              {getPopupComponent()}\n            </Popup>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["id","width","className","Popup"],"mappings":"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"}
+{"version":3,"file":"DropdownBase.js","sources":["../../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Children, cloneElement, forwardRef, useRef } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport dropdownBaseCss from \"./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 classBase = \"vuuDropdown\";\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      PopupProps,\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      defaultIsOpen,\n      disabled,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openKeys,\n      openOnFocus,\n      placement = \"below-full-width\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-dropdown-base\",\n      css: dropdownBaseCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = cx(classBase, classNameProp, {\n      [`${classBase}-fullWidth`]: fullWidth,\n      [`${classBase}-disabled`]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n\n    const { componentProps, isOpen, popupComponentRef, triggerProps } =\n      useDropdownBase({\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openKeys,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      });\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\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: cx(className, `${classBase}-popup-component`),\n        id,\n        ref: popupComponentRef,\n        width: placement.endsWith(\"full-width\") ? \"auto\" : ownWidth ?? width,\n      });\n    };\n\n    const ref = useForkRef(rootRef, forwardedRef);\n\n    return (\n      <div {...htmlAttributes} className={className} id={idProp} ref={ref}>\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal>\n            <Popup\n              {...PopupProps}\n              anchorElement={rootRef}\n              placement={placement}\n            >\n              {getPopupComponent()}\n            </Popup>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["id","width","className","Popup"],"mappings":"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"}

package/esm/dropdown/DropdownButton.css.js

@@ -0,0 +1,4 @@
+var dropdownButtonCss = ".vuuDropdownButton {\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  --vuu-icon-size: 16px;\n}\n\n.vuuDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.vuuDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.vuuDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.vuuDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.vuuDropdownButton-formField.saltButton:focus,\n.vuuDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
+
+export { dropdownButtonCss as default };
+//# sourceMappingURL=DropdownButton.css.js.map

package/esm/dropdown/DropdownButton.css.js.map

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

package/esm/dropdown/DropdownButton.js

@@ -1,7 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { forwardRef } from 'react';
+import dropdownButtonCss from './DropdownButton.css.js';
 
 const classBase = "vuuDropdownButton";
 const DropdownButton = forwardRef(function DropdownButton2({
@@ -18,6 +21,12 @@ const DropdownButton = forwardRef(function DropdownButton2({
   labelAriaAttributes,
   ...rest
 }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-dropdown-button",
+    css: dropdownButtonCss,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsx(
     Button,
     {

package/esm/dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { AriaAttributes, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  icon?: string;\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   * 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 classBase = \"vuuDropdownButton\";\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    ariaHideOptionRole,\n    className,\n    disabled,\n    icon = \"chevron-down\",\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\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={cx(\n        classBase,\n        {\n          [`${classBase}-fullWidth`]: fullWidth,\n        },\n        className\n      )}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={`${classBase}-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={`${classBase}-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        <span\n          className={`${classBase}-buttonIcon`}\n          data-icon={icon}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton"],"mappings":";;;;;AAgDA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEL,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,cAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAA,EACA,GACA,EAAA;AAIA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA;AAAA,UACE,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACH;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,YACvB,WAAW,EAAA,IAAA;AAAA,YACX,aAAY,EAAA,MAAA;AAAA,WAAA;AAAA,SACd;AAAA,OACF,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { AriaAttributes, ForwardedRef, forwardRef } from \"react\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  icon?: string;\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   * 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 classBase = \"vuuDropdownButton\";\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    ariaHideOptionRole,\n    className,\n    disabled,\n    icon = \"chevron-down\",\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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n\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={cx(\n        classBase,\n        {\n          [`${classBase}-fullWidth`]: fullWidth,\n        },\n        className\n      )}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={`${classBase}-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={`${classBase}-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        <span\n          className={`${classBase}-buttonIcon`}\n          data-icon={icon}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton"],"mappings":";;;;;;;;AAkDA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEL,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,cAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAKD,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA;AAAA,UACE,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACH;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,YACvB,WAAW,EAAA,IAAA;AAAA,YACX,aAAY,EAAA,MAAA;AAAA,WAAA;AAAA,SACd;AAAA,OACF,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/esm/dropdown/useDropdown.js

@@ -12,6 +12,8 @@ import '../list/List.js';
 import { useList } from '../list/useList.js';
 import 'react/jsx-runtime';
 import 'clsx';
+import '@salt-ds/styles';
+import '@salt-ds/window';
 
 const useDropdown = ({
   collectionHook,

package/esm/dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.js","sources":["../../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { RefObject, useCallback, useMemo } from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"./dropdownTypes\";\nimport {\n  itemToString as defaultItemToString,\n  SelectHandler,\n  SelectionStrategy,\n  isMultiSelection,\n  MultiSelectionHandler,\n  SingleSelectionHandler,\n} from \"../common-hooks\";\n\nexport interface DropdownListHookProps<\n  Item,\n  S extends SelectionStrategy = \"default\"\n> extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, S>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n  listRef: RefObject<HTMLDivElement>;\n}\n\nexport interface DropdownListHookResult<Item>\n  extends Partial<ListHookResult<Item>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <Item, S extends SelectionStrategy>({\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  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, S>): DropdownListHookResult<Item> => {\n  const isMultiSelect = isMultiSelection(selectionStrategy);\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      if (Array.isArray(selected)) {\n        (onSelectionChange as MultiSelectionHandler<Item>)?.(\n          evt,\n          selected as Item[]\n        );\n      } else if (selected) {\n        (onSelectionChange as SingleSelectionHandler<Item>)?.(\n          evt,\n          selected as Item\n        );\n      }\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect, setIsOpen]\n  );\n\n  const listHook = useList<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"DropDown\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\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 (Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected.map((id) =>\n        collectionHook.itemById(id)\n      );\n      if (selectedItems.length === 0) {\n        return undefined;\n      } else if (selectedItems.length === 1) {\n        const [item] = selectedItems;\n        return item === null ? undefined : itemToString(item);\n      } else {\n        return `${selectedItems.length} items selected`;\n      }\n    }\n  }, [collectionHook, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected"],"mappings":"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"}
+{"version":3,"file":"useDropdown.js","sources":["../../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { RefObject, useCallback, useMemo } from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"./dropdownTypes\";\nimport {\n  itemToString as defaultItemToString,\n  SelectHandler,\n  SelectionStrategy,\n  isMultiSelection,\n  MultiSelectionHandler,\n  SingleSelectionHandler,\n} from \"../common-hooks\";\n\nexport interface DropdownListHookProps<\n  Item,\n  S extends SelectionStrategy = \"default\"\n> extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, S>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n  listRef: RefObject<HTMLDivElement>;\n}\n\nexport interface DropdownListHookResult<Item>\n  extends Partial<ListHookResult<Item>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <Item, S extends SelectionStrategy>({\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  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, S>): DropdownListHookResult<Item> => {\n  const isMultiSelect = isMultiSelection(selectionStrategy);\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      if (Array.isArray(selected)) {\n        (onSelectionChange as MultiSelectionHandler<Item>)?.(\n          evt,\n          selected as Item[]\n        );\n      } else if (selected) {\n        (onSelectionChange as SingleSelectionHandler<Item>)?.(\n          evt,\n          selected as Item\n        );\n      }\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect, setIsOpen]\n  );\n\n  const listHook = useList<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"DropDown\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\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 (Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected.map((id) =>\n        collectionHook.itemById(id)\n      );\n      if (selectedItems.length === 0) {\n        return undefined;\n      } else if (selectedItems.length === 1) {\n        const [item] = selectedItems;\n        return item === null ? undefined : itemToString(item);\n      } else {\n        return `${selectedItems.length} items selected`;\n      }\n    }\n  }, [collectionHook, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected"],"mappings":"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"}

package/esm/editable-label/EditableLabel.css.js

@@ -0,0 +1,4 @@
+var editableLabelCss = ".vuuEditableLabel {\n  --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n  --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n  --saltInput-background: transparent;\n  --saltInput-height: calc(var(--editableLabel-height) - 4px);\n  --saltInput-minWidth: 14px;\n\n  color: inherit;\n  cursor: default;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  letter-spacing: normal;\n\n  /* max-width: 170px; */\n  outline: none;\n  overflow: hidden;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  position: absolute;\n  right: var(--editableLabel-padding, 0);\n  top: var(--saltEditableLabel-top, 1px);\n  width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n  display: none;\n}\n\n.vuuEditableLabel-input {\n  background-color: transparent;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 20px;\n  margin:0;\n  min-width:0;\n  outline: none;\n  padding: 0;\n}\n\n.vuuEditableLabel-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+
+export { editableLabelCss as default };
+//# sourceMappingURL=EditableLabel.css.js.map

package/esm/editable-label/EditableLabel.css.js.map

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

package/esm/editable-label/EditableLabel.js

@@ -2,6 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
 import { forwardRef, useRef, useCallback, useLayoutEffect, useImperativeHandle } from 'react';
 import { useControlled, Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import editableLabelCss from './EditableLabel.css.js';
 
 const classBase = "vuuEditableLabel";
 const NullEditAPI = {
@@ -19,6 +22,12 @@ const EditableLabel = forwardRef(function EditableLabel2({
   value: valueProp,
   ...restProps
 }, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-editable-label",
+    css: editableLabelCss,
+    window: targetWindow
+  });
   const inputRef = useRef(null);
   const editingRef = useRef(false);
   const [value, setValue] = useControlled({

package/esm/editable-label/EditableLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\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 setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing]\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit]\n  );\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 &&\n      onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = () => {\n    if (editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\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 = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}
+{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\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 setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing]\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit]\n  );\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 &&\n      onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = () => {\n    if (editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\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 = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}

package/esm/icon-button/Icon.css.js

@@ -0,0 +1,4 @@
+var iconCss = ".vuuIcon {\n    --vuu-icon-left: 0;\n}";
+
+export { iconCss as default };
+//# sourceMappingURL=Icon.css.js.map

package/esm/icon-button/Icon.css.js.map

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

package/esm/icon-button/Icon.js

@@ -1,5 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import iconCss from './Icon.css.js';
 
 const classBase = "vuuIcon";
 const Icon = ({
@@ -9,6 +12,12 @@ const Icon = ({
   style: styleProp,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-icon",
+    css: iconCss,
+    window: targetWindow
+  });
   const style = typeof size === "number" ? { ...styleProp, "--vuu-icon-size": `${size}px` } : styleProp;
   return /* @__PURE__ */ jsx(
     "span",

package/esm/icon-button/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../src/icon-button/Icon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./Icon.css\";\n\nconst classBase = \"vuuIcon\";\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  name: string;\n  size?: number;\n}\n\nexport const Icon = ({\n  className,\n  name,\n  size,\n  style: styleProp,\n  ...htmlAttributes\n}: IconProps) => {\n  const style =\n    typeof size === \"number\"\n      ? { ...styleProp, \"--vuu-icon-size\": `${size}px` }\n      : styleProp;\n  return (\n    <span\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      data-icon={name}\n      role=\"img\"\n      style={style}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAKA,MAAM,SAAY,GAAA,SAAA,CAAA;AAOX,MAAM,OAAO,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAiB,KAAA;AACf,EAAM,MAAA,KAAA,GACJ,OAAO,IAAA,KAAS,QACZ,GAAA,EAAE,GAAG,SAAA,EAAW,iBAAmB,EAAA,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA,EAC1C,GAAA,SAAA,CAAA;AACN,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,WAAW,EAAA,IAAA;AAAA,MACX,IAAK,EAAA,KAAA;AAAA,MACL,KAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../src/icon-button/Icon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport iconCss from \"./Icon.css\";\n\nconst classBase = \"vuuIcon\";\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  name: string;\n  size?: number;\n}\n\nexport const Icon = ({\n  className,\n  name,\n  size,\n  style: styleProp,\n  ...htmlAttributes\n}: IconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-icon\",\n    css: iconCss,\n    window: targetWindow,\n  });\n\n  const style =\n    typeof size === \"number\"\n      ? { ...styleProp, \"--vuu-icon-size\": `${size}px` }\n      : styleProp;\n  return (\n    <span\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      data-icon={name}\n      role=\"img\"\n      style={style}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,SAAA,CAAA;AAOX,MAAM,OAAO,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAiB,KAAA;AACf,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAA,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GACJ,OAAO,IAAA,KAAS,QACZ,GAAA,EAAE,GAAG,SAAA,EAAW,iBAAmB,EAAA,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA,EAC1C,GAAA,SAAA,CAAA;AACN,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,WAAW,EAAA,IAAA;AAAA,MACX,IAAK,EAAA,KAAA;AAAA,MACL,KAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/icon-button/IconButton.css.js

@@ -0,0 +1,4 @@
+var iconButtonCss = ".vuuIconButton{\n    --saltButton-padding: var(--salt-size-unit);\n    --saltButton-minWidth: var(--salt-size-base);\n}";
+
+export { iconButtonCss as default };
+//# sourceMappingURL=IconButton.css.js.map

package/esm/icon-button/IconButton.css.js.map

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

package/esm/icon-button/IconButton.js

@@ -1,12 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
 import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { Icon } from './Icon.js';
 import { forwardRef } from 'react';
+import iconButtonCss from './IconButton.css.js';
 
 const classBase = "vuuIconButton";
 const IconButton = forwardRef(
   function IconButton2({ "aria-label": ariaLabel, className, icon, size, ...buttonProps }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-icon-button",
+      css: iconButtonCss,
+      window: targetWindow
+    });
     return /* @__PURE__ */ jsx(Button, { ...buttonProps, className: cx(classBase, className), ref, children: /* @__PURE__ */ jsx(Icon, { "aria-label": ariaLabel, name: icon, size }) });
   }
 );

package/esm/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { Button, ButtonProps } from \"@salt-ds/core\";\nimport { Icon } from \"./Icon\";\nimport { forwardRef } from \"react\";\n\nimport \"./IconButton.css\";\n\nconst classBase = \"vuuIconButton\";\n\nexport interface IconButtonProps extends Omit<ButtonProps, \"children\"> {\n  icon: string;\n  size?: number;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    { \"aria-label\": ariaLabel, className, icon, size, ...buttonProps },\n    ref\n  ) {\n    return (\n      <Button {...buttonProps} className={cx(classBase, className)} ref={ref}>\n        <Icon aria-label={ariaLabel} name={icon} size={size} />\n      </Button>\n    );\n  }\n);\n"],"names":["IconButton"],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOX,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA,EAAE,YAAc,EAAA,SAAA,EAAW,SAAW,EAAA,IAAA,EAAM,IAAM,EAAA,GAAG,WAAY,EAAA,EACjE,GACA,EAAA;AACA,IAAA,2BACG,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CAAG,EAAA,GAAA,EAC5D,8BAAC,IAAK,EAAA,EAAA,YAAA,EAAY,WAAW,IAAM,EAAA,IAAA,EAAM,MAAY,CACvD,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon } from \"./Icon\";\nimport { forwardRef } from \"react\";\n\nimport iconButtonCss from \"./IconButton.css\";\n\nconst classBase = \"vuuIconButton\";\n\nexport interface IconButtonProps extends Omit<ButtonProps, \"children\"> {\n  icon: string;\n  size?: number;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    { \"aria-label\": ariaLabel, className, icon, size, ...buttonProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-icon-button\",\n      css: iconButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Button {...buttonProps} className={cx(classBase, className)} ref={ref}>\n        <Icon aria-label={ariaLabel} name={icon} size={size} />\n      </Button>\n    );\n  }\n);\n"],"names":["IconButton"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOX,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA,EAAE,YAAc,EAAA,SAAA,EAAW,SAAW,EAAA,IAAA,EAAM,IAAM,EAAA,GAAG,WAAY,EAAA,EACjE,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAA,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,2BACG,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CAAG,EAAA,GAAA,EAC5D,8BAAC,IAAK,EAAA,EAAA,YAAA,EAAY,WAAW,IAAM,EAAA,IAAA,EAAM,MAAY,CACvD,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/esm/inputs/Checkbox.css.js

@@ -0,0 +1,4 @@
+var checkboxCss = ".vuuCheckbox {\n  --vuuCheckboxIcon-background-checked-enabled: var(--vuu-color-purple-10);\n  display: flex;\n  height: 24px;\n  align-items: center;\n  gap: 6px;\n  color: var(--light-text-primary, #15171B);\n  font-family: Nunito Sans A-Variant, serif;\n  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}";
+
+export { checkboxCss as default };
+//# sourceMappingURL=Checkbox.css.js.map

package/esm/inputs/Checkbox.css.js.map

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

package/esm/inputs/Checkbox.js

@@ -1,8 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { CheckboxIcon } from '../list/CheckboxIcon.js';
+import checkboxCss from './Checkbox.css.js';
 
 const Checkbox = (props) => {
   const { onToggle, checked, label } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-checkbox",
+    css: checkboxCss,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/esm/inputs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../src/inputs/Checkbox.tsx"],"sourcesContent":["import { CheckboxIcon } from \"../list/CheckboxIcon\";\n\nimport \"./Checkbox.css\";\n\ntype CheckboxProps = {\n  onToggle: () => void;\n  className?: string;\n  checked: boolean;\n  label: string;\n};\n\nexport const Checkbox = (props: CheckboxProps): JSX.Element => {\n  const { onToggle, checked, label } = props;\n\n  return (\n    <div\n      className=\"vuuCheckbox\"\n      onClick={onToggle}\n      onKeyUp={(e) => e.key === \" \" && onToggle()}\n    >\n      <CheckboxIcon tabIndex={0} checked={checked} />\n      {label}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAWa,MAAA,QAAA,GAAW,CAAC,KAAsC,KAAA;AAC7D,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAErC,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,aAAA;AAAA,MACV,OAAS,EAAA,QAAA;AAAA,MACT,SAAS,CAAC,CAAA,KAAM,CAAE,CAAA,GAAA,KAAQ,OAAO,QAAS,EAAA;AAAA,MAE1C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,CAAA,EAAG,OAAkB,EAAA,CAAA;AAAA,QAC5C,KAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../src/inputs/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { CheckboxIcon } from \"../list/CheckboxIcon\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\ntype CheckboxProps = {\n  onToggle: () => void;\n  className?: string;\n  checked: boolean;\n  label: string;\n};\n\nexport const Checkbox = (props: CheckboxProps): JSX.Element => {\n  const { onToggle, checked, label } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox\",\n    css: checkboxCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className=\"vuuCheckbox\"\n      onClick={onToggle}\n      onKeyUp={(e) => e.key === \" \" && onToggle()}\n    >\n      <CheckboxIcon tabIndex={0} checked={checked} />\n      {label}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAca,MAAA,QAAA,GAAW,CAAC,KAAsC,KAAA;AAC7D,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACrC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,aAAA;AAAA,MACV,OAAS,EAAA,QAAA;AAAA,MACT,SAAS,CAAC,CAAA,KAAM,CAAE,CAAA,GAAA,KAAQ,OAAO,QAAS,EAAA;AAAA,MAE1C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,CAAA,EAAG,OAAkB,EAAA,CAAA;AAAA,QAC5C,KAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/esm/inputs/RadioButton.css.js

@@ -0,0 +1,4 @@
+var radioButtonCss = ".vuuRadioButton {\n  display: flex;\n  height: 24px;\n  align-items: center;\n  gap: 6px;\n  color: var(--light-text-primary, #15171B);\n  font-family: Nunito Sans A-Variant, sans-serif;\n  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}\n\n.radio {\n  position: relative;\n  height: 12px;\n}\n\ninput[type=\"radio\"] {\n\tposition: absolute;\n  appearance: none;\n\twidth: 100%;\n  height: 100%;\n  border-radius: 50%;\n  margin: 0;\n  top: 0;\n}";
+
+export { radioButtonCss as default };
+//# sourceMappingURL=RadioButton.css.js.map

package/esm/inputs/RadioButton.css.js.map

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