@salt-ds/core 1.67.0 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/css/salt-core.css +4 -28
  3. package/dist-cjs/button/Button.js.map +1 -1
  4. package/dist-cjs/checkbox/Checkbox.js +2 -1
  5. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  6. package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
  7. package/dist-cjs/dialog/Dialog.js.map +1 -1
  8. package/dist-cjs/dropdown/Dropdown.js +3 -3
  9. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  10. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +11 -1
  11. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  12. package/dist-cjs/input/Input.js +10 -3
  13. package/dist-cjs/input/Input.js.map +1 -1
  14. package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
  15. package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
  16. package/dist-cjs/multiline-input/MultilineInput.js +2 -0
  17. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
  18. package/dist-cjs/number-input/NumberInput.js +2 -0
  19. package/dist-cjs/number-input/NumberInput.js.map +1 -1
  20. package/dist-cjs/pill-input/PillInput.js +10 -3
  21. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  22. package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
  23. package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
  24. package/dist-cjs/slider/RangeSlider.js +6 -2
  25. package/dist-cjs/slider/RangeSlider.js.map +1 -1
  26. package/dist-cjs/slider/Slider.js +2 -0
  27. package/dist-cjs/slider/Slider.js.map +1 -1
  28. package/dist-cjs/status-indicator/ValidationStatus.js.map +1 -1
  29. package/dist-cjs/text/Text.js.map +1 -1
  30. package/dist-cjs/theme/Accent.js.map +1 -1
  31. package/dist-cjs/theme/ActionFont.js.map +1 -1
  32. package/dist-cjs/theme/Corner.js.map +1 -1
  33. package/dist-cjs/theme/HeadingFont.js.map +1 -1
  34. package/dist-es/button/Button.js.map +1 -1
  35. package/dist-es/checkbox/Checkbox.js +2 -1
  36. package/dist-es/checkbox/Checkbox.js.map +1 -1
  37. package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
  38. package/dist-es/dialog/Dialog.js.map +1 -1
  39. package/dist-es/dropdown/Dropdown.js +3 -3
  40. package/dist-es/dropdown/Dropdown.js.map +1 -1
  41. package/dist-es/file-drop-zone/FileDropZoneTrigger.js +11 -1
  42. package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  43. package/dist-es/input/Input.js +10 -3
  44. package/dist-es/input/Input.js.map +1 -1
  45. package/dist-es/interactable-card/InteractableCard.css.js +1 -1
  46. package/dist-es/interactable-card/InteractableCard.js.map +1 -1
  47. package/dist-es/multiline-input/MultilineInput.js +2 -0
  48. package/dist-es/multiline-input/MultilineInput.js.map +1 -1
  49. package/dist-es/number-input/NumberInput.js +2 -0
  50. package/dist-es/number-input/NumberInput.js.map +1 -1
  51. package/dist-es/pill-input/PillInput.js +10 -3
  52. package/dist-es/pill-input/PillInput.js.map +1 -1
  53. package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
  54. package/dist-es/salt-provider/SaltProvider.js.map +1 -1
  55. package/dist-es/slider/RangeSlider.js +6 -2
  56. package/dist-es/slider/RangeSlider.js.map +1 -1
  57. package/dist-es/slider/Slider.js +2 -0
  58. package/dist-es/slider/Slider.js.map +1 -1
  59. package/dist-es/status-indicator/ValidationStatus.js.map +1 -1
  60. package/dist-es/text/Text.js.map +1 -1
  61. package/dist-es/theme/Accent.js.map +1 -1
  62. package/dist-es/theme/ActionFont.js.map +1 -1
  63. package/dist-es/theme/Corner.js.map +1 -1
  64. package/dist-es/theme/HeadingFont.js.map +1 -1
  65. package/dist-types/button/Button.d.ts +1 -1
  66. package/dist-types/checkbox/CheckboxIcon.d.ts +1 -1
  67. package/dist-types/dialog/Dialog.d.ts +1 -1
  68. package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +4 -0
  69. package/dist-types/input/Input.d.ts +4 -0
  70. package/dist-types/interactable-card/InteractableCard.d.ts +1 -1
  71. package/dist-types/multiline-input/MultilineInput.d.ts +4 -0
  72. package/dist-types/number-input/NumberInput.d.ts +4 -0
  73. package/dist-types/pill-input/PillInput.d.ts +4 -0
  74. package/dist-types/radio-button/RadioButtonIcon.d.ts +1 -1
  75. package/dist-types/salt-provider/SaltProvider.d.ts +6 -6
  76. package/dist-types/slider/RangeSlider.d.ts +8 -0
  77. package/dist-types/slider/Slider.d.ts +4 -0
  78. package/dist-types/status-indicator/ValidationStatus.d.ts +1 -1
  79. package/dist-types/text/Text.d.ts +1 -1
  80. package/dist-types/theme/Accent.d.ts +2 -2
  81. package/dist-types/theme/ActionFont.d.ts +2 -2
  82. package/dist-types/theme/Corner.d.ts +2 -2
  83. package/dist-types/theme/HeadingFont.d.ts +2 -2
  84. package/package.json +3 -3
