@vuu-ui/vuu-ui-controls 0.13.13 → 0.13.15

package/esm/expando-input/ExpandoInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: CommitHandler;\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-input\",\n    css: expandoInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["ExpandoInput"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA;AAMN,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ExpandoInput.js","sources":["../../../../packages/vuu-ui-controls/src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: CommitHandler;\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-input\",\n    css: expandoInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["ExpandoInput"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA;AAMN,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,GACF;AAEJ,CAAC;;;;"}

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\";\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;AAOX,MAAM,OAAO,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAiB,KAAA;AACf,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAA,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,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;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;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../packages/vuu-ui-controls/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;AAOX,MAAM,OAAO,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAiB,KAAA;AACf,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAA,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,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;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;AAAA;AAAA,GACF;AAEJ;;;;"}

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 { 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;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;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAA,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,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;AAAA;AAGN;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../packages/vuu-ui-controls/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;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;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAA,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,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;AAAA;AAGN;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleIconButton.js","sources":["../../src/icon-button/ToggleIconButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { IconButton, IconButtonProps } from \"./IconButton\";\n\nimport toggleIconCss from \"./ToggleIconButton.css\";\n\nconst classBase = \"vuuToggleIconButton\";\n\nexport interface ToggleIconButtonProps extends Omit<IconButtonProps, \"icon\"> {\n  isExpanded: boolean;\n}\n\nexport const ToggleIconButton = ({\n  className,\n  isExpanded,\n  size = 7,\n  variant = \"secondary\",\n  ...props\n}: ToggleIconButtonProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-icon-button\",\n    css: toggleIconCss,\n    window: targetWindow,\n  });\n\n  const icon = isExpanded ? \"triangle-down\" : \"triangle-right\";\n  return (\n    <IconButton\n      {...props}\n      className={cx(classBase, className)}\n      icon={icon}\n      size={size}\n      variant={variant}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,SAAY,GAAA,qBAAA;AAMX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAO,GAAA,CAAA;AAAA,EACP,OAAU,GAAA,WAAA;AAAA,EACV,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,IAAA,GAAO,aAAa,eAAkB,GAAA,gBAAA;AAC5C,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,IAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ToggleIconButton.js","sources":["../../../../packages/vuu-ui-controls/src/icon-button/ToggleIconButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { IconButton, IconButtonProps } from \"./IconButton\";\n\nimport toggleIconCss from \"./ToggleIconButton.css\";\n\nconst classBase = \"vuuToggleIconButton\";\n\nexport interface ToggleIconButtonProps extends Omit<IconButtonProps, \"icon\"> {\n  isExpanded: boolean;\n}\n\nexport const ToggleIconButton = ({\n  className,\n  isExpanded,\n  size = 7,\n  variant = \"secondary\",\n  ...props\n}: ToggleIconButtonProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-icon-button\",\n    css: toggleIconCss,\n    window: targetWindow,\n  });\n\n  const icon = isExpanded ? \"triangle-down\" : \"triangle-right\";\n  return (\n    <IconButton\n      {...props}\n      className={cx(classBase, className)}\n      icon={icon}\n      size={size}\n      variant={variant}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,SAAY,GAAA,qBAAA;AAMX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAO,GAAA,CAAA;AAAA,EACP,OAAU,GAAA,WAAA;AAAA,EACV,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,IAAA,GAAO,aAAa,eAAkB,GAAA,gBAAA;AAC5C,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,IAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/esm/instrument-picker/TablePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePicker.js","sources":["../../src/instrument-picker/TablePicker.tsx"],"sourcesContent":["import type { DataSourceRowObject, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, type TableProps } from \"@vuu-ui/vuu-table\";\nimport {\n  Input,\n  useFloatingComponent,\n  useIdMemo,\n  type FloatingComponentProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport tablePickerCss from \"./TablePicker.css\";\nimport { useTablePicker } from \"./useTablePicker\";\n\nconst classBase = \"vuuTablePicker\";\n\ninterface FloatingTableProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nexport interface TablePickerProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n    Pick<TableProps, \"onSelect\"> {\n  TableProps?: Pick<TableProps, \"config\">;\n  rowToString?: (row: DataSourceRowObject) => string;\n  schema: TableSchema;\n  searchColumns?: string[];\n}\n\nconst FloatingTable = forwardRef<HTMLDivElement, FloatingTableProps>(\n  function FloatingTable(\n    { children, className, collapsed, open, ...props },\n    forwardedRef,\n  ) {\n    const { Component: FloatingComponent } = useFloatingComponent();\n    return (\n      <FloatingComponent\n        className={cx(\n          `${classBase}-floating-table`,\n          {\n            [`${classBase}-collapsed`]: collapsed,\n          },\n          className,\n        )}\n        role=\"listbox\"\n        open={open}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </FloatingComponent>\n    );\n  },\n);\n\nexport const TablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString,\n  schema,\n  searchColumns,\n  ...htmlAttributes\n}: TablePickerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-picker\",\n    css: tablePickerCss,\n    window: targetWindow,\n  });\n\n  const tableId = useIdMemo();\n\n  const {\n    containerRef,\n    dataSource,\n    highlightedIndex,\n    floatingUIProps: { x, y, strategy, floating, reference },\n    inputProps,\n    interactionPropGetters: { getFloatingProps, getReferenceProps },\n    onKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef,\n    value,\n    width,\n  } = useTablePicker({\n    TableProps,\n    rowToString,\n    onSelect,\n    schema,\n    searchColumns,\n  });\n\n  const endAdornment = useMemo(\n    () => (\n      <IconButton\n        {...getReferenceProps()}\n        data-embedded\n        ref={reference}\n        icon=\"chevron-down\"\n        onKeyDown={onKeyDown}\n        variant=\"secondary\"\n      />\n    ),\n    [getReferenceProps, onKeyDown, reference],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} ref={containerRef}>\n      <Input {...inputProps} endAdornment={endAdornment} value={value} />\n      <FloatingTable\n        {...getFloatingProps()}\n        collapsed={!open}\n        id={tableId}\n        open={open}\n        left={x + 3}\n        position={strategy}\n        ref={floating}\n        top={y + 3}\n      >\n        <Table\n          {...tableHandlers}\n          config={tableConfig}\n          dataSource={dataSource}\n          highlightedIndex={highlightedIndex}\n          maxViewportRowLimit={10}\n          navigationStyle=\"row\"\n          ref={tableRef}\n          selectionModel=\"single\"\n          showColumnHeaders={false}\n          width={width - 3}\n        />\n      </FloatingTable>\n    </div>\n  );\n};\n"],"names":["FloatingTable"],"mappings":"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"}
+{"version":3,"file":"TablePicker.js","sources":["../../../../packages/vuu-ui-controls/src/instrument-picker/TablePicker.tsx"],"sourcesContent":["import type { DataSourceRowObject, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, type TableProps } from \"@vuu-ui/vuu-table\";\nimport {\n  Input,\n  useFloatingComponent,\n  useIdMemo,\n  type FloatingComponentProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport tablePickerCss from \"./TablePicker.css\";\nimport { useTablePicker } from \"./useTablePicker\";\n\nconst classBase = \"vuuTablePicker\";\n\ninterface FloatingTableProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nexport interface TablePickerProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n    Pick<TableProps, \"onSelect\"> {\n  TableProps?: Pick<TableProps, \"config\">;\n  rowToString?: (row: DataSourceRowObject) => string;\n  schema: TableSchema;\n  searchColumns?: string[];\n}\n\nconst FloatingTable = forwardRef<HTMLDivElement, FloatingTableProps>(\n  function FloatingTable(\n    { children, className, collapsed, open, ...props },\n    forwardedRef,\n  ) {\n    const { Component: FloatingComponent } = useFloatingComponent();\n    return (\n      <FloatingComponent\n        className={cx(\n          `${classBase}-floating-table`,\n          {\n            [`${classBase}-collapsed`]: collapsed,\n          },\n          className,\n        )}\n        role=\"listbox\"\n        open={open}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </FloatingComponent>\n    );\n  },\n);\n\nexport const TablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString,\n  schema,\n  searchColumns,\n  ...htmlAttributes\n}: TablePickerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-picker\",\n    css: tablePickerCss,\n    window: targetWindow,\n  });\n\n  const tableId = useIdMemo();\n\n  const {\n    containerRef,\n    dataSource,\n    highlightedIndex,\n    floatingUIProps: { x, y, strategy, floating, reference },\n    inputProps,\n    interactionPropGetters: { getFloatingProps, getReferenceProps },\n    onKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef,\n    value,\n    width,\n  } = useTablePicker({\n    TableProps,\n    rowToString,\n    onSelect,\n    schema,\n    searchColumns,\n  });\n\n  const endAdornment = useMemo(\n    () => (\n      <IconButton\n        {...getReferenceProps()}\n        data-embedded\n        ref={reference}\n        icon=\"chevron-down\"\n        onKeyDown={onKeyDown}\n        variant=\"secondary\"\n      />\n    ),\n    [getReferenceProps, onKeyDown, reference],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} ref={containerRef}>\n      <Input {...inputProps} endAdornment={endAdornment} value={value} />\n      <FloatingTable\n        {...getFloatingProps()}\n        collapsed={!open}\n        id={tableId}\n        open={open}\n        left={x + 3}\n        position={strategy}\n        ref={floating}\n        top={y + 3}\n      >\n        <Table\n          {...tableHandlers}\n          config={tableConfig}\n          dataSource={dataSource}\n          highlightedIndex={highlightedIndex}\n          maxViewportRowLimit={10}\n          navigationStyle=\"row\"\n          ref={tableRef}\n          selectionModel=\"single\"\n          showColumnHeaders={false}\n          width={width - 3}\n        />\n      </FloatingTable>\n    </div>\n  );\n};\n"],"names":["FloatingTable"],"mappings":"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"}

package/esm/instrument-picker/useTablePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTablePicker.js","sources":["../../src/instrument-picker/useTablePicker.ts"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useFloatingUI } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { DataSourceRowObject } from \"@vuu-ui/vuu-data-types\";\nimport type {\n  TableConfig,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useData } from \"@vuu-ui/vuu-utils\";\nimport type { TablePickerProps } from \"./TablePicker\";\nimport {\n  isNavigationKey,\n  isRowSelectionKey,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\n\nexport interface TablePickerHookProps\n  extends Pick<\n    TablePickerProps,\n    \"TableProps\" | \"onSelect\" | \"rowToString\" | \"schema\" | \"searchColumns\"\n  > {\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultRowToString = (row: DataSourceRowObject) =>\n  Object.values(row.data).join(\" \");\n\nexport const useTablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString = defaultRowToString,\n  schema,\n  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName),\n}: TablePickerHookProps) => {\n  const { VuuDataSource } = useData();\n  const [value, setValue] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const widthRef = useRef(-1);\n\n  const tableColumns = TableProps?.config.columns;\n\n  const containerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    widthRef.current = el?.clientWidth ?? -1;\n  }, []);\n\n  const dataSource = useMemo(() => {\n    const columns = tableColumns ?? schema.columns;\n\n    return new VuuDataSource({\n      columns: columns.map((c) => c.name),\n      table: schema.table,\n    });\n  }, [tableColumns, VuuDataSource, schema]);\n\n  const navigation = useControlledTableNavigation(-1, dataSource.size);\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  // const handleOpenChange = useCallback<OpenChangeHandler>(\n  //   (open, closeReason) => {\n  //     setIsOpen(open);\n  //     onOpenChange?.(open, closeReason);\n  //   },\n  //   [onOpenChange, setIsOpen],\n  // );\n\n  const { context, elements, ...floatingUIProps } = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    strategy: \"fixed\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const interactionPropGetters = useInteractions([\n    useDismiss(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      console.log(`input changed ${value}`);\n\n      if (value && value.trim().length) {\n        const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n        dataSource.filter = {\n          filter,\n        };\n      } else {\n        dataSource.filter = {\n          filter: \"\",\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (row) => {\n      const value = row === null ? \"\" : rowToString(row);\n      setValue(value);\n      onSelect?.(row);\n      // TODO do we need to include a reason ?\n      requestAnimationFrame(() => {\n        setOpen(false);\n      });\n    },\n    [onSelect, rowToString],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (evt) => {\n      if (open) {\n        if (isNavigationKey(evt.key, \"row\") || isRowSelectionKey(evt.key)) {\n          navigation.onKeyDown(evt);\n        }\n      } else {\n        if (evt.key === \"ArrowDown\" || evt.key === \"Enter\") {\n          setOpen(true);\n        }\n      }\n    },\n    [navigation, open],\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    const config = TableProps?.config;\n    if (config) {\n      const {\n        columns = schema.columns,\n        columnLayout = \"fit\",\n        ...rest\n      } = config;\n      return {\n        columns,\n        columnLayout,\n        ...rest,\n      };\n    } else {\n      return {\n        columnLayout: \"fit\",\n        columns: schema.columns,\n      };\n    }\n  }, [TableProps, schema]);\n\n  return {\n    containerRef,\n    dataSource,\n    highlightedIndex: navigation.highlightedIndexRef.current,\n    floatingUIProps,\n    inputProps,\n    interactionPropGetters,\n    onKeyDown: handleKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef: navigation.tableRef,\n    value,\n    width: widthRef.current,\n  };\n};\n"],"names":["elements","value"],"mappings":"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"}
+{"version":3,"file":"useTablePicker.js","sources":["../../../../packages/vuu-ui-controls/src/instrument-picker/useTablePicker.ts"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useFloatingUI } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { DataSourceRowObject } from \"@vuu-ui/vuu-data-types\";\nimport type {\n  TableConfig,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useData } from \"@vuu-ui/vuu-utils\";\nimport type { TablePickerProps } from \"./TablePicker\";\nimport {\n  isNavigationKey,\n  isRowSelectionKey,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\n\nexport interface TablePickerHookProps\n  extends Pick<\n    TablePickerProps,\n    \"TableProps\" | \"onSelect\" | \"rowToString\" | \"schema\" | \"searchColumns\"\n  > {\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultRowToString = (row: DataSourceRowObject) =>\n  Object.values(row.data).join(\" \");\n\nexport const useTablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString = defaultRowToString,\n  schema,\n  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName),\n}: TablePickerHookProps) => {\n  const { VuuDataSource } = useData();\n  const [value, setValue] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const widthRef = useRef(-1);\n\n  const tableColumns = TableProps?.config.columns;\n\n  const containerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    widthRef.current = el?.clientWidth ?? -1;\n  }, []);\n\n  const dataSource = useMemo(() => {\n    const columns = tableColumns ?? schema.columns;\n\n    return new VuuDataSource({\n      columns: columns.map((c) => c.name),\n      table: schema.table,\n    });\n  }, [tableColumns, VuuDataSource, schema]);\n\n  const navigation = useControlledTableNavigation(-1, dataSource.size);\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  // const handleOpenChange = useCallback<OpenChangeHandler>(\n  //   (open, closeReason) => {\n  //     setIsOpen(open);\n  //     onOpenChange?.(open, closeReason);\n  //   },\n  //   [onOpenChange, setIsOpen],\n  // );\n\n  const { context, elements, ...floatingUIProps } = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    strategy: \"fixed\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const interactionPropGetters = useInteractions([\n    useDismiss(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      console.log(`input changed ${value}`);\n\n      if (value && value.trim().length) {\n        const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n        dataSource.filter = {\n          filter,\n        };\n      } else {\n        dataSource.filter = {\n          filter: \"\",\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (row) => {\n      const value = row === null ? \"\" : rowToString(row);\n      setValue(value);\n      onSelect?.(row);\n      // TODO do we need to include a reason ?\n      requestAnimationFrame(() => {\n        setOpen(false);\n      });\n    },\n    [onSelect, rowToString],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (evt) => {\n      if (open) {\n        if (isNavigationKey(evt.key, \"row\") || isRowSelectionKey(evt.key)) {\n          navigation.onKeyDown(evt);\n        }\n      } else {\n        if (evt.key === \"ArrowDown\" || evt.key === \"Enter\") {\n          setOpen(true);\n        }\n      }\n    },\n    [navigation, open],\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    const config = TableProps?.config;\n    if (config) {\n      const {\n        columns = schema.columns,\n        columnLayout = \"fit\",\n        ...rest\n      } = config;\n      return {\n        columns,\n        columnLayout,\n        ...rest,\n      };\n    } else {\n      return {\n        columnLayout: \"fit\",\n        columns: schema.columns,\n      };\n    }\n  }, [TableProps, schema]);\n\n  return {\n    containerRef,\n    dataSource,\n    highlightedIndex: navigation.highlightedIndexRef.current,\n    floatingUIProps,\n    inputProps,\n    interactionPropGetters,\n    onKeyDown: handleKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef: navigation.tableRef,\n    value,\n    width: widthRef.current,\n  };\n};\n"],"names":["elements","value"],"mappings":"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"}

