@vuu-ui/vuu-ui-controls 0.9.2 → 0.10.0

package/cjs/split-button/SplitButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var splitButtonCss = ".vuuSplitButton {\n  --saltButton-background: var(--split-background);\n  --saltButton-background-hover: var(--split-background);\n  --vuuPopupMenu-background: var(--split-background);\n  --vuuPopupMenu-iconSize: 20px;\n\n  /** less verbose local refs */\n  --background: var(--vuuSplitButton-background);\n  --foreground: var(--vuuSplitButton-foreground);\n  --background-hover: var(--vuuSplitButton-background-hover);\n  --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n  --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --trigger-border-style: solid solid solid none;\n\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  display: flex;\n\n  .vuuSplitButton-main {\n    border-radius: var(--main-border-radius);\n  }\n  .vuuSplitButton-trigger {\n    border-radius: var(--trigger-border-radius);\n  }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n  .saltButton {\n    outline-style: none;\n  }\n  &.vuuSplitButton-primary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-primary-background-hover)\n    );\n  }\n  &.vuuSplitButton-secondary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-secondary-background-hover)\n    );\n  }\n  &.vuuSplitButton-cta {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-cta-background-hover)\n    );\n    .vuuSplitButton-trigger {\n      --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n    }\n  }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n  --split-background: var(\n    --background,\n    var(--salt-actionable-primary-background)\n  );\n  --split-background-active: var(--salt-actionable-primary-background-active);\n  --split-color-active: var(--salt-actionable-primary-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background-hover,\n    var(--salt-actionable-primary-background-hover)\n  );\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-primary-foreground-hover);\n  }\n}\n\n.vuuSplitButton-secondary {\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background,\n    var(--salt-actionable-secondary-background)\n  );\n  --split-background-active: var(--salt-actionable-secondary-background-active);\n  --split-color-active: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-secondary-background-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-secondary-foreground-hover);\n  }\n}\n\n.vuuSplitButton-cta {\n  --split-background: var(--background, var(--salt-actionable-cta-background));\n  --split-background-active: var(--salt-actionable-cta-background-active);\n  --split-color-active: var(--salt-actionable-cta-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-cta-background-hover);\n  --split-color: var(--salt-actionable-cta-foreground-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-cta-foreground-hover);\n    --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n  }\n}\n\n.vuuSplitButton:has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--split-background-active);\n  .vuuSplitButton-trigger {\n    --vuu-icon-color: var(--split-color-active);\n  }\n}\n";
+var splitButtonCss = ".vuuSplitButton {\n  --saltButton-background: var(--split-background);\n  --saltButton-background-hover: var(--split-background);\n  --vuuPopupMenu-background: var(--split-background);\n  --vuuPopupMenu-iconSize: 20px;\n\n  /** less verbose local refs */\n  --background: var(--vuuSplitButton-background);\n  --foreground: var(--vuuSplitButton-foreground);\n  --background-hover: var(--vuuSplitButton-background-hover);\n  --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n  --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --trigger-border-style: solid solid solid none;\n\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  display: flex;\n\n  .vuuSplitButton-main {\n    border-radius: var(--main-border-radius);\n  }\n  .vuuSplitButton-trigger {\n    border-radius: var(--trigger-border-radius);\n  }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n  .saltButton {\n    outline-style: none;\n  }\n  &.vuuSplitButton-primary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-bold-background-hover)\n    );\n  }\n  &.vuuSplitButton-secondary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-subtle-background-hover)\n    );\n  }\n  &.vuuSplitButton-cta {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-accented-bold-background-hover)\n    );\n    .vuuSplitButton-trigger {\n      --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n    }\n  }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n  --split-background: var(\n    --background,\n    var(--salt-actionable-bold-background)\n  );\n  --split-background-active: var(--salt-actionable-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background-hover,\n    var(--salt-actionable-bold-background-hover)\n  );\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton-secondary {\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background,\n    var(--salt-actionable-subtle-background)\n  );\n  --split-background-active: var(--salt-actionable-subtle-background-active);\n  --split-color-active: var(--salt-actionable-subtle-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-subtle-background-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-subtle-foreground-hover);\n  }\n}\n\n.vuuSplitButton-cta {\n  --split-background: var(--background, var(--salt-actionable-accented-bold-background));\n  --split-background-active: var(--salt-actionable-accented-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-accented-bold-background-hover);\n  --split-color: var(--salt-actionable-bold-foreground-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n    --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton:has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--split-background-active);\n  .vuuSplitButton-trigger {\n    --vuu-icon-color: var(--split-color-active);\n  }\n}\n";
 
 module.exports = splitButtonCss;
 //# sourceMappingURL=SplitButton.css.js.map