@@ -1 +1 @@
1
- {"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n StyleInjectionProvider,\n useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow, type WindowContextType } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n createContext,\n type ReactElement,\n type ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n BreakpointProvider,\n type Breakpoints,\n DEFAULT_BREAKPOINTS,\n useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n Accent,\n ActionFont,\n Corner,\n Density,\n HeadingFont,\n Mode,\n ThemeName,\n} from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { ProviderContext } from \"./ProviderContext\";\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { ThemeApplicator, type ThemeApplicatorProps } from \"./ThemeApplicator\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n window?: WindowContextType;\n /** Only available when using SaltProviderNext. */\n themeNext: boolean;\n corner: Corner;\n /** @deprecated use `corner`*/\n UNSTABLE_corner: Corner;\n headingFont: HeadingFont;\n /** @deprecated use `headingFont` */\n UNSTABLE_headingFont: HeadingFont;\n accent: Accent;\n /** @deprecated use `accent` */\n UNSTABLE_accent: Accent;\n actionFont: ActionFont;\n /** @deprecated use `actionFont` */\n UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n themeNext: false,\n corner: DEFAULT_CORNER,\n UNSTABLE_corner: DEFAULT_CORNER,\n headingFont: DEFAULT_HEADING_FONT,\n UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n accent: DEFAULT_ACCENT,\n UNSTABLE_accent: DEFAULT_ACCENT,\n actionFont: DEFAULT_ACTION_FONT,\n UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\ntype ThemeNextOnlyAttributes =\n | \"accent\"\n | \"corner\"\n | \"actionFont\"\n | \"headingFont\";\n\ninterface SaltProviderBaseProps\n extends Partial<\n Omit<ThemeApplicatorProps, \"children\" | ThemeNextOnlyAttributes>\n > {\n /**\n * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n * Determines breakpoints used in responsive calculation for layout components.\n */\n breakpoints?: Breakpoints;\n /**\n * A boolean. Enables dynamic style injection for each component.\n *\n * If `false`, you'll need to include component CSS yourself.\n *\n * @default true\n */\n enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n themeNext,\n corner: cornerProp,\n headingFont: headingFontProp,\n accent: accentProp,\n actionFont: actionFontProp,\n}: Omit<\n SaltProviderProps & {\n themeNext?: boolean;\n } & SaltProviderNextProps,\n \"enableStyleInjection\"\n>) {\n const prevProvider = useContext(ProviderContext);\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n corner: inheritedCorner,\n headingFont: inheritedHeadingFont,\n accent: inheritedAccent,\n actionFont: inheritedActionFont,\n } = useContext(ThemeContext);\n\n const isRootProvider = prevProvider === null;\n\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const inheritedThemeName =\n inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme;\n const themeName = themeProp ?? inheritedThemeName;\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n const headingFont =\n headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n const actionFont =\n actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n const themeContextValue = useMemo(\n () => ({\n theme: themeName,\n mode,\n window: targetWindow,\n themeNext: Boolean(themeNext),\n corner: corner,\n headingFont: headingFont,\n accent: accent,\n actionFont: actionFont,\n // Backward compatibility\n UNSTABLE_corner: corner,\n UNSTABLE_headingFont: headingFont,\n UNSTABLE_accent: accent,\n UNSTABLE_actionFont: actionFont,\n }),\n [\n themeName,\n mode,\n targetWindow,\n themeNext,\n corner,\n headingFont,\n accent,\n actionFont,\n ],\n );\n\n const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n const saltProvider = (\n <ProviderContext.Provider value={{ targetWindow }}>\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>\n <ThemeApplicator\n applyClassesTo={\n applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\")\n }\n density={density}\n theme={clsx(\n DEFAULT_THEME_NAME,\n { [DEFAULT_THEME_NAME_NEXT]: themeNext },\n themeName,\n )}\n mode={mode}\n accent={themeNext ? accent : undefined}\n actionFont={themeNext ? actionFont : undefined}\n headingFont={themeNext ? headingFont : undefined}\n corner={themeNext ? corner : undefined}\n >\n {children}\n </ThemeApplicator>\n </ViewportProvider>\n </BreakpointContext.Provider>\n </BreakpointProvider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n </ProviderContext.Provider>\n );\n\n if (isRootProvider) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n }\n return saltProvider;\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n Pick<ThemeApplicatorProps, ThemeNextOnlyAttributes>;\nexport function SaltProviderNext({\n enableStyleInjection,\n ...restProps\n}: SaltProviderNextProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n <InternalSaltProvider {...restProps} themeNext={true} />\n </StyleInjectionProvider>\n );\n}\n\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\n/** @deprecated use `SaltProviderNext` */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n const { window: _window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","useContext","ProviderContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useMatchedBreakpoints","jsx","BreakpointProvider","ViewportProvider","ThemeApplicator","clsx","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}
1
+ {"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n StyleInjectionProvider,\n useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow, type WindowContextType } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n createContext,\n type ReactElement,\n type ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n BreakpointProvider,\n type Breakpoints,\n DEFAULT_BREAKPOINTS,\n useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n Accent,\n ActionFont,\n Corner,\n Density,\n HeadingFont,\n Mode,\n ThemeName,\n} from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { ProviderContext } from \"./ProviderContext\";\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { ThemeApplicator, type ThemeApplicatorProps } from \"./ThemeApplicator\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n window?: WindowContextType;\n /** Only available when using SaltProviderNext. */\n themeNext: boolean;\n corner: Corner;\n /** @deprecated since 1.32.0. Use `corner`. */\n UNSTABLE_corner: Corner;\n headingFont: HeadingFont;\n /** @deprecated since 1.32.0. Use `headingFont`. */\n UNSTABLE_headingFont: HeadingFont;\n accent: Accent;\n /** @deprecated since 1.32.0. Use `accent`. */\n UNSTABLE_accent: Accent;\n actionFont: ActionFont;\n /** @deprecated since 1.32.0. Use `actionFont`. */\n UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n themeNext: false,\n corner: DEFAULT_CORNER,\n UNSTABLE_corner: DEFAULT_CORNER,\n headingFont: DEFAULT_HEADING_FONT,\n UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n accent: DEFAULT_ACCENT,\n UNSTABLE_accent: DEFAULT_ACCENT,\n actionFont: DEFAULT_ACTION_FONT,\n UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\ntype ThemeNextOnlyAttributes =\n | \"accent\"\n | \"corner\"\n | \"actionFont\"\n | \"headingFont\";\n\ninterface SaltProviderBaseProps\n extends Partial<\n Omit<ThemeApplicatorProps, \"children\" | ThemeNextOnlyAttributes>\n > {\n /**\n * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n * Determines breakpoints used in responsive calculation for layout components.\n */\n breakpoints?: Breakpoints;\n /**\n * A boolean. Enables dynamic style injection for each component.\n *\n * If `false`, you'll need to include component CSS yourself.\n *\n * @default true\n */\n enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n themeNext,\n corner: cornerProp,\n headingFont: headingFontProp,\n accent: accentProp,\n actionFont: actionFontProp,\n}: Omit<\n SaltProviderProps & {\n themeNext?: boolean;\n } & SaltProviderNextProps,\n \"enableStyleInjection\"\n>) {\n const prevProvider = useContext(ProviderContext);\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n corner: inheritedCorner,\n headingFont: inheritedHeadingFont,\n accent: inheritedAccent,\n actionFont: inheritedActionFont,\n } = useContext(ThemeContext);\n\n const isRootProvider = prevProvider === null;\n\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const inheritedThemeName =\n inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme;\n const themeName = themeProp ?? inheritedThemeName;\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n const headingFont =\n headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n const actionFont =\n actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n const themeContextValue = useMemo(\n () => ({\n theme: themeName,\n mode,\n window: targetWindow,\n themeNext: Boolean(themeNext),\n corner: corner,\n headingFont: headingFont,\n accent: accent,\n actionFont: actionFont,\n // Backward compatibility\n UNSTABLE_corner: corner,\n UNSTABLE_headingFont: headingFont,\n UNSTABLE_accent: accent,\n UNSTABLE_actionFont: actionFont,\n }),\n [\n themeName,\n mode,\n targetWindow,\n themeNext,\n corner,\n headingFont,\n accent,\n actionFont,\n ],\n );\n\n const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n const saltProvider = (\n <ProviderContext.Provider value={{ targetWindow }}>\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>\n <ThemeApplicator\n applyClassesTo={\n applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\")\n }\n density={density}\n theme={clsx(\n DEFAULT_THEME_NAME,\n { [DEFAULT_THEME_NAME_NEXT]: themeNext },\n themeName,\n )}\n mode={mode}\n accent={themeNext ? accent : undefined}\n actionFont={themeNext ? actionFont : undefined}\n headingFont={themeNext ? headingFont : undefined}\n corner={themeNext ? corner : undefined}\n >\n {children}\n </ThemeApplicator>\n </ViewportProvider>\n </BreakpointContext.Provider>\n </BreakpointProvider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n </ProviderContext.Provider>\n );\n\n if (isRootProvider) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n }\n return saltProvider;\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n Pick<ThemeApplicatorProps, ThemeNextOnlyAttributes>;\nexport function SaltProviderNext({\n enableStyleInjection,\n ...restProps\n}: SaltProviderNextProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n <InternalSaltProvider {...restProps} themeNext={true} />\n </StyleInjectionProvider>\n );\n}\n\n/** @deprecated since 1.32.0. Use `SaltProviderNextProps`. */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\n/** @deprecated since 1.32.0. Use `SaltProviderNext`. */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n const { window: _window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","useContext","ProviderContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useMatchedBreakpoints","jsx","BreakpointProvider","ViewportProvider","ThemeApplicator","clsx","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}
@@ -28,8 +28,10 @@ const RangeSlider = React.forwardRef(
28
28
  marks,
29
29
  max = 100,
30
30
  min = 0,
31
+ endName,
31
32
  maxLabel,
32
33
  minLabel,
34
+ startName,
33
35
  onChange,
34
36
  onChangeEnd,
35
37
  restrictToMarks = false,
@@ -159,7 +161,8 @@ const RangeSlider = React.forwardRef(
159
161
  inputRef: inputRefs[0],
160
162
  onFocus: () => handleFocus(0),
161
163
  onBlur: () => handleBlur(0),
162
- ...thumbProps
164
+ ...thumbProps,
165
+ name: startName
163
166
  }
164
167
  ),
165
168
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -175,7 +178,8 @@ const RangeSlider = React.forwardRef(
175
178
  inputRef: inputRefs[1],
176
179
  onFocus: () => handleFocus(1),
177
180
  onBlur: () => handleBlur(1),
178
- ...thumbProps
181
+ ...thumbProps,
182
+ name: endName
179
183
  }
180
184
  )
181
185
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n forwardRef,\n type HTMLAttributes,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default [min, min + (max - min) / 2]\n */\n defaultValue?: [number, number];\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: [number, number]) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: [number, number]) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n function RangeSlider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n max = 100,\n min = 0,\n maxLabel,\n minLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = [min, min + (max - min) / 2],\n ...rest\n },\n ref,\n ) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"RangeSlider\",\n state: \"value\",\n });\n const lastValueRef = useRef<[number, number]>(valueState);\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRefs = [\n useRef<HTMLInputElement>(null),\n useRef<HTMLInputElement>(null),\n ];\n const value: [number, number] = clampRange(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentageStart = calculatePercentage(value[0], max, min);\n const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n const handleInputChange = (\n event: ChangeEvent<HTMLInputElement>,\n thumbIndex: number,\n ) => {\n const parsedValue = toFloat(event.target.value);\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n const haveValuesChanged =\n values[0] !== lastValueRef.current[0] ||\n values[1] !== lastValueRef.current[1];\n if (haveValuesChanged) {\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n setValue(values as [number, number]);\n onChange?.(event.nativeEvent, values as [number, number]);\n onChangeEnd?.(event.nativeEvent, values as [number, number]);\n lastValueRef.current = values;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n thumbIndexState,\n preventThumbOverlap,\n } = useRangeSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRefs,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n const thumbProps = {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText: accessibleMaxText,\n accessibleMinText: accessibleMinText,\n disabled: disabled,\n format: format,\n max: max,\n maxLabel: maxLabel,\n min: min,\n minLabel: minLabel,\n restrictToMarks: restrictToMarks,\n showTooltip: showTooltip,\n step: step,\n stepMultiplier: stepMultiplier,\n sliderValue: value,\n };\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n isRange\n marks={marks}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n progressPercentageRange={[\n progressPercentageStart,\n progressPercentageEnd,\n ]}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n index={0}\n handleInputChange={(event) => handleInputChange(event, 0)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 0}\n isFocusVisible={isFocusVisible && thumbIndexState === 0}\n inputRef={inputRefs[0]}\n onFocus={() => handleFocus(0)}\n onBlur={() => handleBlur(0)}\n {...thumbProps}\n />\n <SliderThumb\n index={1}\n handleInputChange={(event) => handleInputChange(event, 1)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 1}\n isFocusVisible={isFocusVisible && thumbIndexState === 1}\n inputRef={inputRefs[1]}\n onFocus={() => handleFocus(1)}\n onBlur={() => handleBlur(1)}\n {...thumbProps}\n />\n </SliderTrack>\n );\n },\n);\n"],"names":["forwardRef","RangeSlider","useControlled","useRef","useFormFieldProps","clampRange","calculatePercentage","toFloat","values","useRangeSliderThumb","clsx","jsxs","SliderTrack","jsx","SliderThumb"],"mappings":"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"}
1
+ {"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n forwardRef,\n type HTMLAttributes,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default [min, min + (max - min) / 2]\n */\n defaultValue?: [number, number];\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for minimum value.\n */\n minLabel?: string;\n /**\n * The name applied to the start value input.\n */\n startName?: string;\n /**\n * The name applied to the end value input.\n */\n endName?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: [number, number]) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: [number, number]) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n function RangeSlider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n max = 100,\n min = 0,\n endName,\n maxLabel,\n minLabel,\n startName,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = [min, min + (max - min) / 2],\n ...rest\n },\n ref,\n ) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"RangeSlider\",\n state: \"value\",\n });\n const lastValueRef = useRef<[number, number]>(valueState);\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRefs = [\n useRef<HTMLInputElement>(null),\n useRef<HTMLInputElement>(null),\n ];\n const value: [number, number] = clampRange(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentageStart = calculatePercentage(value[0], max, min);\n const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n const handleInputChange = (\n event: ChangeEvent<HTMLInputElement>,\n thumbIndex: number,\n ) => {\n const parsedValue = toFloat(event.target.value);\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n const haveValuesChanged =\n values[0] !== lastValueRef.current[0] ||\n values[1] !== lastValueRef.current[1];\n if (haveValuesChanged) {\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n setValue(values as [number, number]);\n onChange?.(event.nativeEvent, values as [number, number]);\n onChangeEnd?.(event.nativeEvent, values as [number, number]);\n lastValueRef.current = values;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n thumbIndexState,\n preventThumbOverlap,\n } = useRangeSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRefs,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n const thumbProps = {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText: accessibleMaxText,\n accessibleMinText: accessibleMinText,\n disabled: disabled,\n format: format,\n max: max,\n maxLabel: maxLabel,\n min: min,\n minLabel: minLabel,\n restrictToMarks: restrictToMarks,\n showTooltip: showTooltip,\n step: step,\n stepMultiplier: stepMultiplier,\n sliderValue: value,\n };\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n isRange\n marks={marks}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n progressPercentageRange={[\n progressPercentageStart,\n progressPercentageEnd,\n ]}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n index={0}\n handleInputChange={(event) => handleInputChange(event, 0)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 0}\n isFocusVisible={isFocusVisible && thumbIndexState === 0}\n inputRef={inputRefs[0]}\n onFocus={() => handleFocus(0)}\n onBlur={() => handleBlur(0)}\n {...thumbProps}\n name={startName}\n />\n <SliderThumb\n index={1}\n handleInputChange={(event) => handleInputChange(event, 1)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 1}\n isFocusVisible={isFocusVisible && thumbIndexState === 1}\n inputRef={inputRefs[1]}\n onFocus={() => handleFocus(1)}\n onBlur={() => handleBlur(1)}\n {...thumbProps}\n name={endName}\n />\n </SliderTrack>\n );\n },\n);\n"],"names":["forwardRef","RangeSlider","useControlled","useRef","useFormFieldProps","clampRange","calculatePercentage","toFloat","values","useRangeSliderThumb","clsx","jsxs","SliderTrack","jsx","SliderThumb"],"mappings":"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"}
@@ -29,6 +29,7 @@ const Slider = React.forwardRef(function Slider2({
29
29
  minLabel,
30
30
  max = 100,
31
31
  maxLabel,
32
+ name,
32
33
  onChange,
33
34
  onChangeEnd,
34
35
  restrictToMarks = false,
@@ -134,6 +135,7 @@ const Slider = React.forwardRef(function Slider2({
134
135
  minLabel,
135
136
  max,
136
137
  maxLabel,
138
+ name,
137
139
  offsetPercentage: `${progressPercentage}%`,
138
140
  restrictToMarks,
139
141
  sliderValue: value,
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n forwardRef,\n type HTMLAttributes,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n * @default false\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default min + (max - min) / 2,\n */\n defaultValue?: number;\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for the minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: number) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: number) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n min = 0,\n minLabel,\n max = 100,\n maxLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = min + (max - min) / 2,\n ...rest\n },\n ref,\n) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"value\",\n });\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRef = useRef<HTMLInputElement>(null);\n const value = clamp(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentage = calculatePercentage(toFloat(value), max, min);\n const lastValueRef = useRef<number>(value);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const parsedValue = toFloat(event.target.value);\n if (parsedValue !== lastValueRef.current) {\n setValue(parsedValue);\n onChange?.(event.nativeEvent, parsedValue);\n onChangeEnd?.(event.nativeEvent, parsedValue);\n lastValueRef.current = parsedValue;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n } = useSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n marks={marks}\n progressPercentage={progressPercentage}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuetext={ariaValueText}\n accessibleMaxText={accessibleMaxText}\n accessibleMinText={accessibleMinText}\n disabled={disabled}\n format={format}\n onBlur={handleBlur}\n onFocus={handleFocus}\n handleInputChange={handleInputChange}\n handlePointerDown={handlePointerDownOnThumb}\n handleKeydownOnThumb={handleKeydownOnThumb}\n inputRef={inputRef}\n isFocusVisible={isFocusVisible}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n offsetPercentage={`${progressPercentage}%`}\n restrictToMarks={restrictToMarks}\n sliderValue={value}\n showTooltip={showTooltip}\n step={step}\n stepMultiplier={stepMultiplier}\n trackDragging={isDragging}\n />\n </SliderTrack>\n );\n});\n"],"names":["forwardRef","Slider","useControlled","useFormFieldProps","useRef","clamp","calculatePercentage","toFloat","useSliderThumb","jsx","SliderTrack","SliderThumb","clsx"],"mappings":"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"}
1
+ {"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n forwardRef,\n type HTMLAttributes,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n * @default false\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default min + (max - min) / 2,\n */\n defaultValue?: number;\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for the minimum value.\n */\n minLabel?: string;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: number) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: number) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n min = 0,\n minLabel,\n max = 100,\n maxLabel,\n name,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = min + (max - min) / 2,\n ...rest\n },\n ref,\n) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"value\",\n });\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRef = useRef<HTMLInputElement>(null);\n const value = clamp(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentage = calculatePercentage(toFloat(value), max, min);\n const lastValueRef = useRef<number>(value);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const parsedValue = toFloat(event.target.value);\n if (parsedValue !== lastValueRef.current) {\n setValue(parsedValue);\n onChange?.(event.nativeEvent, parsedValue);\n onChangeEnd?.(event.nativeEvent, parsedValue);\n lastValueRef.current = parsedValue;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n } = useSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n marks={marks}\n progressPercentage={progressPercentage}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuetext={ariaValueText}\n accessibleMaxText={accessibleMaxText}\n accessibleMinText={accessibleMinText}\n disabled={disabled}\n format={format}\n onBlur={handleBlur}\n onFocus={handleFocus}\n handleInputChange={handleInputChange}\n handlePointerDown={handlePointerDownOnThumb}\n handleKeydownOnThumb={handleKeydownOnThumb}\n inputRef={inputRef}\n isFocusVisible={isFocusVisible}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n name={name}\n offsetPercentage={`${progressPercentage}%`}\n restrictToMarks={restrictToMarks}\n sliderValue={value}\n showTooltip={showTooltip}\n step={step}\n stepMultiplier={stepMultiplier}\n trackDragging={isDragging}\n />\n </SliderTrack>\n );\n});\n"],"names":["forwardRef","Slider","useControlled","useFormFieldProps","useRef","clamp","calculatePercentage","toFloat","useSliderThumb","jsx","SliderTrack","SliderThumb","clsx"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ValidationStatus.js","sources":["../src/status-indicator/ValidationStatus.ts"],"sourcesContent":["export interface ValidationStatuses {\n error: string;\n warning: string;\n success: string;\n info: string;\n}\n\nexport type ValidationStatus = keyof ValidationStatuses;\n\nconst ValidationStatusValues = [\"error\", \"warning\", \"success\", \"info\"] as const;\n\n/**\n * @deprecated use ValidationStatusValues\n */\nexport const VALIDATION_NAMED_STATUS = ValidationStatusValues;\n"],"names":[],"mappings":";;AASA,MAAM,sBAAA,GAAyB,CAAC,OAAA,EAAS,SAAA,EAAW,WAAW,MAAM,CAAA;AAK9D,MAAM,uBAAA,GAA0B;;;;"}
1
+ {"version":3,"file":"ValidationStatus.js","sources":["../src/status-indicator/ValidationStatus.ts"],"sourcesContent":["export interface ValidationStatuses {\n error: string;\n warning: string;\n success: string;\n info: string;\n}\n\nexport type ValidationStatus = keyof ValidationStatuses;\n\nconst ValidationStatusValues = [\"error\", \"warning\", \"success\", \"info\"] as const;\n\n/**\n * @deprecated since 1.55.0. Use `ValidationStatusValues`.\n */\nexport const VALIDATION_NAMED_STATUS = ValidationStatusValues;\n"],"names":[],"mappings":";;AASA,MAAM,sBAAA,GAAyB,CAAC,OAAA,EAAS,SAAA,EAAW,WAAW,MAAM,CAAA;AAK9D,MAAM,uBAAA,GAA0B;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n} from \"../utils\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"display4\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n * @deprecated Use `color` instead\n */\n variant?: \"primary\" | \"secondary\";\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant,\n color: colorProp,\n ...restProps\n }: TextProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as ?? \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n const color = variant ?? colorProp ?? \"primary\";\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs as string)]: styleAs,\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n {...restProps}\n ref={ref as PolymorphicRef<T>}\n style={textStyles}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAErC,MAAM,IAAA,GAAsBC,gBAAA,CAAW,SAASC,KAAAA,CAGrD;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,MAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AAExB,EAAA,MAAM,UAAA,GAAa,EAAE,iBAAA,EAAmB,OAAA,EAAS,GAAG,KAAA,EAAM;AAE1D,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AAEtC,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n} from \"../utils\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"display4\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n * @deprecated since 1.27.1. Use `color` instead.\n */\n variant?: \"primary\" | \"secondary\";\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant,\n color: colorProp,\n ...restProps\n }: TextProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as ?? \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n const color = variant ?? colorProp ?? \"primary\";\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs as string)]: styleAs,\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n {...restProps}\n ref={ref as PolymorphicRef<T>}\n style={textStyles}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAErC,MAAM,IAAA,GAAsBC,gBAAA,CAAW,SAASC,KAAAA,CAGrD;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,MAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AAExB,EAAA,MAAM,UAAA,GAAa,EAAE,iBAAA,EAAmB,OAAA,EAAS,GAAG,KAAA,EAAM;AAE1D,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AAEtC,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Accent.js","sources":["../src/theme/Accent.ts"],"sourcesContent":["export const AccentValues = [\"blue\", \"teal\"] as const;\n/** @deprecated use `AccentValues` */\nexport const UNSTABLE_AccentValues = AccentValues;\n\nexport type Accent = (typeof AccentValues)[number];\n/** @deprecated use `Accent` */\nexport type UNSTABLE_Accent = Accent;\n"],"names":[],"mappings":";;AAAO,MAAM,YAAA,GAAe,CAAC,MAAA,EAAQ,MAAM;AAEpC,MAAM,qBAAA,GAAwB;;;;;"}
1
+ {"version":3,"file":"Accent.js","sources":["../src/theme/Accent.ts"],"sourcesContent":["export const AccentValues = [\"blue\", \"teal\"] as const;\n/** @deprecated since 1.32.0. Use `AccentValues`. */\nexport const UNSTABLE_AccentValues = AccentValues;\n\nexport type Accent = (typeof AccentValues)[number];\n/** @deprecated since 1.32.0. Use `Accent`. */\nexport type UNSTABLE_Accent = Accent;\n"],"names":[],"mappings":";;AAAO,MAAM,YAAA,GAAe,CAAC,MAAA,EAAQ,MAAM;AAEpC,MAAM,qBAAA,GAAwB;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"ActionFont.js","sources":["../src/theme/ActionFont.ts"],"sourcesContent":["export const ActionFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated use `ActionFontValues` */\nexport const UNSTABLE_ActionFontValues = ActionFontValues;\n\nexport type ActionFont = (typeof ActionFontValues)[number];\n/** @deprecated use `ActionFont` */\nexport type UNSTABLE_ActionFont = ActionFont;\n"],"names":[],"mappings":";;AAAO,MAAM,gBAAA,GAAmB,CAAC,WAAA,EAAa,WAAW;AAElD,MAAM,yBAAA,GAA4B;;;;;"}
1
+ {"version":3,"file":"ActionFont.js","sources":["../src/theme/ActionFont.ts"],"sourcesContent":["export const ActionFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated since 1.32.0. Use `ActionFontValues`. */\nexport const UNSTABLE_ActionFontValues = ActionFontValues;\n\nexport type ActionFont = (typeof ActionFontValues)[number];\n/** @deprecated since 1.32.0. Use `ActionFont`. */\nexport type UNSTABLE_ActionFont = ActionFont;\n"],"names":[],"mappings":";;AAAO,MAAM,gBAAA,GAAmB,CAAC,WAAA,EAAa,WAAW;AAElD,MAAM,yBAAA,GAA4B;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Corner.js","sources":["../src/theme/Corner.ts"],"sourcesContent":["export const CornerValues = [\"sharp\", \"rounded\"] as const;\n/** @deprecated use `CornerValues` */\nexport const UNSTABLE_CornerValues = CornerValues;\n\nexport type Corner = (typeof CornerValues)[number];\n/** @deprecated Use `Corner` */\nexport type UNSTABLE_Corner = Corner;\n"],"names":[],"mappings":";;AAAO,MAAM,YAAA,GAAe,CAAC,OAAA,EAAS,SAAS;AAExC,MAAM,qBAAA,GAAwB;;;;;"}
1
+ {"version":3,"file":"Corner.js","sources":["../src/theme/Corner.ts"],"sourcesContent":["export const CornerValues = [\"sharp\", \"rounded\"] as const;\n/** @deprecated since 1.32.0. Use `CornerValues`. */\nexport const UNSTABLE_CornerValues = CornerValues;\n\nexport type Corner = (typeof CornerValues)[number];\n/** @deprecated since 1.32.0. Use `Corner`. */\nexport type UNSTABLE_Corner = Corner;\n"],"names":[],"mappings":";;AAAO,MAAM,YAAA,GAAe,CAAC,OAAA,EAAS,SAAS;AAExC,MAAM,qBAAA,GAAwB;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"HeadingFont.js","sources":["../src/theme/HeadingFont.ts"],"sourcesContent":["export const HeadingFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated use `HeadingFontValues` */\nexport const UNSTABLE_HeadingFontValues = HeadingFontValues;\n\nexport type HeadingFont = (typeof HeadingFontValues)[number];\n/** @deprecated Use `HeadingFont` */\nexport type UNSTABLE_HeadingFont = HeadingFont;\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAA,GAAoB,CAAC,WAAA,EAAa,WAAW;AAEnD,MAAM,0BAAA,GAA6B;;;;;"}
1
+ {"version":3,"file":"HeadingFont.js","sources":["../src/theme/HeadingFont.ts"],"sourcesContent":["export const HeadingFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated since 1.32.0. Use `HeadingFontValues`. */\nexport const UNSTABLE_HeadingFontValues = HeadingFontValues;\n\nexport type HeadingFont = (typeof HeadingFontValues)[number];\n/** @deprecated since 1.32.0. Use `HeadingFont`. */\nexport type UNSTABLE_HeadingFont = HeadingFont;\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAA,GAAoB,CAAC,WAAA,EAAa,WAAW;AAEnD,MAAM,0BAAA,GAA6B;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import {\n useClassNameInjection,\n useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { Spinner } from \"../spinner\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport interface ButtonVariants {\n primary: string;\n secondary: string;\n cta: string;\n}\nexport type ButtonVariant = keyof ButtonVariants;\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\n\nexport interface ButtonAppearances {\n solid: string;\n bordered: string;\n transparent: string;\n}\nexport type ButtonAppearance = keyof ButtonAppearances;\nexport const ButtonAppearanceValues = [\n \"solid\",\n \"bordered\",\n \"transparent\",\n] as const;\n\nexport interface ButtonSentiments {\n accented: string;\n neutral: string;\n positive: string;\n negative: string;\n caution: string;\n}\nexport type ButtonSentiment = keyof ButtonSentiments;\nexport const ButtonSentimentValues = [\n \"accented\",\n \"neutral\",\n \"positive\",\n \"negative\",\n \"caution\",\n] as const;\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n *\n * @deprecated Use `appearance` and `sentiment` instead.\n *\n * | variant | appearance | sentiment |\n * | ----------- | ------------- | ----------- |\n * | `cta` | `solid` | `accented` |\n * | `primary` | `solid` | `neutral` |\n * | `secondary` | `transparent` | `neutral` |\n */\n variant?: ButtonVariant;\n /**\n * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n * 'solid' is the default value.\n *\n * @since 1.36.0.\n */\n appearance?: ButtonAppearance;\n /**\n * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n * 'neutral' is the default value.\n *\n * @since 1.36.0.\n */\n sentiment?: ButtonSentiment;\n\n /**\n * If `true`, the button will be in a loading state. This allows a spinner to be nested inside the button.\n *\n * @since 1.38.0.\n */\n loading?: boolean;\n\n /**\n * Text to be announced by screen readers, intended to be used in conjunction with the `loading` prop.\n *\n * @since 1.38.0.\n */\n loadingAnnouncement?: string;\n}\n\nfunction variantToAppearanceAndColor(\n variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n switch (variant) {\n case \"primary\":\n return { appearance: \"solid\", sentiment: \"neutral\" };\n case \"secondary\":\n return { appearance: \"transparent\", sentiment: \"neutral\" };\n case \"cta\":\n return { appearance: \"solid\", sentiment: \"accented\" };\n }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(props, ref) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltButton\",\n props,\n );\n\n const {\n children,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n loading,\n loadingAnnouncement,\n appearance: appearanceProp,\n sentiment: sentimentProp,\n type: typeProp = \"button\",\n variant = \"primary\",\n ...restProps\n } = finalProps;\n\n const { active, buttonProps } = useButton({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n const mapped = variantToAppearanceAndColor(variant);\n const appearance: ButtonAppearance =\n appearanceProp ?? mapped?.appearance ?? \"solid\";\n\n const sentiment: ButtonSentiment =\n sentimentProp ?? mapped?.sentiment ?? \"neutral\";\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n /* When the button is in a loading state, we want to prevent form submission. */\n const type = typeProp === \"submit\" && loading ? \"button\" : typeProp;\n\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"loading\")]: loading,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n [withBaseName(appearance)]: appearance,\n [withBaseName(sentiment)]: sentiment,\n },\n className,\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {loading && (\n <div className={withBaseName(\"spinner\")} aria-hidden>\n <Spinner size=\"small\" aria-hidden disableAnnouncer />\n </div>\n )}\n {typeof loadingAnnouncement === \"string\" && (\n <span role=\"status\" className={withBaseName(\"sr-only\")}>\n {loadingAnnouncement}\n </span>\n )}\n {children}\n </button>\n );\n },\n);\n"],"names":["Button","buttonCss"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import {\n useClassNameInjection,\n useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { Spinner } from \"../spinner\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport interface ButtonVariants {\n primary: string;\n secondary: string;\n cta: string;\n}\nexport type ButtonVariant = keyof ButtonVariants;\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\n\nexport interface ButtonAppearances {\n solid: string;\n bordered: string;\n transparent: string;\n}\nexport type ButtonAppearance = keyof ButtonAppearances;\nexport const ButtonAppearanceValues = [\n \"solid\",\n \"bordered\",\n \"transparent\",\n] as const;\n\nexport interface ButtonSentiments {\n accented: string;\n neutral: string;\n positive: string;\n negative: string;\n caution: string;\n}\nexport type ButtonSentiment = keyof ButtonSentiments;\nexport const ButtonSentimentValues = [\n \"accented\",\n \"neutral\",\n \"positive\",\n \"negative\",\n \"caution\",\n] as const;\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n *\n * @deprecated since 1.36.0. Use `appearance` and `sentiment` instead.\n *\n * | variant | appearance | sentiment |\n * | ----------- | ------------- | ----------- |\n * | `cta` | `solid` | `accented` |\n * | `primary` | `solid` | `neutral` |\n * | `secondary` | `transparent` | `neutral` |\n */\n variant?: ButtonVariant;\n /**\n * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n * 'solid' is the default value.\n *\n * @since 1.36.0.\n */\n appearance?: ButtonAppearance;\n /**\n * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n * 'neutral' is the default value.\n *\n * @since 1.36.0.\n */\n sentiment?: ButtonSentiment;\n\n /**\n * If `true`, the button will be in a loading state. This allows a spinner to be nested inside the button.\n *\n * @since 1.38.0.\n */\n loading?: boolean;\n\n /**\n * Text to be announced by screen readers, intended to be used in conjunction with the `loading` prop.\n *\n * @since 1.38.0.\n */\n loadingAnnouncement?: string;\n}\n\nfunction variantToAppearanceAndColor(\n variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n switch (variant) {\n case \"primary\":\n return { appearance: \"solid\", sentiment: \"neutral\" };\n case \"secondary\":\n return { appearance: \"transparent\", sentiment: \"neutral\" };\n case \"cta\":\n return { appearance: \"solid\", sentiment: \"accented\" };\n }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(props, ref) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltButton\",\n props,\n );\n\n const {\n children,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n loading,\n loadingAnnouncement,\n appearance: appearanceProp,\n sentiment: sentimentProp,\n type: typeProp = \"button\",\n variant = \"primary\",\n ...restProps\n } = finalProps;\n\n const { active, buttonProps } = useButton({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n const mapped = variantToAppearanceAndColor(variant);\n const appearance: ButtonAppearance =\n appearanceProp ?? mapped?.appearance ?? \"solid\";\n\n const sentiment: ButtonSentiment =\n sentimentProp ?? mapped?.sentiment ?? \"neutral\";\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n /* When the button is in a loading state, we want to prevent form submission. */\n const type = typeProp === \"submit\" && loading ? \"button\" : typeProp;\n\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"loading\")]: loading,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n [withBaseName(appearance)]: appearance,\n [withBaseName(sentiment)]: sentiment,\n },\n className,\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {loading && (\n <div className={withBaseName(\"spinner\")} aria-hidden>\n <Spinner size=\"small\" aria-hidden disableAnnouncer />\n </div>\n )}\n {typeof loadingAnnouncement === \"string\" && (\n <span role=\"status\" className={withBaseName(\"sr-only\")}>\n {loadingAnnouncement}\n </span>\n )}\n {children}\n </button>\n );\n },\n);\n"],"names":["Button","buttonCss"],"mappings":"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"}
@@ -29,7 +29,7 @@ const Checkbox = forwardRef(
29
29
  inputProps = {},
30
30
  inputRef: inputRefProp,
31
31
  label,
32
- name,
32
+ name: nameProp,
33
33
  onBlur,
34
34
  onChange,
35
35
  onFocus,
@@ -45,6 +45,7 @@ const Checkbox = forwardRef(
45
45
  window: targetWindow
46
46
  });
47
47
  const checkboxGroup = useCheckboxGroup();
48
+ const name = nameProp ?? (checkboxGroup == null ? void 0 : checkboxGroup.name);
48
49
  const {
49
50
  "aria-describedby": inputDescribedBy,
50
51
  "aria-labelledby": inputLabelledBy,
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Used to access the hidden `<input>` element.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n inputRef: inputRefProp,\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkedProp ??\n (checkboxGroup?.checkedValues && value\n ? checkboxGroup.checkedValues.includes(value)\n : checkedProp);\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly =\n checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? (checkboxGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp)\n : undefined;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n checkboxGroup?.onChange?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current != null) {\n inputRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={\n clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy,\n ) || undefined\n }\n aria-labelledby={\n clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy,\n ) || undefined\n }\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n ref={handleInputRef}\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n },\n);\n"],"names":["Checkbox","checkboxCss","value"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Used to access the hidden `<input>` element.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n inputRef: inputRefProp,\n label,\n name: nameProp,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n const name = nameProp ?? checkboxGroup?.name;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkedProp ??\n (checkboxGroup?.checkedValues && value\n ? checkboxGroup.checkedValues.includes(value)\n : checkedProp);\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly =\n checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? (checkboxGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp)\n : undefined;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n checkboxGroup?.onChange?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current != null) {\n inputRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={\n clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy,\n ) || undefined\n }\n aria-labelledby={\n clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy,\n ) || undefined\n }\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n ref={handleInputRef}\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n },\n);\n"],"names":["Checkbox","checkboxCss","value"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAqEzC,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,SAASA,SAAAA,CACP;AAAA,IACE,OAAA,EAAS,WAAA;AAAA,IACT,SAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA,EAAU,YAAA;AAAA,IACV,KAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAa,EAAC;AAAA,IACd,QAAA,EAAU,YAAA;AAAA,IACV,KAAA;AAAA,IACA,IAAA,EAAM,QAAA;AAAA,IACN,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,gBAAA,EAAkB,oBAAA;AAAA,IAClB,QAAA,EAAU,YAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,eAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,gBAAgB,gBAAA,EAAiB;AACvC,IAAA,MAAM,IAAA,GAAO,aAAY,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,IAAA,CAAA;AAExC,IAAA,MAAM;AAAA,MACJ,kBAAA,EAAoB,gBAAA;AAAA,MACpB,iBAAA,EAAmB,eAAA;AAAA,MACnB,SAAA,EAAW,cAAA;AAAA,MACX,QAAA,EAAU,aAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,UAAA;AAEJ,IAAA,MAAM,oBAAA,GACJ,iBACC,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,aAAA,KAAiB,QAC7B,aAAA,CAAc,aAAA,CAAc,QAAA,CAAS,KAAK,CAAA,GAC1C,WAAA,CAAA;AAEN,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAA,CAAc;AAAA,MAC1C,UAAA,EAAY,oBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,MAC/B,IAAA,EAAM,UAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,SAAA,EAAW,kBAAA;AAAA,MACX,QAAA,EAAU,iBAAA;AAAA,MACV,QAAA,EAAU,iBAAA;AAAA,MACV,gBAAA,EAAkB;AAAA,QAChB,iBAAA,EAAkB;AAEtB,IAAA,MAAM,QAAA,GAAA,CACJ,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,KAAY,iBAAA,IAAqB,YAAA;AAClD,IAAA,MAAM,QAAA,GAAA,CACJ,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,KAAY,iBAAA,IAAqB,YAAA;AAClD,IAAA,MAAM,mBAAmB,CAAC,QAAA,GAAA,CACrB,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,gBAAA,KAChB,6BACA,oBAAA,GACA,MAAA;AAEJ,IAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,IAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,YAAA,EAAc,QAAQ,CAAA;AAExD,IAAA,MAAM,YAAA,GAAqD,CAAC,KAAA,KAAU;AAvK1E,MAAA,IAAA,EAAA;AAyKM,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,gBAAA,IAAoB,QAAA,EAAU;AAClD,QAAA;AAAA,MACF;AAEA,MAAA,MAAMC,MAAAA,GAAQ,MAAM,MAAA,CAAO,OAAA;AAC3B,MAAA,UAAA,CAAWA,MAAK,CAAA;AAChB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AACX,MAAA,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAgB,KAAA,CAAA;AAChB,MAAA,CAAA,EAAA,GAAA,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,aAAf,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,aAAA,EAA0B,KAAA,CAAA;AAAA,IAC5B,CAAA;AAEA,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,QAAA,CAAS,WAAW,IAAA,EAAM;AAC5B,QAAA,QAAA,CAAS,OAAA,CAAQ,gBAAgB,aAAA,IAAiB,KAAA;AAAA,MACpD;AAAA,IACF,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,uBACE,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,YACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,iBAAe,QAAA,IAAY,MAAA;AAAA,cAC3B,kBAAA,EACE,IAAA;AAAA,gBACE,aAAA,KAAkB,MAAA,GACd,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,kBAAA,CAAA,GACrB,MAAA;AAAA,gBACJ;AAAA,eACF,IAAK,MAAA;AAAA,cAEP,iBAAA,EACE,IAAA;AAAA,gBACE,aAAA,KAAkB,MAAA,GACd,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,iBAAA,CAAA,GACrB,MAAA;AAAA,gBACJ;AAAA,eACF,IAAK,MAAA;AAAA,cAEP,IAAA;AAAA,cACA,KAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,GAAG,cAAc,CAAA;AAAA,cACrD,oBAAA,EAAoB,aAAA;AAAA,cACpB,cAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,MAAA;AAAA,cACA,QAAA,EAAU,YAAA;AAAA,cACV,OAAA;AAAA,cACA,IAAA,EAAK,UAAA;AAAA,cACL,GAAA,EAAK,cAAA;AAAA,cACJ,GAAG;AAAA;AAAA,WACN;AAAA,0BACA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,QAAA;AAAA,cACA,aAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA;AAAA,WACF;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n /**\n * @deprecated Use validationStatus instead\n */\n error?: boolean;\n indeterminate?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n checked = false,\n className,\n disabled,\n error,\n indeterminate,\n validationStatus,\n readOnly,\n}: CheckboxIconProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-icon\",\n css: checkboxIconCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"error\")]: error,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"indeterminate\")]: indeterminate,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className,\n )}\n >\n {checked && !indeterminate && !readOnly && (\n <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n )}\n {checked && !indeterminate && readOnly && (\n <CheckmarkIcon className={withBaseName(\"icon\")} />\n )}\n </div>\n );\n};\n"],"names":["checkboxIconCss"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,wBAC5B,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,wBAC3B,aAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}
1
+ {"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n /**\n * @deprecated since 1.8.0-rc.2. Use `validationStatus` instead.\n */\n error?: boolean;\n indeterminate?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n checked = false,\n className,\n disabled,\n error,\n indeterminate,\n validationStatus,\n readOnly,\n}: CheckboxIconProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-icon\",\n css: checkboxIconCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"error\")]: error,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"indeterminate\")]: indeterminate,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className,\n )}\n >\n {checked && !indeterminate && !readOnly && (\n <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n )}\n {checked && !indeterminate && readOnly && (\n <CheckmarkIcon className={withBaseName(\"icon\")} />\n )}\n </div>\n );\n};\n"],"names":["checkboxIconCss"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,wBAC5B,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,wBAC3B,aAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n type FloatingFocusManager,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentProps,\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n useCurrentBreakpoint,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n children?: ReactNode;\n condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The status of the Dialog\n * */\n status?: ValidationStatus;\n /**\n * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n * Default value is 0 (first tabbable element).\n * */\n initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n /**\n * Size of the Dialog\n * */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n /**\n * @deprecated IDs are now auto-generated internally for proper ARIA labeling.\n *\n * Optional id prop\n * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n * */\n idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n function Dialog(props, ref) {\n const {\n children,\n className,\n open = false,\n onOpenChange,\n status,\n disableDismiss,\n size = \"medium\",\n disableScrim,\n idProp,\n initialFocus,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const dialogId = useId(id);\n const currentBreakpoint = useCurrentBreakpoint();\n\n const [showComponent, setShowComponent] = useState(false);\n const [headerId, setHeaderId] = useState(idProp);\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { outsidePress: !disableDismiss }),\n ]);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n const contextValue = useMemo(\n () => ({ status, id: headerId, setId: setHeaderId, dialogId }),\n [status, headerId, dialogId],\n );\n\n return (\n <DialogContext.Provider value={contextValue}>\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n id={dialogId}\n open={showComponent}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n ref={floatingRef}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n lockScroll\n focusManagerProps={{\n context: context,\n initialFocus,\n outsideElementsInert: true,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(size, currentBreakpoint),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(status as string)]: status,\n },\n className,\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n </DialogContext.Provider>\n );\n },\n);\n"],"names":["Dialog","dialogCss"],"mappings":"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"}
1
+ {"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n type FloatingFocusManager,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentProps,\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n useCurrentBreakpoint,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n children?: ReactNode;\n condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The status of the Dialog\n * */\n status?: ValidationStatus;\n /**\n * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n * Default value is 0 (first tabbable element).\n * */\n initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n /**\n * Size of the Dialog\n * */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n /**\n * @deprecated since 1.58.0. IDs are now auto-generated internally for proper ARIA labeling.\n *\n * Optional id prop\n * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n * */\n idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n function Dialog(props, ref) {\n const {\n children,\n className,\n open = false,\n onOpenChange,\n status,\n disableDismiss,\n size = \"medium\",\n disableScrim,\n idProp,\n initialFocus,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const dialogId = useId(id);\n const currentBreakpoint = useCurrentBreakpoint();\n\n const [showComponent, setShowComponent] = useState(false);\n const [headerId, setHeaderId] = useState(idProp);\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { outsidePress: !disableDismiss }),\n ]);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n const contextValue = useMemo(\n () => ({ status, id: headerId, setId: setHeaderId, dialogId }),\n [status, headerId, dialogId],\n );\n\n return (\n <DialogContext.Provider value={contextValue}>\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n id={dialogId}\n open={showComponent}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n ref={floatingRef}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n lockScroll\n focusManagerProps={{\n context: context,\n initialFocus,\n outsideElementsInert: true,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(size, currentBreakpoint),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(status as string)]: status,\n },\n className,\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n </DialogContext.Provider>\n );\n },\n);\n"],"names":["Dialog","dialogCss"],"mappings":"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"}
@@ -76,7 +76,7 @@ const Dropdown = forwardRef(function Dropdown2(props, ref) {
76
76
  } = useFormFieldProps();
77
77
  const disabled = Boolean(disabledProp) || formFieldDisabled;
78
78
  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
79
- const validationStatus = validationStatusProp ?? formFieldValidationStatus;
79
+ const validationStatus = formFieldValidationStatus ?? validationStatusProp;
80
80
  const required = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : requiredProp;
81
81
  const listControl = useListControl({
82
82
  open,
@@ -112,8 +112,8 @@ const Dropdown = forwardRef(function Dropdown2(props, ref) {
112
112
  setListRef
113
113
  } = listControl;
114
114
  const selectedValue = selectedState.map((item) => valueToString(item)).join(", ");
115
- const isEmptyReadOnly = readOnly && selectedValue === "";
116
- const valueText = isEmptyReadOnly ? emptyReadOnlyMarker : value ?? selectedValue;
115
+ const displayedValue = value ?? selectedValue;
116
+ const valueText = readOnly && displayedValue === "" ? emptyReadOnlyMarker : displayedValue;
117
117
  const handleOpenChange = (newOpen, _event, reason) => {
118
118
  const focusNotBlur = reason === "focus" && newOpen;
119
119
  if (readOnly || focusNotBlur) return;