package/esm/measured-container/MeasuredContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeasuredContainer.js","sources":["../../src/measured-container/MeasuredContainer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, forwardRef, ForwardedRef, HTMLAttributes } from \"react\";\nimport { MeasuredSize, useMeasuredContainer } from \"./useMeasuredContainer\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\n\nimport measuredContainerCss from \"./MeasuredContainer.css\";\n\nexport interface MeasuredContainerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  /**\n   * A numeric value for height will result in a fixed height. To adapt to container\n   * use either a percentage height or 'auto'. Always use 'auto' when rendering\n   * within a column based flex container, together with a flex value (use the\n   * --vuuMeasuredContainer-flex CSS custom property))\n   */\n  height?: number | string;\n  onResize?: (size: MeasuredSize) => void;\n  width?: number | string;\n}\n\nconst baseClass = \"vuuMeasuredContainer\";\n\nexport const MeasuredContainer = forwardRef(function MeasuredContainer(\n  {\n    children,\n    className,\n    height,\n    onResize,\n    style,\n    width,\n    ...htmlAttributes\n  }: MeasuredContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-measured-container\",\n    css: measuredContainerCss,\n    window: targetWindow,\n  });\n\n  const { containerRef, ...containerMeasurements } = useMeasuredContainer({\n    height,\n    onResize,\n    width,\n  });\n\n  const { cssSize, innerSize } = containerMeasurements;\n  const unmeasured = innerSize === undefined;\n\n  const getStyle = () => {\n    return unmeasured\n      ? ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n        } as CSSProperties)\n      : ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n          \"--measured-px-height\": `${innerSize?.height}px`,\n          \"--measured-px-width\": `${innerSize?.width}px`,\n        } as CSSProperties);\n  };\n\n  const forkedRef = useForkRef(containerRef, forwardedRef);\n\n  return unmeasured ? (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, `${baseClass}-ummeasured`)}\n      style={getStyle()}\n      ref={containerRef}\n    />\n  ) : (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, className)}\n      ref={forkedRef}\n      style={getStyle()}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["MeasuredContainer"],"mappings":";;;;;;;;;AAsBA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoB,UAAW,CAAA,SAASA,kBACnD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0B,oBAAqB,CAAA;AAAA,IACtE,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,qBAAA;AAC/B,EAAA,MAAM,aAAa,SAAc,KAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,OAAO,UACF,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KAEzC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,MACxC,sBAAA,EAAwB,CAAG,EAAA,SAAA,EAAW,MAAM,CAAA,EAAA,CAAA;AAAA,MAC5C,qBAAA,EAAuB,CAAG,EAAA,SAAA,EAAW,KAAK,CAAA,EAAA;AAAA,KAC5C;AAAA,GACN;AAEA,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAEvD,EAAA,OAAO,UACL,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,MAClD,OAAO,QAAS,EAAA;AAAA,MAChB,GAAK,EAAA;AAAA;AAAA,GAGP,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,SAAA;AAAA,MACL,OAAO,QAAS,EAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MeasuredContainer.js","sources":["../../../../packages/vuu-ui-controls/src/measured-container/MeasuredContainer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, forwardRef, ForwardedRef, HTMLAttributes } from \"react\";\nimport { MeasuredSize, useMeasuredContainer } from \"./useMeasuredContainer\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\n\nimport measuredContainerCss from \"./MeasuredContainer.css\";\n\nexport interface MeasuredContainerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  /**\n   * A numeric value for height will result in a fixed height. To adapt to container\n   * use either a percentage height or 'auto'. Always use 'auto' when rendering\n   * within a column based flex container, together with a flex value (use the\n   * --vuuMeasuredContainer-flex CSS custom property))\n   */\n  height?: number | string;\n  onResize?: (size: MeasuredSize) => void;\n  width?: number | string;\n}\n\nconst baseClass = \"vuuMeasuredContainer\";\n\nexport const MeasuredContainer = forwardRef(function MeasuredContainer(\n  {\n    children,\n    className,\n    height,\n    onResize,\n    style,\n    width,\n    ...htmlAttributes\n  }: MeasuredContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-measured-container\",\n    css: measuredContainerCss,\n    window: targetWindow,\n  });\n\n  const { containerRef, ...containerMeasurements } = useMeasuredContainer({\n    height,\n    onResize,\n    width,\n  });\n\n  const { cssSize, innerSize } = containerMeasurements;\n  const unmeasured = innerSize === undefined;\n\n  const getStyle = () => {\n    return unmeasured\n      ? ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n        } as CSSProperties)\n      : ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n          \"--measured-px-height\": `${innerSize?.height}px`,\n          \"--measured-px-width\": `${innerSize?.width}px`,\n        } as CSSProperties);\n  };\n\n  const forkedRef = useForkRef(containerRef, forwardedRef);\n\n  return unmeasured ? (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, `${baseClass}-ummeasured`)}\n      style={getStyle()}\n      ref={containerRef}\n    />\n  ) : (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, className)}\n      ref={forkedRef}\n      style={getStyle()}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["MeasuredContainer"],"mappings":";;;;;;;;;AAsBA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoB,UAAW,CAAA,SAASA,kBACnD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0B,oBAAqB,CAAA;AAAA,IACtE,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,qBAAA;AAC/B,EAAA,MAAM,aAAa,SAAc,KAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,OAAO,UACF,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KAEzC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,MACxC,sBAAA,EAAwB,CAAG,EAAA,SAAA,EAAW,MAAM,CAAA,EAAA,CAAA;AAAA,MAC5C,qBAAA,EAAuB,CAAG,EAAA,SAAA,EAAW,KAAK,CAAA,EAAA;AAAA,KAC5C;AAAA,GACN;AAEA,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAEvD,EAAA,OAAO,UACL,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,MAClD,OAAO,QAAS,EAAA;AAAA,MAChB,GAAK,EAAA;AAAA;AAAA,GAGP,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,SAAA;AAAA,MACL,OAAO,QAAS,EAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/esm/measured-container/useMeasuredContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMeasuredContainer.js","sources":["../../src/measured-container/useMeasuredContainer.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { MeasuredContainerProps } from \"./MeasuredContainer\";\nimport { useResizeObserver, ResizeHandler } from \"./useResizeObserver\";\n\nconst ClientWidthHeight = [\"clientHeight\", \"clientWidth\"];\nconst WidthOnly = [\"clientWidth\"];\nconst HeightOnly = [\"clientHeight\"];\nconst NO_MEASUREMENT = [] as const;\n\nexport interface ClientSize {\n  clientHeight: number;\n  clientWidth: number;\n}\n\nexport interface MeasuredProps\n  extends Pick<MeasuredContainerProps, \"height\" | \"onResize\" | \"width\"> {\n  defaultHeight?: number;\n  defaultWidth?: number;\n}\n\nexport type CssSize = Pick<CSSProperties, \"height\" | \"width\">;\n\nexport interface MeasuredSize {\n  height: number;\n  width: number;\n}\n\ninterface MeasuredState {\n  css: CssSize;\n  outer: CssSize;\n  inner?: MeasuredSize;\n}\n\nconst isNumber = (val: unknown): val is number => Number.isFinite(val);\n\nexport interface MeasuredContainerHookResult {\n  containerRef: RefObject<HTMLDivElement | null>;\n  cssSize: CssSize;\n  outerSize: CssSize;\n  innerSize?: MeasuredSize;\n}\n\nexport const reduceSizeHeight = (\n  size: MeasuredSize,\n  value: number,\n): MeasuredSize => {\n  if (value === 0) {\n    return size;\n  } else {\n    return {\n      height: size.height - value,\n      width: size.width,\n    };\n  }\n};\n\nconst getInitialValue = (\n  value: number | string | undefined,\n  defaultValue: \"auto\" | \"100%\",\n) => {\n  if (isValidNumber(value)) {\n    return `${value}px`;\n  } else if (typeof value === \"string\") {\n    return value;\n  } else {\n    return defaultValue;\n  }\n};\n\n// If (outer) height and width are known at initialisation (i.e. they\n// were passed as props), use as initial values for inner size. If there\n// is no border on Table, these values will not change. If there is a border,\n// inner values will be updated once measured.\nconst getInitialCssSize = (\n  height?: number | string,\n  width?: number | string,\n): CssSize => {\n  return {\n    height: getInitialValue(height, \"100%\"),\n    width: getInitialValue(width, \"auto\"),\n  };\n};\n\nconst getInitialInnerSize = (\n  height: unknown,\n  width: unknown,\n): MeasuredSize | undefined => {\n  if (isValidNumber(height) && isValidNumber(width)) {\n    return {\n      height,\n      width,\n    };\n  }\n};\n\nexport const useMeasuredContainer = ({\n  defaultHeight = 0,\n  defaultWidth = 0,\n  height,\n  onResize: onResizeProp,\n  width,\n}: MeasuredProps): MeasuredContainerHookResult => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<MeasuredState>({\n    css: getInitialCssSize(height, width),\n    inner: getInitialInnerSize(height, width),\n    outer: {\n      height: height ?? \"100%\",\n      width: width ?? \"auto\",\n    },\n  });\n  const fixedHeight = typeof height === \"number\";\n  const fixedWidth = typeof width === \"number\";\n\n  const dimensions =\n    fixedHeight && fixedWidth\n      ? NO_MEASUREMENT\n      : fixedHeight\n        ? WidthOnly\n        : fixedWidth\n          ? HeightOnly\n          : ClientWidthHeight;\n\n  useMemo(() => {\n    // TODO why call state from memo.\n    // Why not calculate size first inline, then assign that to state\n    // on first pass\n    setSize((currentSize) => {\n      const { inner, outer } = currentSize;\n      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {\n        const { height: innerHeight, width: innerWidth } = inner;\n        const { height: outerHeight, width: outerWidth } = outer;\n\n        if (outerHeight !== height || outerWidth !== width) {\n          const heightDiff = isValidNumber(outerHeight)\n            ? outerHeight - innerHeight\n            : 0;\n          const widthDiff = isValidNumber(outerWidth)\n            ? outerWidth - innerWidth\n            : 0;\n          return {\n            ...currentSize,\n            outer: { height, width },\n            inner: { height: height - heightDiff, width: width - widthDiff },\n          };\n        }\n      }\n      return currentSize;\n    });\n  }, [height, width]);\n\n  const onResize: ResizeHandler = useCallback(\n    ({ clientWidth, clientHeight }: Partial<ClientSize>) => {\n      const { css, inner, outer } = size;\n      let newState: MeasuredState = size;\n\n      if (\n        fixedHeight &&\n        isNumber(clientWidth) &&\n        Math.floor(clientWidth) !== inner?.width\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height,\n          },\n        };\n      } else if (\n        fixedWidth &&\n        isNumber(clientHeight) &&\n        Math.floor(clientHeight) !== inner?.height\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            height: Math.floor(clientHeight) || defaultHeight,\n            width,\n          },\n        };\n      } else if (\n        isNumber(clientHeight) &&\n        isNumber(clientWidth) &&\n        (clientWidth !== inner?.width || clientHeight !== inner?.height)\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height: Math.floor(clientHeight) || defaultHeight,\n          },\n        };\n      }\n\n      if (newState !== size) {\n        setSize(newState);\n      }\n    },\n    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width],\n  );\n\n  useEffect(() => {\n    if (size.inner) {\n      if (containerRef.current) {\n        // reassign using clientWidth to correctly account for borders\n        size.inner.width = containerRef.current.clientWidth;\n        onResizeProp?.(size.inner);\n      }\n    }\n  }, [onResizeProp, size.inner]);\n\n  useResizeObserver(containerRef, dimensions, onResize, true);\n\n  return {\n    containerRef,\n    cssSize: size.css,\n    outerSize: size.outer,\n    innerSize: size.inner,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMeasuredContainer.js","sources":["../../../../packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { MeasuredContainerProps } from \"./MeasuredContainer\";\nimport { useResizeObserver, ResizeHandler } from \"./useResizeObserver\";\n\nconst ClientWidthHeight = [\"clientHeight\", \"clientWidth\"];\nconst WidthOnly = [\"clientWidth\"];\nconst HeightOnly = [\"clientHeight\"];\nconst NO_MEASUREMENT = [] as const;\n\nexport interface ClientSize {\n  clientHeight: number;\n  clientWidth: number;\n}\n\nexport interface MeasuredProps\n  extends Pick<MeasuredContainerProps, \"height\" | \"onResize\" | \"width\"> {\n  defaultHeight?: number;\n  defaultWidth?: number;\n}\n\nexport type CssSize = Pick<CSSProperties, \"height\" | \"width\">;\n\nexport interface MeasuredSize {\n  height: number;\n  width: number;\n}\n\ninterface MeasuredState {\n  css: CssSize;\n  outer: CssSize;\n  inner?: MeasuredSize;\n}\n\nconst isNumber = (val: unknown): val is number => Number.isFinite(val);\n\nexport interface MeasuredContainerHookResult {\n  containerRef: RefObject<HTMLDivElement | null>;\n  cssSize: CssSize;\n  outerSize: CssSize;\n  innerSize?: MeasuredSize;\n}\n\nexport const reduceSizeHeight = (\n  size: MeasuredSize,\n  value: number,\n): MeasuredSize => {\n  if (value === 0) {\n    return size;\n  } else {\n    return {\n      height: size.height - value,\n      width: size.width,\n    };\n  }\n};\n\nconst getInitialValue = (\n  value: number | string | undefined,\n  defaultValue: \"auto\" | \"100%\",\n) => {\n  if (isValidNumber(value)) {\n    return `${value}px`;\n  } else if (typeof value === \"string\") {\n    return value;\n  } else {\n    return defaultValue;\n  }\n};\n\n// If (outer) height and width are known at initialisation (i.e. they\n// were passed as props), use as initial values for inner size. If there\n// is no border on Table, these values will not change. If there is a border,\n// inner values will be updated once measured.\nconst getInitialCssSize = (\n  height?: number | string,\n  width?: number | string,\n): CssSize => {\n  return {\n    height: getInitialValue(height, \"100%\"),\n    width: getInitialValue(width, \"auto\"),\n  };\n};\n\nconst getInitialInnerSize = (\n  height: unknown,\n  width: unknown,\n): MeasuredSize | undefined => {\n  if (isValidNumber(height) && isValidNumber(width)) {\n    return {\n      height,\n      width,\n    };\n  }\n};\n\nexport const useMeasuredContainer = ({\n  defaultHeight = 0,\n  defaultWidth = 0,\n  height,\n  onResize: onResizeProp,\n  width,\n}: MeasuredProps): MeasuredContainerHookResult => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<MeasuredState>({\n    css: getInitialCssSize(height, width),\n    inner: getInitialInnerSize(height, width),\n    outer: {\n      height: height ?? \"100%\",\n      width: width ?? \"auto\",\n    },\n  });\n  const fixedHeight = typeof height === \"number\";\n  const fixedWidth = typeof width === \"number\";\n\n  const dimensions =\n    fixedHeight && fixedWidth\n      ? NO_MEASUREMENT\n      : fixedHeight\n        ? WidthOnly\n        : fixedWidth\n          ? HeightOnly\n          : ClientWidthHeight;\n\n  useMemo(() => {\n    // TODO why call state from memo.\n    // Why not calculate size first inline, then assign that to state\n    // on first pass\n    setSize((currentSize) => {\n      const { inner, outer } = currentSize;\n      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {\n        const { height: innerHeight, width: innerWidth } = inner;\n        const { height: outerHeight, width: outerWidth } = outer;\n\n        if (outerHeight !== height || outerWidth !== width) {\n          const heightDiff = isValidNumber(outerHeight)\n            ? outerHeight - innerHeight\n            : 0;\n          const widthDiff = isValidNumber(outerWidth)\n            ? outerWidth - innerWidth\n            : 0;\n          return {\n            ...currentSize,\n            outer: { height, width },\n            inner: { height: height - heightDiff, width: width - widthDiff },\n          };\n        }\n      }\n      return currentSize;\n    });\n  }, [height, width]);\n\n  const onResize: ResizeHandler = useCallback(\n    ({ clientWidth, clientHeight }: Partial<ClientSize>) => {\n      const { css, inner, outer } = size;\n      let newState: MeasuredState = size;\n\n      if (\n        fixedHeight &&\n        isNumber(clientWidth) &&\n        Math.floor(clientWidth) !== inner?.width\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height,\n          },\n        };\n      } else if (\n        fixedWidth &&\n        isNumber(clientHeight) &&\n        Math.floor(clientHeight) !== inner?.height\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            height: Math.floor(clientHeight) || defaultHeight,\n            width,\n          },\n        };\n      } else if (\n        isNumber(clientHeight) &&\n        isNumber(clientWidth) &&\n        (clientWidth !== inner?.width || clientHeight !== inner?.height)\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height: Math.floor(clientHeight) || defaultHeight,\n          },\n        };\n      }\n\n      if (newState !== size) {\n        setSize(newState);\n      }\n    },\n    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width],\n  );\n\n  useEffect(() => {\n    if (size.inner) {\n      if (containerRef.current) {\n        // reassign using clientWidth to correctly account for borders\n        size.inner.width = containerRef.current.clientWidth;\n        onResizeProp?.(size.inner);\n      }\n    }\n  }, [onResizeProp, size.inner]);\n\n  useResizeObserver(containerRef, dimensions, onResize, true);\n\n  return {\n    containerRef,\n    cssSize: size.css,\n    outerSize: size.outer,\n    innerSize: size.inner,\n  };\n};\n"],"names":[],"mappings":";;;;AAaA,MAAM,iBAAA,GAAoB,CAAC,cAAA,EAAgB,aAAa,CAAA;AACxD,MAAM,SAAA,GAAY,CAAC,aAAa,CAAA;AAChC,MAAM,UAAA,GAAa,CAAC,cAAc,CAAA;AAClC,MAAM,iBAAiB,EAAC;AA0BxB,MAAM,QAAW,GAAA,CAAC,GAAgC,KAAA,MAAA,CAAO,SAAS,GAAG,CAAA;AASxD,MAAA,gBAAA,GAAmB,CAC9B,IAAA,EACA,KACiB,KAAA;AACjB,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,IAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA;AAAA,MACL,MAAA,EAAQ,KAAK,MAAS,GAAA,KAAA;AAAA,MACtB,OAAO,IAAK,CAAA;AAAA,KACd;AAAA;AAEJ;AAEA,MAAM,eAAA,GAAkB,CACtB,KAAA,EACA,YACG,KAAA;AACH,EAAI,IAAA,aAAA,CAAc,KAAK,CAAG,EAAA;AACxB,IAAA,OAAO,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,GACjB,MAAA,IAAW,OAAO,KAAA,KAAU,QAAU,EAAA;AACpC,IAAO,OAAA,KAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,YAAA;AAAA;AAEX,CAAA;AAMA,MAAM,iBAAA,GAAoB,CACxB,MAAA,EACA,KACY,KAAA;AACZ,EAAO,OAAA;AAAA,IACL,MAAA,EAAQ,eAAgB,CAAA,MAAA,EAAQ,MAAM,CAAA;AAAA,IACtC,KAAA,EAAO,eAAgB,CAAA,KAAA,EAAO,MAAM;AAAA,GACtC;AACF,CAAA;AAEA,MAAM,mBAAA,GAAsB,CAC1B,MAAA,EACA,KAC6B,KAAA;AAC7B,EAAA,IAAI,aAAc,CAAA,MAAM,CAAK,IAAA,aAAA,CAAc,KAAK,CAAG,EAAA;AACjD,IAAO,OAAA;AAAA,MACL,MAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,aAAgB,GAAA,CAAA;AAAA,EAChB,YAAe,GAAA,CAAA;AAAA,EACf,MAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV;AACF,CAAkD,KAAA;AAChD,EAAM,MAAA,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAwB,CAAA;AAAA,IAC9C,GAAA,EAAK,iBAAkB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAAA,IACpC,KAAA,EAAO,mBAAoB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAAA,IACxC,KAAO,EAAA;AAAA,MACL,QAAQ,MAAU,IAAA,MAAA;AAAA,MAClB,OAAO,KAAS,IAAA;AAAA;AAClB,GACD,CAAA;AACD,EAAM,MAAA,WAAA,GAAc,OAAO,MAAW,KAAA,QAAA;AACtC,EAAM,MAAA,UAAA,GAAa,OAAO,KAAU,KAAA,QAAA;AAEpC,EAAA,MAAM,aACJ,WAAe,IAAA,UAAA,GACX,iBACA,WACE,GAAA,SAAA,GACA,aACE,UACA,GAAA,iBAAA;AAEV,EAAA,OAAA,CAAQ,MAAM;AAIZ,IAAA,OAAA,CAAQ,CAAC,WAAgB,KAAA;AACvB,MAAM,MAAA,EAAE,KAAO,EAAA,KAAA,EAAU,GAAA,WAAA;AACzB,MAAA,IAAI,cAAc,MAAM,CAAA,IAAK,cAAc,KAAK,CAAA,IAAK,SAAS,KAAO,EAAA;AACnE,QAAA,MAAM,EAAE,MAAA,EAAQ,WAAa,EAAA,KAAA,EAAO,YAAe,GAAA,KAAA;AACnD,QAAA,MAAM,EAAE,MAAA,EAAQ,WAAa,EAAA,KAAA,EAAO,YAAe,GAAA,KAAA;AAEnD,QAAI,IAAA,WAAA,KAAgB,MAAU,IAAA,UAAA,KAAe,KAAO,EAAA;AAClD,UAAA,MAAM,UAAa,GAAA,aAAA,CAAc,WAAW,CAAA,GACxC,cAAc,WACd,GAAA,CAAA;AACJ,UAAA,MAAM,SAAY,GAAA,aAAA,CAAc,UAAU,CAAA,GACtC,aAAa,UACb,GAAA,CAAA;AACJ,UAAO,OAAA;AAAA,YACL,GAAG,WAAA;AAAA,YACH,KAAA,EAAO,EAAE,MAAA,EAAQ,KAAM,EAAA;AAAA,YACvB,OAAO,EAAE,MAAA,EAAQ,SAAS,UAAY,EAAA,KAAA,EAAO,QAAQ,SAAU;AAAA,WACjE;AAAA;AACF;AAEF,MAAO,OAAA,WAAA;AAAA,KACR,CAAA;AAAA,GACA,EAAA,CAAC,MAAQ,EAAA,KAAK,CAAC,CAAA;AAElB,EAAA,MAAM,QAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,EAAE,WAAa,EAAA,YAAA,EAAwC,KAAA;AACtD,MAAA,MAAM,EAAE,GAAA,EAAK,KAAO,EAAA,KAAA,EAAU,GAAA,IAAA;AAC9B,MAAA,IAAI,QAA0B,GAAA,IAAA;AAE9B,MACE,IAAA,WAAA,IACA,SAAS,WAAW,CAAA,IACpB,KAAK,KAAM,CAAA,WAAW,CAAM,KAAA,KAAA,EAAO,KACnC,EAAA;AACA,QAAW,QAAA,GAAA;AAAA,UACT,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,WAAW,CAAK,IAAA,YAAA;AAAA,YAClC;AAAA;AACF,SACF;AAAA,OACF,MAAA,IACE,UACA,IAAA,QAAA,CAAS,YAAY,CAAA,IACrB,KAAK,KAAM,CAAA,YAAY,CAAM,KAAA,KAAA,EAAO,MACpC,EAAA;AACA,QAAW,QAAA,GAAA;AAAA,UACT,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACL,MAAQ,EAAA,IAAA,CAAK,KAAM,CAAA,YAAY,CAAK,IAAA,aAAA;AAAA,YACpC;AAAA;AACF,SACF;AAAA,OAEA,MAAA,IAAA,QAAA,CAAS,YAAY,CAAA,IACrB,QAAS,CAAA,WAAW,CACnB,KAAA,WAAA,KAAgB,KAAO,EAAA,KAAA,IAAS,YAAiB,KAAA,KAAA,EAAO,MACzD,CAAA,EAAA;AACA,QAAW,QAAA,GAAA;AAAA,UACT,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,WAAW,CAAK,IAAA,YAAA;AAAA,YAClC,MAAQ,EAAA,IAAA,CAAK,KAAM,CAAA,YAAY,CAAK,IAAA;AAAA;AACtC,SACF;AAAA;AAGF,MAAA,IAAI,aAAa,IAAM,EAAA;AACrB,QAAA,OAAA,CAAQ,QAAQ,CAAA;AAAA;AAClB,KACF;AAAA,IACA,CAAC,aAAe,EAAA,YAAA,EAAc,aAAa,UAAY,EAAA,MAAA,EAAQ,MAAM,KAAK;AAAA,GAC5E;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAK,KAAO,EAAA;AACd,MAAA,IAAI,aAAa,OAAS,EAAA;AAExB,QAAK,IAAA,CAAA,KAAA,CAAM,KAAQ,GAAA,YAAA,CAAa,OAAQ,CAAA,WAAA;AACxC,QAAA,YAAA,GAAe,KAAK,KAAK,CAAA;AAAA;AAC3B;AACF,GACC,EAAA,CAAC,YAAc,EAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AAE7B,EAAkB,iBAAA,CAAA,YAAA,EAAc,UAAY,EAAA,QAAA,EAAU,IAAI,CAAA;AAE1D,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,IACA,SAAS,IAAK,CAAA,GAAA;AAAA,IACd,WAAW,IAAK,CAAA,KAAA;AAAA,IAChB,WAAW,IAAK,CAAA;AAAA,GAClB;AACF;;;;"}