package/cjs/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\";\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      <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    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,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,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,KACD,CAAA,CAAA;AAEH,IACE,uBAAAC,eAAA;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,SAAA;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGN,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC,QAAA;AAAA,aAAA;AAAA,WACH;AAAA,0BACAK,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGN,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,OAAA;AAAA,aAAA;AAAA,WACF;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"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\";\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      <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    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;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,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IACE,uBAAAC,eAAA;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,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGN,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,0BACAK,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGN,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,KACF;AAAA;AAGN;;;;"}

package/cjs/split-button/SplitStateButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var splitStateButtonCss = ".vuuSplitStateButton {\n  --split-state-background: var(--salt-actionable-secondary-background);\n  --split-state-foreground: var(--salt-actionable-secondary-foreground);\n  --vuuSplitButton-background: var(--split-state-background);\n  --vuuSplitButton-foreground: var(--split-state-foreground);\n  --vuuSplitButton-background-hover: var(--split-state-background);\n  --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n  .saltButton-primary:active,\n  .saltButton-primary.saltButton-active {\n    --saltButton-background-active: var(--salt-actionable-primary-background);\n    --saltButton-text-color-active: var(--salt-actionable-primary-foreground);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);\n  --saltButton-text-color: var(--salt-actionable-primary-foreground-active);\n  --saltButton-text-color-hover: var(\n    --salt-actionable-primary-foreground-active\n  );\n  --split-state-background: var(--salt-actionable-primary-background-active);\n  --split-state-foreground: var(--salt-actionable-primary-foreground-active);\n  &.focusVisible {\n    --split-state-background: var(--salt-actionable-primary-background-active);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  .vuuEditableLabel-input {\n    color: var(--salt-actionable-primary-foreground-active);\n  }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n  --saltButton-background: var(--salt-actionable-primary-background);\n  .vuuIcon {\n    --vuu-icon-color: var(--salt-actionable-primary-foreground);\n  }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-secondary-background);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-secondary-background);\n  }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-primary-background-active);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-primary-background-active);\n  }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n  .saltButton {\n    border-color: var(--salt-actionable-primary-foreground);\n  }\n}\n";
+var splitStateButtonCss = ".vuuSplitStateButton {\n  --split-state-background: var(--salt-actionable-subtle-background);\n  --split-state-foreground: var(--salt-actionable-subtle-foreground);\n  --vuuSplitButton-background: var(--split-state-background);\n  --vuuSplitButton-foreground: var(--split-state-foreground);\n  --vuuSplitButton-background-hover: var(--split-state-background);\n  --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n  .saltButton-primary:active,\n  .saltButton-primary.saltButton-active {\n    --saltButton-background-active: var(--salt-actionable-bold-background);\n    --saltButton-text-color-active: var(--salt-actionable-bold-foreground);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  --vuuButtonIcon-color: var(--salt-actionable-bold-foreground-active);\n  --saltButton-text-color: var(--salt-actionable-bold-foreground-active);\n  --saltButton-text-color-hover: var(--salt-actionable-bold-foreground-active);\n  --split-state-background: var(--salt-actionable-bold-background-active);\n  --split-state-foreground: var(--salt-actionable-bold-foreground-active);\n  &.focusVisible {\n    --split-state-background: var(--salt-actionable-bold-background-active);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  .vuuEditableLabel-input {\n    color: var(--salt-actionable-bold-foreground-active);\n  }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n  --saltButton-background: var(--salt-actionable-bold-background);\n  .vuuIcon {\n    --vuu-icon-color: var(--salt-actionable-bold-foreground);\n  }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-subtle-background);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-subtle-background);\n  }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-bold-background-active);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-bold-background-active);\n  }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n  .saltButton {\n    border-color: var(--salt-actionable-bold-foreground);\n  }\n}\n";
 
 module.exports = splitStateButtonCss;
 //# sourceMappingURL=SplitStateButton.css.js.map