package/esm/measured-container/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../src/measured-container/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from \"react\";\n\nexport const WidthHeight = [\"height\", \"width\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  clientHeight?: number;\n  clientWidth?: number;\n  contentHeight?: number;\n  contentWidth?: number;\n  scrollHeight?: number;\n  scrollWidth?: number;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new Map<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  size: {\n    height: number;\n    width: number;\n    contentHeight: number;\n    contentWidth: number;\n  },\n  dimension: measuredDimension,\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return size.height;\n    case \"clientHeight\":\n      return Math.floor(element.clientHeight);\n    case \"clientWidth\":\n      return Math.floor(element.clientWidth);\n    case \"contentHeight\":\n      return size.contentHeight;\n    case \"contentWidth\":\n      return size.contentWidth;\n    case \"scrollHeight\":\n      return Math.ceil(Math.floor(element.scrollHeight));\n    case \"scrollWidth\":\n      return Math.ceil(Math.floor(element.scrollWidth));\n    case \"width\":\n      return size.width;\n    default:\n      return 0;\n  }\n};\n\n// TODO should we make this create-on-demand\nconst resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n  for (const entry of entries) {\n    const { target, borderBoxSize, contentBoxSize } = entry;\n    const observedTarget = observedMap.get(target as HTMLElement);\n    if (observedTarget) {\n      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;\n      const [{ blockSize: contentHeight, inlineSize: contentWidth }] =\n        contentBoxSize;\n      const { onResize, measurements } = observedTarget;\n      let sizeChanged = false;\n      for (const [dimension, size] of Object.entries(measurements)) {\n        const newSize = getTargetSize(\n          target as HTMLElement,\n          { height, width, contentHeight, contentWidth },\n          dimension as measuredDimension,\n        );\n\n        if (newSize !== size) {\n          sizeChanged = true;\n          measurements[dimension as measuredDimension] = newSize;\n        }\n      }\n      if (sizeChanged) {\n        // TODO only return measured sizes\n        onResize && onResize(measurements);\n      }\n    }\n  }\n});\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: readonly string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false,\n) {\n  const dimensionsRef = useRef(dimensions);\n\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const { width, height } = target.getBoundingClientRect();\n    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;\n    const flooredHeight = Math.floor(height);\n    const flooredWidth = Math.floor(width);\n\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(\n          target,\n          {\n            width: flooredWidth,\n            height: flooredHeight,\n            contentHeight,\n            contentWidth,\n          },\n          dim as measuredDimension,\n        );\n        return map;\n      },\n      {},\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      // await document.fonts.ready;\n      const observedTarget = observedMap.get(target);\n      if (observedTarget) {\n        const measurements = measure(target);\n        observedTarget.measurements = measurements;\n        resizeObserver.observe(target);\n        if (reportInitialSize) {\n          onResize(measurements);\n        }\n      } else {\n        console.log(\n          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,\n          \"font-weight:bold; color:red;\",\n        );\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        console.log(\n          `useResizeObserver attemping to observe same element twice`,\n          {\n            target,\n          },\n        );\n        // throw Error(\n        //   \"useResizeObserver attemping to observe same element twice\"\n        // );\n      }\n      // TODO set a pending entry on map\n      registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [measure, ref]);\n\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useResizeObserver.js","sources":["../../../../packages/vuu-ui-controls/src/measured-container/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from \"react\";\n\nexport const WidthHeight = [\"height\", \"width\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  clientHeight?: number;\n  clientWidth?: number;\n  contentHeight?: number;\n  contentWidth?: number;\n  scrollHeight?: number;\n  scrollWidth?: number;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new Map<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  size: {\n    height: number;\n    width: number;\n    contentHeight: number;\n    contentWidth: number;\n  },\n  dimension: measuredDimension,\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return size.height;\n    case \"clientHeight\":\n      return Math.floor(element.clientHeight);\n    case \"clientWidth\":\n      return Math.floor(element.clientWidth);\n    case \"contentHeight\":\n      return size.contentHeight;\n    case \"contentWidth\":\n      return size.contentWidth;\n    case \"scrollHeight\":\n      return Math.ceil(Math.floor(element.scrollHeight));\n    case \"scrollWidth\":\n      return Math.ceil(Math.floor(element.scrollWidth));\n    case \"width\":\n      return size.width;\n    default:\n      return 0;\n  }\n};\n\n// TODO should we make this create-on-demand\nconst resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n  for (const entry of entries) {\n    const { target, borderBoxSize, contentBoxSize } = entry;\n    const observedTarget = observedMap.get(target as HTMLElement);\n    if (observedTarget) {\n      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;\n      const [{ blockSize: contentHeight, inlineSize: contentWidth }] =\n        contentBoxSize;\n      const { onResize, measurements } = observedTarget;\n      let sizeChanged = false;\n      for (const [dimension, size] of Object.entries(measurements)) {\n        const newSize = getTargetSize(\n          target as HTMLElement,\n          { height, width, contentHeight, contentWidth },\n          dimension as measuredDimension,\n        );\n\n        if (newSize !== size) {\n          sizeChanged = true;\n          measurements[dimension as measuredDimension] = newSize;\n        }\n      }\n      if (sizeChanged) {\n        // TODO only return measured sizes\n        onResize && onResize(measurements);\n      }\n    }\n  }\n});\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: readonly string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false,\n) {\n  const dimensionsRef = useRef(dimensions);\n\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const { width, height } = target.getBoundingClientRect();\n    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;\n    const flooredHeight = Math.floor(height);\n    const flooredWidth = Math.floor(width);\n\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(\n          target,\n          {\n            width: flooredWidth,\n            height: flooredHeight,\n            contentHeight,\n            contentWidth,\n          },\n          dim as measuredDimension,\n        );\n        return map;\n      },\n      {},\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      // await document.fonts.ready;\n      const observedTarget = observedMap.get(target);\n      if (observedTarget) {\n        const measurements = measure(target);\n        observedTarget.measurements = measurements;\n        resizeObserver.observe(target);\n        if (reportInitialSize) {\n          onResize(measurements);\n        }\n      } else {\n        console.log(\n          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,\n          \"font-weight:bold; color:red;\",\n        );\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        console.log(\n          `useResizeObserver attemping to observe same element twice`,\n          {\n            target,\n          },\n        );\n        // throw Error(\n        //   \"useResizeObserver attemping to observe same element twice\"\n        // );\n      }\n      // TODO set a pending entry on map\n      registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [measure, ref]);\n\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n}\n"],"names":[],"mappings":"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"}

package/esm/overflow-container/OverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowContainer.js","sources":["../../src/overflow-container/OverflowContainer.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { asReactElements, orientationType, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { OverflowItem } from \"./overflow-utils\";\nimport { useOverflowContainer } from \"./useOverflowContainer\";\n\nimport overflowContainerCss from \"./OverflowContainer.css\";\n\nconst classBase = \"vuuOverflowContainer\";\n\nexport interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  allowDragDrop?: boolean;\n  debugId?: string;\n  onMoveItem?: (fromIndex: number, toIndex: number) => void;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n  orientation?: orientationType;\n  overflowIcon?: string;\n  overflowPosition?: \"start\" | \"end\" | number;\n}\n\nconst WrapContainer = React.memo(\n  ({\n    PopupMenuProps,\n    allowDragDrop,\n    children,\n    id,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation,\n    overflowIcon,\n  }: Omit<OverflowContainerProps, \"orientation\"> &\n    Required<Pick<OverflowContainerProps, \"orientation\">>) => {\n    const childElements = asReactElements(children);\n    const {\n      draggable,\n      draggedItemIndex,\n      menuActionHandler,\n      menuBuilder,\n      onItemMouseDown,\n      rootRef,\n    } = useOverflowContainer({\n      allowDragDrop,\n      itemCount: childElements.length,\n      onMoveItem,\n      onSwitchWrappedItemIntoView,\n      orientation,\n    });\n\n    const content = childElements.map((childEl, i) => {\n      const {\n        \"data-align\": align,\n        \"data-overflow-priority\": overflowPriority = \"0\",\n        id: itemId = `${id}-${i}`,\n        label = `Item ${i + 1}`,\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      } = childEl.props as any;\n      return (\n        <div\n          className={cx(`${classBase}-item`, {\n            \"vuuDraggable-dragAway\": draggedItemIndex === i,\n          })}\n          data-index={i}\n          data-align={align}\n          data-label={label}\n          data-overflow-priority={overflowPriority}\n          id={`${itemId}-wrapper`}\n          key={i}\n          onMouseDown={onItemMouseDown}\n        >\n          {childEl}\n        </div>\n      );\n    });\n\n    const overflowIndicator = (\n      <div\n        className={`${classBase}-OverflowIndicator`}\n        data-index=\"overflow\"\n        key=\"overflow\"\n      >\n        <PopupMenu\n          {...PopupMenuProps}\n          data-embedded\n          icon={overflowIcon}\n          menuBuilder={menuBuilder}\n          menuActionHandler={menuActionHandler}\n          tabIndex={-1}\n        />\n      </div>\n    );\n    content.push(overflowIndicator);\n\n    return (\n      <div className={cx(`${classBase}-wrapContainer`)} ref={rootRef}>\n        {content}\n        {draggable}\n      </div>\n    );\n  },\n);\n\nWrapContainer.displayName = \"OverflowContainer.InnerContainer\";\n\nexport const OverflowContainer = forwardRef(function OverflowContainer(\n  {\n    PopupMenuProps,\n    allowDragDrop = false,\n    children,\n    className,\n    id: idProp,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation = \"horizontal\",\n    overflowIcon,\n    overflowPosition,\n    ...htmlAttributes\n  }: OverflowContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-overflow-container\",\n    css: overflowContainerCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(\n        cx(className, classBase, {\n          \"vuuOrientation-horizontal\": orientation === \"horizontal\",\n          \"vuuOrientation-vertical\": orientation === \"vertical\",\n        }),\n      )}\n      id={id}\n      ref={forwardedRef}\n    >\n      <WrapContainer\n        PopupMenuProps={PopupMenuProps}\n        allowDragDrop={allowDragDrop}\n        id={id}\n        orientation={orientation}\n        overflowIcon={overflowIcon}\n        overflowPosition={overflowPosition}\n        onMoveItem={onMoveItem}\n        onSwitchWrappedItemIntoView={onSwitchWrappedItemIntoView}\n      >\n        {children}\n      </WrapContainer>\n    </div>\n  );\n});\n"],"names":["PopupMenuProps","OverflowContainer"],"mappings":"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"}
+{"version":3,"file":"OverflowContainer.js","sources":["../../../../packages/vuu-ui-controls/src/overflow-container/OverflowContainer.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { asReactElements, orientationType, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { OverflowItem } from \"./overflow-utils\";\nimport { useOverflowContainer } from \"./useOverflowContainer\";\n\nimport overflowContainerCss from \"./OverflowContainer.css\";\n\nconst classBase = \"vuuOverflowContainer\";\n\nexport interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  allowDragDrop?: boolean;\n  debugId?: string;\n  onMoveItem?: (fromIndex: number, toIndex: number) => void;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n  orientation?: orientationType;\n  overflowIcon?: string;\n  overflowPosition?: \"start\" | \"end\" | number;\n}\n\nconst WrapContainer = React.memo(\n  ({\n    PopupMenuProps,\n    allowDragDrop,\n    children,\n    id,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation,\n    overflowIcon,\n  }: Omit<OverflowContainerProps, \"orientation\"> &\n    Required<Pick<OverflowContainerProps, \"orientation\">>) => {\n    const childElements = asReactElements(children);\n    const {\n      draggable,\n      draggedItemIndex,\n      menuActionHandler,\n      menuBuilder,\n      onItemMouseDown,\n      rootRef,\n    } = useOverflowContainer({\n      allowDragDrop,\n      itemCount: childElements.length,\n      onMoveItem,\n      onSwitchWrappedItemIntoView,\n      orientation,\n    });\n\n    const content = childElements.map((childEl, i) => {\n      const {\n        \"data-align\": align,\n        \"data-overflow-priority\": overflowPriority = \"0\",\n        id: itemId = `${id}-${i}`,\n        label = `Item ${i + 1}`,\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      } = childEl.props as any;\n      return (\n        <div\n          className={cx(`${classBase}-item`, {\n            \"vuuDraggable-dragAway\": draggedItemIndex === i,\n          })}\n          data-index={i}\n          data-align={align}\n          data-label={label}\n          data-overflow-priority={overflowPriority}\n          id={`${itemId}-wrapper`}\n          key={i}\n          onMouseDown={onItemMouseDown}\n        >\n          {childEl}\n        </div>\n      );\n    });\n\n    const overflowIndicator = (\n      <div\n        className={`${classBase}-OverflowIndicator`}\n        data-index=\"overflow\"\n        key=\"overflow\"\n      >\n        <PopupMenu\n          {...PopupMenuProps}\n          data-embedded\n          icon={overflowIcon}\n          menuBuilder={menuBuilder}\n          menuActionHandler={menuActionHandler}\n          tabIndex={-1}\n        />\n      </div>\n    );\n    content.push(overflowIndicator);\n\n    return (\n      <div className={cx(`${classBase}-wrapContainer`)} ref={rootRef}>\n        {content}\n        {draggable}\n      </div>\n    );\n  },\n);\n\nWrapContainer.displayName = \"OverflowContainer.InnerContainer\";\n\nexport const OverflowContainer = forwardRef(function OverflowContainer(\n  {\n    PopupMenuProps,\n    allowDragDrop = false,\n    children,\n    className,\n    id: idProp,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation = \"horizontal\",\n    overflowIcon,\n    overflowPosition,\n    ...htmlAttributes\n  }: OverflowContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-overflow-container\",\n    css: overflowContainerCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(\n        cx(className, classBase, {\n          \"vuuOrientation-horizontal\": orientation === \"horizontal\",\n          \"vuuOrientation-vertical\": orientation === \"vertical\",\n        }),\n      )}\n      id={id}\n      ref={forwardedRef}\n    >\n      <WrapContainer\n        PopupMenuProps={PopupMenuProps}\n        allowDragDrop={allowDragDrop}\n        id={id}\n        orientation={orientation}\n        overflowIcon={overflowIcon}\n        overflowPosition={overflowPosition}\n        onMoveItem={onMoveItem}\n        onSwitchWrappedItemIntoView={onSwitchWrappedItemIntoView}\n      >\n        {children}\n      </WrapContainer>\n    </div>\n  );\n});\n"],"names":["PopupMenuProps","OverflowContainer"],"mappings":"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"}