package/cjs/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":["forwardRef","SplitStateButton","useWindow","useComponentCssInjection","splitStateButtonCss","jsx","SplitButton"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,uBAAA;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,YAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;"}
+{"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":["forwardRef","SplitStateButton","useWindow","useComponentCssInjection","splitStateButtonCss","jsx","SplitButton"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,uBAAA;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/cjs/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","useRef","useCallback","dispatchMouseEvent"],"mappings":"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"}
+{"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","useRef","useCallback","dispatchMouseEvent"],"mappings":"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"}

package/cjs/table-search/SearchCell.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var searchCellCss = "\n.vuuSearchCell {\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 16px;\n  --vuu-icon-top: 0px;\n  align-items: center;\n  color: var(--background-cell-color);\n  display: flex;\n  gap: 4px;\n  padding: 0 8px 0 8px;\n  position: relative;\n  z-index: -1;\n}\n\n";
+var searchCellCss = "\n.vuuSearchCell {\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 16px;\n  --vuu-icon-top: -1px;\n  align-items: center;\n  color: var(--background-cell-color);\n  display: flex;\n  padding: 0 8px 0 8px;\n  position: relative;\n  z-index: -1;\n\n  [data-icon]{\n    margin-right: 4px;\n  }\n}\n\n";
 
 module.exports = searchCellCss;
 //# sourceMappingURL=SearchCell.css.js.map

package/cjs/table-search/SearchCell.js

@@ -3,13 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var vuuTable = require('@vuu-ui/vuu-table');
 var SearchCell$1 = require('./SearchCell.css.js');
 
 const classBase = "vuuSearchCell";
 const SearchCell = ({
   column,
   columnMap,
-  row
+  row,
+  searchPattern = ""
 }) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -18,10 +20,13 @@ const SearchCell = ({
     window: targetWindow
   });
   const key = columnMap[column.name];
-  const value = row[key];
+  const valueWithHighlighting = vuuTable.useHighlighting(
+    column.valueFormatter(row[key]),
+    searchPattern
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, tabIndex: -1, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "draggable" }),
-    value
+    valueWithHighlighting
   ] });
 };
 

package/cjs/table-search/SearchCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchCell.js","sources":["../../src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\n// export to avoid tree shaking, component is not consumed directly\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const value = row[key];\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {value}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","searchCellCss","jsxs","jsx"],"mappings":";;;;;;;AAMA,MAAM,SAAY,GAAA,eAAA,CAAA;AAGX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,IAAI,GAAG,CAAA,CAAA;AAErB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B,KAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchCell.js","sources":["../../src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n  searchPattern = \"\",\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const valueWithHighlighting = useHighlighting(\n    column.valueFormatter(row[key]),\n    searchPattern,\n  );\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {valueWithHighlighting}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","searchCellCss","useHighlighting","jsxs","jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,eAAA;AAEX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACjC,EAAA,MAAM,qBAAwB,GAAAC,wBAAA;AAAA,IAC5B,MAAO,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,CAAC,CAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/cjs/table-search/TableSearch.js

@@ -13,28 +13,14 @@ var useTableSearch = require('./useTableSearch.js');
 var TableSearch$1 = require('./TableSearch.css.js');
 
 const classBase = "vuuTableSearch";