package/esm/overflow-container/overflow-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-utils.js","sources":["../../src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n  index: string;\n  label: string;\n  overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n  elements.sort((e1, e2) => {\n    const {\n      dataset: { index: idx1 = \"?\" },\n    } = e1;\n    const {\n      dataset: { index: idx2 = \"?\" },\n    } = e2;\n    const isOverflowed1 = e1.classList.contains(\"wrapped\");\n    const isOverflowed2 = e2.classList.contains(\"wrapped\");\n    const isOverflowedIndicator1 = idx1 === \"overflow\";\n    const isOverflowedIndicator2 = idx2 === \"overflow\";\n    if (isOverflowed1 && !isOverflowed2) {\n      return 1;\n    } else if (!isOverflowed1 && isOverflowed2) {\n      return -1;\n    }\n    if (isOverflowedIndicator1) {\n      return 1;\n    } else if (isOverflowedIndicator2) {\n      return -1;\n    }\n    return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n  });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n    Identify wrapped items by comparing position of each item. Any item\n    not to the right of preceeding item has wrapped. Note: on-screen \n    position of items does not necessarily match document position, due\n    to use of css order. This is taken into account by sorting. \n    TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n  container: HTMLElement,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const nonWrappedItems: OverflowItem[] = [];\n  const wrappedItems: OverflowItem[] = [];\n  let currentPosition = -1;\n  let overflowed = false;\n  const sortedChildren = sortByScreenOrder(\n    Array.from(container.children) as HTMLElement[],\n  );\n  const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n  for (const child of sortedChildren) {\n    const element = child as HTMLElement;\n    const {\n      dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n    } = element;\n    const { [positionAttribute]: position } = element.getBoundingClientRect();\n    if (position <= currentPosition) {\n      if (index === \"overflow\") {\n        wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n      } else {\n        wrappedItems.push({ index, label, overflowPriority });\n      }\n      overflowed = true;\n    } else if (overflowed) {\n      wrappedItems.push({ index, label, overflowPriority });\n    } else {\n      nonWrappedItems.push({ index, label, overflowPriority });\n    }\n    currentPosition = position;\n  }\n  return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  classBase?: string,\n) => {\n  let ignoreOverflow = false;\n  const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n  if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n    if (overflowedItems.length === 1) {\n      ignoreOverflow = true;\n    }\n  }\n  for (const element of container.children) {\n    const {\n      dataset: { index = \"?\" },\n    } = element as HTMLElement;\n    if (overflowedItems.length === 0 || ignoreOverflow) {\n      container.classList.remove(className);\n    } else {\n      container.classList.add(className);\n    }\n    if (\n      index !== \"overflow\" &&\n      overflowedItems.find((item) => item.index === index)\n    ) {\n      element.classList.add(\"wrapped\");\n    } else {\n      element.classList.remove(\"wrapped\");\n    }\n  }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n  wrappedItems: OverflowItem[],\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n  let [highestPriorityItem] = overflowItems;\n  for (let i = 1; i < overflowItems.length; i++) {\n    const item = overflowItems[i];\n    if (\n      parseInt(item.overflowPriority) >\n      parseInt(highestPriorityItem.overflowPriority)\n    ) {\n      highestPriorityItem = item;\n    }\n  }\n  return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n  nonWrappedItems: OverflowItem[],\n  wrappedItems: OverflowItem[],\n) => {\n  const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n    minPriority,\n    Number.MAX_SAFE_INTEGER,\n  );\n  const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n  if (maxwrappedPriority > minNonwrappedPriority) {\n    return true;\n  } else {\n    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n  }\n};\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType,\n): Promise<OverflowItem[]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const newlyOverflowed = getNewItems(overflowedItems, o2);\n      newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n      resolve(o2);\n    });\n  });\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n  container: HTMLElement,\n  nonWrapped: OverflowItem[],\n  wrapped: OverflowItem[],\n  orientation: orientationType,\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const highPriorityWrappedItem = getHighestPriorityItem(o2);\n      if (highPriorityWrappedItem) {\n        const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n          container,\n          highPriorityWrappedItem,\n          orientation,\n        );\n        resolve([nonWrappedItems, wrappedItems]);\n      } else {\n        resolve([nonWrapped, wrapped]);\n      }\n    });\n  });\n\nexport const markElementAsWrapped = (\n  container: HTMLElement,\n  item: OverflowItem,\n) => {\n  const el = getElementByDataIndex(container, item.index);\n  if (el) {\n    el.classList.add(\"wrapped\");\n  } else {\n    throw Error(\n      `markElementAsWrapped element item with index ${item.index} not found`,\n    );\n  }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n  const newItems: OverflowItem[] = [];\n  for (const item of items2) {\n    if (!items1.find(({ index }) => index === item.index)) {\n      newItems.push(item);\n    }\n  }\n  return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n  container: HTMLElement,\n  wrappedItems: OverflowItem[],\n) => {\n  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n  elementssMarkedAsWrapped.forEach((el) => {\n    const {\n      dataset: { index = \"?\" },\n    } = el;\n    if (!wrappedItems.find((i) => i.index === index)) {\n      el.classList.remove(\"wrapped\");\n    }\n  });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n  container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n  container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n  const margin =\n    sizeProperty === \"width\"\n      ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n      : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n  return size + margin;\n};\n\nconst getAvailableSpace = (\n  container: HTMLElement,\n  overflowIndicator: HTMLElement,\n  orientation: orientationType,\n) => {\n  if (orientation === \"horizontal\") {\n    const { right: containerRight } = container.getBoundingClientRect();\n    const paddingRight = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-right\"),\n    );\n    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n    return containerRight - paddingRight - indicatorRight;\n  } else {\n    const { bottom: containerBottom } = container.getBoundingClientRect();\n    const paddingBottom = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-bottom\"),\n    );\n    const { bottom: indicatorBottom } =\n      overflowIndicator.getBoundingClientRect();\n    return containerBottom - paddingBottom - indicatorBottom;\n  }\n};\n\n/**\n    An edge case. If container has grown but we still have one\n    wrapped item - could the wrapped item return to the fold if the overflow\n    indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n  container: HTMLElement,\n  orientation: orientationType,\n): boolean => {\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const overflowIndicator = getOverflowIndicator(container);\n  const availableSpace = getAvailableSpace(\n    container,\n    overflowIndicator,\n    orientation,\n  );\n  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n  const overflowedItem = getOverflowedItem(container);\n  const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n  if (overflowWidth <= availableSpace + indicatorWidth) {\n    container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n    overflowedItem.classList.remove(\"wrapped\");\n    return true;\n  }\n  return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n  const {\n    dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n  } = h1 as HTMLElement;\n  const {\n    dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n  } = h2 as HTMLElement;\n\n  if (p1 > p2) {\n    return -1;\n  } else if (p1 < p2) {\n    return 1;\n  } else {\n    return parseInt(i1) - parseInt(i2);\n  }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n    byPriorityDescending,\n  ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n  container: HTMLElement,\n  overflowItem: OverflowItem,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const unwrappedItems = getNonwrappedItemsByPriority(container);\n  const targetElement = getElementByDataIndex(\n    container,\n    overflowItem.index,\n    true,\n  );\n  let pos = -1;\n  let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n  const targetWidth = getElementSize(targetElement, sizeProperty);\n  const overflowIndicator = getOverflowIndicator(container);\n  let availableSpace =\n    getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n  if (availableSpace >= targetWidth) {\n    switchWrapOnElements(targetElement, unwrappedItem);\n  } else {\n    // we need to wrap multiple items to make space for the switched item\n    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n    const baseAvailableSpace = availableSpace;\n    const wrapTargets = [unwrappedItem];\n    while (availableSpace < targetWidth) {\n      pos -= 1;\n      unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n      wrapTargets.push(unwrappedItem);\n      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n      const extraSpace = lastLeft - nextLeft;\n      availableSpace = baseAvailableSpace + extraSpace;\n    }\n\n    targetElement?.classList.remove(\"wrapped\");\n    wrapTargets.forEach((item) => {\n      item.classList.add(\"wrapped\");\n    });\n  }\n  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n    container,\n    orientation,\n  );\n  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n  return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n  wrappedElement?: HTMLElement | null,\n  nonWrappedElement?: HTMLElement,\n) => {\n  if (!wrappedElement || !nonWrappedElement) {\n    throw Error(\"switchWrapOnElements, element undefined\");\n  }\n  wrappedElement.classList.remove(\"wrapped\");\n  nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"overflow-utils.js","sources":["../../../../packages/vuu-ui-controls/src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n  index: string;\n  label: string;\n  overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n  elements.sort((e1, e2) => {\n    const {\n      dataset: { index: idx1 = \"?\" },\n    } = e1;\n    const {\n      dataset: { index: idx2 = \"?\" },\n    } = e2;\n    const isOverflowed1 = e1.classList.contains(\"wrapped\");\n    const isOverflowed2 = e2.classList.contains(\"wrapped\");\n    const isOverflowedIndicator1 = idx1 === \"overflow\";\n    const isOverflowedIndicator2 = idx2 === \"overflow\";\n    if (isOverflowed1 && !isOverflowed2) {\n      return 1;\n    } else if (!isOverflowed1 && isOverflowed2) {\n      return -1;\n    }\n    if (isOverflowedIndicator1) {\n      return 1;\n    } else if (isOverflowedIndicator2) {\n      return -1;\n    }\n    return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n  });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n    Identify wrapped items by comparing position of each item. Any item\n    not to the right of preceeding item has wrapped. Note: on-screen \n    position of items does not necessarily match document position, due\n    to use of css order. This is taken into account by sorting. \n    TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n  container: HTMLElement,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const nonWrappedItems: OverflowItem[] = [];\n  const wrappedItems: OverflowItem[] = [];\n  let currentPosition = -1;\n  let overflowed = false;\n  const sortedChildren = sortByScreenOrder(\n    Array.from(container.children) as HTMLElement[],\n  );\n  const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n  for (const child of sortedChildren) {\n    const element = child as HTMLElement;\n    const {\n      dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n    } = element;\n    const { [positionAttribute]: position } = element.getBoundingClientRect();\n    if (position <= currentPosition) {\n      if (index === \"overflow\") {\n        wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n      } else {\n        wrappedItems.push({ index, label, overflowPriority });\n      }\n      overflowed = true;\n    } else if (overflowed) {\n      wrappedItems.push({ index, label, overflowPriority });\n    } else {\n      nonWrappedItems.push({ index, label, overflowPriority });\n    }\n    currentPosition = position;\n  }\n  return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  classBase?: string,\n) => {\n  let ignoreOverflow = false;\n  const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n  if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n    if (overflowedItems.length === 1) {\n      ignoreOverflow = true;\n    }\n  }\n  for (const element of container.children) {\n    const {\n      dataset: { index = \"?\" },\n    } = element as HTMLElement;\n    if (overflowedItems.length === 0 || ignoreOverflow) {\n      container.classList.remove(className);\n    } else {\n      container.classList.add(className);\n    }\n    if (\n      index !== \"overflow\" &&\n      overflowedItems.find((item) => item.index === index)\n    ) {\n      element.classList.add(\"wrapped\");\n    } else {\n      element.classList.remove(\"wrapped\");\n    }\n  }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n  wrappedItems: OverflowItem[],\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n  let [highestPriorityItem] = overflowItems;\n  for (let i = 1; i < overflowItems.length; i++) {\n    const item = overflowItems[i];\n    if (\n      parseInt(item.overflowPriority) >\n      parseInt(highestPriorityItem.overflowPriority)\n    ) {\n      highestPriorityItem = item;\n    }\n  }\n  return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n  nonWrappedItems: OverflowItem[],\n  wrappedItems: OverflowItem[],\n) => {\n  const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n    minPriority,\n    Number.MAX_SAFE_INTEGER,\n  );\n  const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n  if (maxwrappedPriority > minNonwrappedPriority) {\n    return true;\n  } else {\n    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n  }\n};\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType,\n): Promise<OverflowItem[]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const newlyOverflowed = getNewItems(overflowedItems, o2);\n      newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n      resolve(o2);\n    });\n  });\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n  container: HTMLElement,\n  nonWrapped: OverflowItem[],\n  wrapped: OverflowItem[],\n  orientation: orientationType,\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const highPriorityWrappedItem = getHighestPriorityItem(o2);\n      if (highPriorityWrappedItem) {\n        const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n          container,\n          highPriorityWrappedItem,\n          orientation,\n        );\n        resolve([nonWrappedItems, wrappedItems]);\n      } else {\n        resolve([nonWrapped, wrapped]);\n      }\n    });\n  });\n\nexport const markElementAsWrapped = (\n  container: HTMLElement,\n  item: OverflowItem,\n) => {\n  const el = getElementByDataIndex(container, item.index);\n  if (el) {\n    el.classList.add(\"wrapped\");\n  } else {\n    throw Error(\n      `markElementAsWrapped element item with index ${item.index} not found`,\n    );\n  }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n  const newItems: OverflowItem[] = [];\n  for (const item of items2) {\n    if (!items1.find(({ index }) => index === item.index)) {\n      newItems.push(item);\n    }\n  }\n  return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n  container: HTMLElement,\n  wrappedItems: OverflowItem[],\n) => {\n  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n  elementssMarkedAsWrapped.forEach((el) => {\n    const {\n      dataset: { index = \"?\" },\n    } = el;\n    if (!wrappedItems.find((i) => i.index === index)) {\n      el.classList.remove(\"wrapped\");\n    }\n  });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n  container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n  container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n  const margin =\n    sizeProperty === \"width\"\n      ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n      : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n  return size + margin;\n};\n\nconst getAvailableSpace = (\n  container: HTMLElement,\n  overflowIndicator: HTMLElement,\n  orientation: orientationType,\n) => {\n  if (orientation === \"horizontal\") {\n    const { right: containerRight } = container.getBoundingClientRect();\n    const paddingRight = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-right\"),\n    );\n    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n    return containerRight - paddingRight - indicatorRight;\n  } else {\n    const { bottom: containerBottom } = container.getBoundingClientRect();\n    const paddingBottom = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-bottom\"),\n    );\n    const { bottom: indicatorBottom } =\n      overflowIndicator.getBoundingClientRect();\n    return containerBottom - paddingBottom - indicatorBottom;\n  }\n};\n\n/**\n    An edge case. If container has grown but we still have one\n    wrapped item - could the wrapped item return to the fold if the overflow\n    indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n  container: HTMLElement,\n  orientation: orientationType,\n): boolean => {\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const overflowIndicator = getOverflowIndicator(container);\n  const availableSpace = getAvailableSpace(\n    container,\n    overflowIndicator,\n    orientation,\n  );\n  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n  const overflowedItem = getOverflowedItem(container);\n  const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n  if (overflowWidth <= availableSpace + indicatorWidth) {\n    container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n    overflowedItem.classList.remove(\"wrapped\");\n    return true;\n  }\n  return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n  const {\n    dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n  } = h1 as HTMLElement;\n  const {\n    dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n  } = h2 as HTMLElement;\n\n  if (p1 > p2) {\n    return -1;\n  } else if (p1 < p2) {\n    return 1;\n  } else {\n    return parseInt(i1) - parseInt(i2);\n  }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n    byPriorityDescending,\n  ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n  container: HTMLElement,\n  overflowItem: OverflowItem,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const unwrappedItems = getNonwrappedItemsByPriority(container);\n  const targetElement = getElementByDataIndex(\n    container,\n    overflowItem.index,\n    true,\n  );\n  let pos = -1;\n  let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n  const targetWidth = getElementSize(targetElement, sizeProperty);\n  const overflowIndicator = getOverflowIndicator(container);\n  let availableSpace =\n    getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n  if (availableSpace >= targetWidth) {\n    switchWrapOnElements(targetElement, unwrappedItem);\n  } else {\n    // we need to wrap multiple items to make space for the switched item\n    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n    const baseAvailableSpace = availableSpace;\n    const wrapTargets = [unwrappedItem];\n    while (availableSpace < targetWidth) {\n      pos -= 1;\n      unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n      wrapTargets.push(unwrappedItem);\n      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n      const extraSpace = lastLeft - nextLeft;\n      availableSpace = baseAvailableSpace + extraSpace;\n    }\n\n    targetElement?.classList.remove(\"wrapped\");\n    wrapTargets.forEach((item) => {\n      item.classList.add(\"wrapped\");\n    });\n  }\n  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n    container,\n    orientation,\n  );\n  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n  return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n  wrappedElement?: HTMLElement | null,\n  nonWrappedElement?: HTMLElement,\n) => {\n  if (!wrappedElement || !nonWrappedElement) {\n    throw Error(\"switchWrapOnElements, element undefined\");\n  }\n  wrappedElement.classList.remove(\"wrapped\");\n  nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":[],"mappings":"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"}

package/esm/overflow-container/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation,\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\",\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation,\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation,\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown,\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler,\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            id: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      (menuItemId, options) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation,\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useOverflowContainer.js","sources":["../../../../packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation,\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\",\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation,\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation,\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown,\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler,\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            id: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      (menuItemId, options) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation,\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/price-ticker/PriceTicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceTicker.js","sources":["../../src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  },\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzB,gBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA;AAAA;AACX;AAEJ,CAAC,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAA,IAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,GAAA,GAAM,OAAc,aAAa,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA;AACvC,IAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAY,cAAc,SAAS,CAAA,GACrC,wBAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA;AAE/B,IACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA;AAAA,KAClD,EAAA,CAAA;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}
+{"version":3,"file":"PriceTicker.js","sources":["../../../../packages/vuu-ui-controls/src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  },\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzB,gBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA;AAAA;AACX;AAEJ,CAAC,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAA,IAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,GAAA,GAAM,OAAc,aAAa,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA;AACvC,IAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAY,cAAc,SAAS,CAAA,GACrC,wBAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA;AAE/B,IACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA;AAAA,KAClD,EAAA,CAAA;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/esm/sortable-list/SortableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n  id,\n  index,\n  value,\n  ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n  const { ref } = useSortable({ id, index });\n  return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n  children,\n  onReorderListItems,\n  ...listBoxProps\n}: ListBoxProps & {\n  onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n      if (listItems) {\n        const items = Array.from(listItems).map(({ id }) => id);\n        onReorderListItems?.(items);\n      }\n    }, 300);\n  }, [onReorderListItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <ListBox {...listBoxProps} ref={listRef}>\n        {children}\n      </ListBox>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAI,YAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,2BAAQ,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SortableList.js","sources":["../../../../packages/vuu-ui-controls/src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n  id,\n  index,\n  value,\n  ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n  const { ref } = useSortable({ id, index });\n  return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n  children,\n  onReorderListItems,\n  ...listBoxProps\n}: ListBoxProps & {\n  onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n      if (listItems) {\n        const items = Array.from(listItems).map(({ id }) => id);\n        onReorderListItems?.(items);\n      }\n    }, 300);\n  }, [onReorderListItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <ListBox {...listBoxProps} ref={listRef}>\n        {children}\n      </ListBox>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAI,YAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,2BAAQ,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/split-button/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","sources":["../../src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            variant={variant}\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            variant={variant}\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["SplitButton","ButtonProps","PopupMenuProps"],"mappings":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpE,cAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,2BACG,mBACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACE,GAAGD,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACE,GAAGC,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            variant={variant}\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            variant={variant}\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["SplitButton","ButtonProps","PopupMenuProps"],"mappings":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpE,cAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,2BACG,mBACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACE,GAAGD,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACE,GAAGC,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}

package/esm/split-button/SplitStateButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitStateButton.js","sources":["../../src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["SplitStateButton"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;;;;"}
+{"version":3,"file":"SplitStateButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["SplitStateButton"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;;;;"}

package/esm/split-button/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSplitButton.js","sources":["../../src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\",\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`,\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase],\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps"],"mappings":"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"}
+{"version":3,"file":"useSplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\",\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`,\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase],\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps"],"mappings":"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"}