-const defaultTableConfig = {
-  columns: [
-    { name: "bbg", hidden: true },
-    {
-      name: "description",
-      width: 200,
-      type: {
-        name: "string",
-        renderer: {
-          name: "search-cell"
-        }
-      }
-    }
-  ],
+const defaultConfig = {
   rowSeparators: true
 };
 const searchIcon = /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "search" });
 const TableSearch = ({
-  TableProps: TableProps2,
+  TableProps: { dataSource: dataSourceProp, ...TableProps2 },
   autoFocus = false,
   className,
-  dataSource: dataSourceProp,
   placeHolder,
   searchColumns,
   ...htmlAttributes
@@ -45,6 +31,13 @@ const TableSearch = ({
     css: TableSearch$1,
     window: targetWindow
   });
+  const config = React.useMemo(
+    () => ({
+      ...defaultConfig,
+      ...TableProps2?.config
+    }),
+    [TableProps2?.config]
+  );
   const { dataSource, onChange, searchState } = useTableSearch.useTableSearch({
     dataSource: dataSourceProp,
     searchColumns
@@ -73,15 +66,16 @@ const TableSearch = ({
         disableFocus: true,
         id: "instrument-search",
         rowHeight: 25,
-        config: defaultTableConfig,
         highlightedIndex: highlightedIndexRef.current,
         renderBufferSize: 100,
         ...TableProps2,
         className: `${classBase}-list`,
+        config,
         dataSource,
         navigationStyle: "row",
         onHighlight,
         ref: tableRef,
+        searchPattern: searchState.searchText,
         showColumnHeaders: false
       }
     ) : null
@@ -90,7 +84,6 @@ const TableSearch = ({
 vuuUtils.registerComponent("search-cell", SearchCell.SearchCell, "cell-renderer", {
   serverDataType: "private"
 });
-vuuUtils.registerComponent?.("TableSearch", TableSearch, "view");
 
 exports.TableSearch = TableSearch;
 //# sourceMappingURL=TableSearch.js.map

package/cjs/table-search/TableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSearch.js","sources":["../../src/table-search/TableSearch.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\n\nconst defaultTableConfig: TableConfig = {\n  columns: [\n    { name: \"bbg\", hidden: true },\n    {\n      name: \"description\",\n      width: 200,\n      type: {\n        name: \"string\",\n        renderer: {\n          name: \"search-cell\",\n        },\n      },\n    },\n  ],\n  rowSeparators: true,\n};\n\nexport interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps?: Partial<TableProps>;\n  autoFocus?: boolean;\n  dataSource: DataSource;\n  placeHolder?: string;\n  searchColumns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const TableSearch = ({\n  TableProps,\n  autoFocus = false,\n  className,\n  dataSource: dataSourceProp,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, onChange, searchState } = useTableSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          config={defaultTableConfig}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n\nregisterComponent?.(\"TableSearch\", TableSearch, \"view\");\n"],"names":["jsx","TableProps","useWindow","useComponentCssInjection","instrumentSearchCss","useTableSearch","useControlledTableNavigation","useCallback","jsxs","Input","Table","registerComponent","SearchCell"],"mappings":"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"}
+{"version":3,"file":"TableSearch.js","sources":["../../src/table-search/TableSearch.tsx"],"sourcesContent":["import {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback, useMemo } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\n\nconst defaultConfig = {\n  rowSeparators: true,\n};\n\nexport interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps: TableProps;\n  autoFocus?: boolean;\n  placeHolder?: string;\n  searchColumns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const TableSearch = ({\n  TableProps: { dataSource: dataSourceProp, ...TableProps },\n  autoFocus = false,\n  className,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const config = useMemo(\n    () => ({\n      ...defaultConfig,\n      ...TableProps?.config,\n    }),\n\n    [TableProps?.config],\n  );\n\n  const { dataSource, onChange, searchState } = useTableSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          config={config}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          searchPattern={searchState.searchText}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n"],"names":["jsx","TableProps","useWindow","useComponentCssInjection","instrumentSearchCss","useMemo","useTableSearch","useControlledTableNavigation","useCallback","jsxs","Input","Table","registerComponent","SearchCell"],"mappings":"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"}

package/cjs/table-search/useTableSearch.js

@@ -9,7 +9,7 @@ const useTableSearch = ({
   const [searchState, setSearchState] = React.useState({ searchText: "", filter: "" });
   const baseFilterPattern = React.useMemo(
     // TODO make this contains once server supports it
-    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    () => searchColumns.map((col) => `${col} contains "__VALUE__"`).join(" or "),
     [searchColumns]
   );
   const handleChange = React.useCallback(

package/cjs/table-search/useTableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSearch.js","sources":["../../src/table-search/useTableSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { TableSearchProps } from \"./TableSearch\";\n\nexport interface TableSearchHookProps\n  extends Pick<TableSearchProps, \"dataSource\" | \"searchColumns\"> {\n  label?: string;\n}\n\nexport const useTableSearch = ({\n  dataSource,\n  searchColumns,\n}: TableSearchHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n    filter: string;\n  }>({ searchText: \"\", filter: \"\" });\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 handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n      setSearchState({\n        searchText: value,\n        filter,\n      });\n      if (dataSource) {\n        dataSource.filter = {\n          filter,\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  return {\n    dataSource,\n    onChange: handleChange,\n    searchState,\n  };\n};\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;;AAQO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA,aAAA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAAC,aAAA;AAAA;AAAA,IAExB,MAAM,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,mBAAA,CAAqB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACzE,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAa,KAAK,CAAA,CAAA;AAC9D,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA,KAAA;AAAA,QACZ,MAAA;AAAA,OACD,CAAA,CAAA;AACD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB,MAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useTableSearch.js","sources":["../../src/table-search/useTableSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { TableSearchProps } from \"./TableSearch\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface TableSearchHookProps\n  extends Pick<TableSearchProps, \"searchColumns\"> {\n  dataSource: DataSource;\n  label?: string;\n}\n\nexport const useTableSearch = ({\n  dataSource,\n  searchColumns,\n}: TableSearchHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n    filter: string;\n  }>({ searchText: \"\", filter: \"\" });\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () =>\n      searchColumns.map((col) => `${col} contains \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n      setSearchState({\n        searchText: value,\n        filter,\n      });\n      if (dataSource) {\n        dataSource.filter = {\n          filter,\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  return {\n    dataSource,\n    onChange: handleChange,\n    searchState,\n  };\n};\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAAC,aAAA;AAAA;AAAA,IAExB,MACE,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,qBAAA,CAAuB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACvE,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAa,KAAK,CAAA;AAC9D,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA,KAAA;AAAA,QACZ;AAAA,OACD,CAAA;AACD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU;AAAA,GAChC;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV;AAAA,GACF;AACF;;;;"}

package/cjs/tabs-next/TabBar.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabBarCss = ".saltTabBar {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  box-sizing: border-box;\n}\n\n.saltTabBar-divider::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabBar-inset {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n";
+
+module.exports = tabBarCss;
+//# sourceMappingURL=TabBar.css.js.map

package/cjs/tabs-next/TabBar.css.js.map

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

package/cjs/tabs-next/TabBar.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var TabBar$1 = require('./TabBar.css.js');
+
+const withBaseName = core.makePrefixer("saltTabBar");
+const TabBar = React.forwardRef(
+  function TabBar2(props, ref) {
+    const { className, children, divider, inset, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tab-bar",
+      css: TabBar$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("divider")]: divider,
+            [withBaseName("inset")]: inset
+          },
+          className
+        ),
+        ...rest,
+        ref,
+        children
+      }
+    );
+  }
+);
+
+exports.TabBar = TabBar;
+//# sourceMappingURL=TabBar.js.map

package/cjs/tabs-next/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sources":["../../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Styling variant with a bottom separator. Defaults to false\n   */\n  divider?: boolean;\n  /**\n   * Styling variant with left and right padding. Defaults to false\n   */\n  inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  function TabBar(props, ref) {\n    const { className, children, divider, inset, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-bar\",\n      css: tabBarCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"divider\")]: divider,\n            [withBaseName(\"inset\")]: inset,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,OAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/cjs/tabs-next/TabListNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tablistNextCss = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n";
+
+module.exports = tablistNextCss;
+//# sourceMappingURL=TabListNext.css.js.map

package/cjs/tabs-next/TabListNext.css.js.map

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

package/cjs/tabs-next/TabListNext.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var TabListNext$1 = require('./TabListNext.css.js');
+var TabOverflowList = require('./TabOverflowList.js');
+var TabsNextContext = require('./TabsNextContext.js');
+var useOverflow = require('./hooks/useOverflow.js');
+
+const withBaseName = core.makePrefixer("saltTabListNext");
+const TabListNext = React.forwardRef(
+  function TabstripNext(props, ref) {
+    const {
+      appearance = "bordered",
+      activeColor = "primary",
+      children,
+      className,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tablist-next",
+      css: TabListNext$1,
+      window: targetWindow
+    });
+    const {
+      selected,
+      getNext,
+      getPrevious,
+      getFirst,
+      getLast,
+      items,
+      activeTab,
+      menuOpen,
+      setMenuOpen,
+      returnFocus
+    } = TabsNextContext.useTabsNext();
+    const tabstripRef = React.useRef(null);
+    const handleRef = core.useForkRef(tabstripRef, ref);
+    const overflowButtonRef = React.useRef(null);
+    const [visible, hidden, isMeasuring] = useOverflow.useOverflow({
+      container: tabstripRef,
+      tabs: items,
+      children,
+      selected,
+      overflowButton: overflowButtonRef
+    });
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      const actionMap = {
+        ArrowRight: getNext,
+        ArrowLeft: getPrevious,
+        Home: getFirst,
+        End: getLast,
+        ArrowUp: menuOpen ? getPrevious : void 0,
+        ArrowDown: menuOpen ? getNext : void 0
+      };
+      const action = actionMap[event.key];
+      if (action) {
+        event.preventDefault();
+        const activeTabId = activeTab.current?.id;
+        if (!activeTabId) return;
+        const nextItem = action(activeTabId);
+        if (nextItem) {
+          nextItem.element?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest"
+          });
+          nextItem.element?.focus({ preventScroll: true });
+        }
+      }
+    };
+    core.useIsomorphicLayoutEffect(() => {
+      if (!returnFocus.current || visible.length < 1 || selected === void 0)
+        return;
+      const itemToFocus = items.find((i) => i.value === returnFocus.current);
+      itemToFocus?.element?.focus({ preventScroll: true });
+      requestAnimationFrame(() => {
+        if (targetWindow?.document?.activeElement === itemToFocus?.element) {
+          returnFocus.current = void 0;
+        }
+      });
+    }, [visible, returnFocus, targetWindow, items, selected]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "tablist",
+        className: cx.clsx(
+          withBaseName(),
+          withBaseName(appearance),
+          withBaseName("horizontal"),
+          withBaseName(`activeColor${core.capitalize(activeColor)}`),
+          className
+        ),
+        "data-ismeasuring": isMeasuring ? true : void 0,
+        ref: handleRef,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: [
+          visible,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TabOverflowList.TabOverflowList,
+            {
+              isMeasuring,
+              buttonRef: overflowButtonRef,
+              tabstripRef,
+              open: menuOpen,
+              setOpen: setMenuOpen,
+              children: hidden
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.TabListNext = TabListNext;
+//# sourceMappingURL=TabListNext.js.map

package/cjs/tabs-next/TabListNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListNext.js","sources":["../../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useIsomorphicLayoutEffect","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAc5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAAS,YAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,UAAa,GAAA,UAAA;AAAA,MACb,WAAc,GAAA,SAAA;AAAA,MACd,QAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,QACEC,2BAAY,EAAA;AAEhB,IAAM,MAAA,WAAA,GAAcC,aAAuB,IAAI,CAAA;AAC/C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,WAAA,EAAa,GAAG,CAAA;AAC7C,IAAM,MAAA,iBAAA,GAAoBD,aAA0B,IAAI,CAAA;AAExD,IAAA,MAAM,CAAC,OAAA,EAAS,MAAQ,EAAA,WAAW,IAAIE,uBAAY,CAAA;AAAA,MACjD,SAAW,EAAA,WAAA;AAAA,MACX,IAAM,EAAA,KAAA;AAAA,MACN,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAgB,EAAA;AAAA,KACjB,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AAC9D,MAAA,SAAA,GAAY,KAAK,CAAA;AAEjB,MAAA,MAAM,SAAY,GAAA;AAAA,QAChB,UAAY,EAAA,OAAA;AAAA,QACZ,SAAW,EAAA,WAAA;AAAA,QACX,IAAM,EAAA,QAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACL,OAAA,EAAS,WAAW,WAAc,GAAA,KAAA,CAAA;AAAA,QAClC,SAAA,EAAW,WAAW,OAAU,GAAA,KAAA;AAAA,OAClC;AAEA,MAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,CAAM,GAA6B,CAAA;AAE5D,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAM,MAAA,WAAA,GAAc,UAAU,OAAS,EAAA,EAAA;AACvC,QAAA,IAAI,CAAC,WAAa,EAAA;AAClB,QAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,SAAS,cAAe,CAAA;AAAA,YAC/B,KAAO,EAAA,SAAA;AAAA,YACP,MAAQ,EAAA;AAAA,WACT,CAAA;AACD,UAAA,QAAA,CAAS,OAAS,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AAAA;AACjD;AACF,KACF;AAEA,IAAAC,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,CAAC,WAAY,CAAA,OAAA,IAAW,OAAQ,CAAA,MAAA,GAAS,KAAK,QAAa,KAAA,KAAA,CAAA;AAC7D,QAAA;AAEF,MAAM,MAAA,WAAA,GAAc,MAAM,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,YAAY,OAAO,CAAA;AACrE,MAAA,WAAA,EAAa,OAAS,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AAEnD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,YAAc,EAAA,QAAA,EAAU,aAAkB,KAAA,WAAA,EAAa,OAAS,EAAA;AAClE,UAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAAA;AACxB,OACD,CAAA;AAAA,OACA,CAAC,OAAA,EAAS,aAAa,YAAc,EAAA,KAAA,EAAO,QAAQ,CAAC,CAAA;AAExD,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,SAAA;AAAA,QACL,SAAW,EAAAC,OAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,UAAU,CAAA;AAAA,UACvB,aAAa,YAAY,CAAA;AAAA,UACzB,YAAa,CAAA,CAAA,WAAA,EAAcC,eAAW,CAAA,WAAW,CAAC,CAAE,CAAA,CAAA;AAAA,UACpD;AAAA,SACF;AAAA,QACA,kBAAA,EAAkB,cAAc,IAAO,GAAA,KAAA,CAAA;AAAA,QACvC,GAAK,EAAA,SAAA;AAAA,QACL,SAAW,EAAA,aAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACDC,cAAA;AAAA,YAACC,+BAAA;AAAA,YAAA;AAAA,cACC,WAAA;AAAA,cACA,SAAW,EAAA,iBAAA;AAAA,cACX,WAAA;AAAA,cACA,IAAM,EAAA,QAAA;AAAA,cACN,OAAS,EAAA,WAAA;AAAA,cAER,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/cjs/tabs-next/TabNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabCss = "/* Class applied to root Tab element */\n.saltTabNext {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  --tabNext-radius: var(--salt-palette-corner-weak, 0);\n  border-radius: var(--tab-radius) var(--tab-radius) 0 0;\n  overflow: hidden;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabListNext-bordered .saltTabNext::after {\n  top: 0;\n}\n\n.saltTabListNext-transparent .saltTabNext::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext-focusVisible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext-disabled:hover::after,\n.saltTabNext-disabled.saltTabNext-focusVisible::after {\n  background: none;\n}\n\n.saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabListNext-bordered .saltTabNext.saltTabNext-selected {\n  background: var(--saltTabListNext-activeColor);\n  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabNext.saltTabNext-selected::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext.saltTabNext-disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+
+module.exports = tabCss;
+//# sourceMappingURL=TabNext.css.js.map

package/cjs/tabs-next/TabNext.css.js.map

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