@salt-ds/core 1.54.0 → 1.54.1
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.
- package/CHANGELOG.md +13 -0
- package/css/salt-core.css +1 -1
- package/dist-cjs/collapsible/CollapsibleTrigger.js +3 -2
- package/dist-cjs/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +108 -87
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js +3 -2
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +2 -2
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/salt-provider/ProviderContext.js +11 -0
- package/dist-cjs/salt-provider/ProviderContext.js.map +1 -0
- package/dist-cjs/salt-provider/SaltProvider.js +24 -132
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/salt-provider/ThemeApplicator.js +115 -0
- package/dist-cjs/salt-provider/ThemeApplicator.js.map +1 -0
- package/dist-es/collapsible/CollapsibleTrigger.js +3 -2
- package/dist-es/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +108 -87
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js +3 -2
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +2 -2
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/salt-provider/ProviderContext.js +9 -0
- package/dist-es/salt-provider/ProviderContext.js.map +1 -0
- package/dist-es/salt-provider/SaltProvider.js +25 -133
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/salt-provider/ThemeApplicator.js +113 -0
- package/dist-es/salt-provider/ThemeApplicator.js.map +1 -0
- package/dist-types/salt-provider/ProviderContext.d.ts +5 -0
- package/dist-types/salt-provider/SaltProvider.d.ts +5 -56
- package/dist-types/salt-provider/ThemeApplicator.d.ts +56 -0
- package/package.json +2 -2
|
@@ -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 cloneElement,\n createContext,\n type HTMLAttributes,\n isValidElement,\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 { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport { ViewportProvider } from \"../viewport\";\nimport saltProviderCss from \"./SaltProvider.css\";\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\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (\n themeName: ThemeName,\n themeNext?: boolean,\n): ThemeName => {\n if (themeNext) {\n return themeName === DEFAULT_THEME_NAME\n ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)\n : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);\n }\n return themeName === DEFAULT_THEME_NAME\n ? themeName\n : clsx(DEFAULT_THEME_NAME, themeName);\n};\n\ninterface ThemeNextProps {\n themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner,\n headingFont,\n accent,\n actionFont,\n}: {\n children: ReactNode;\n themeName: ThemeName;\n density: Density;\n mode: Mode;\n applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n SaltProviderNextAdditionalProps) => {\n const themeNamesString = getThemeNames(themeName, themeNext);\n const themeNextProps = {\n \"data-corner\": corner,\n \"data-heading-font\": headingFont,\n \"data-accent\": accent,\n \"data-action-font\": actionFont,\n };\n if (applyClassesTo === \"root\") {\n return children;\n }\n if (applyClassesTo === \"child\") {\n if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return cloneElement(children, {\n className: clsx(\n children.props?.className,\n themeNamesString,\n `salt-density-${density}`,\n ),\n // @ts-expect-error\n \"data-mode\": mode,\n ...(themeNext ? themeNextProps : {}),\n });\n }\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`,\n );\n return children;\n }\n return (\n <div\n className={clsx(\n \"salt-provider\",\n themeNamesString,\n `salt-density-${density}`,\n )}\n data-mode={mode}\n {...(themeNext ? themeNextProps : {})}\n >\n {children}\n </div>\n );\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n /**\n * Either \"root\", \"scope\" or \"child\".\n * Specifies the location of salt theme class and attributes should be applied to.\n *\n * Defaults to \"root\" for a root provider, otherwise \"scope\".\n */\n applyClassesTo?: TargetElement;\n /**\n * Either \"high\", \"medium\", \"low\" or \"touch\".\n * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n *\n * @default \"medium\"\n */\n density?: Density;\n /**\n * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n */\n theme?: ThemeName;\n /**\n * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n *\n * @default \"light\"\n */\n mode?: Mode;\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 & ThemeNextProps & SaltProviderNextProps,\n \"enableStyleInjection\"\n>) {\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n window: inheritedWindow,\n corner: inheritedCorner,\n headingFont: inheritedHeadingFont,\n accent: inheritedAccent,\n actionFont: inheritedActionFont,\n } = useContext(ThemeContext);\n\n const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\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 applyClassesTo =\n applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\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 themedChildren = createThemedChildren({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner: corner,\n headingFont,\n accent,\n actionFont,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNamesString = getThemeNames(themeName, themeNext);\n const themeNames = themeNamesString.split(\" \");\n\n if (applyClassesTo === \"root\" && targetWindow) {\n if (inheritedWindow !== targetWindow) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`,\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n if (themeNext) {\n targetWindow.document.documentElement.dataset.corner = corner;\n targetWindow.document.documentElement.dataset.headingFont =\n headingFont;\n targetWindow.document.documentElement.dataset.accent = accent;\n targetWindow.document.documentElement.dataset.actionFont = actionFont;\n }\n } else {\n console.warn(\n \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\",\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`,\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n if (themeNext) {\n delete targetWindow.document.documentElement.dataset.corner;\n delete targetWindow.document.documentElement.dataset.headingFont;\n delete targetWindow.document.documentElement.dataset.accent;\n delete targetWindow.document.documentElement.dataset.actionFont;\n }\n }\n };\n }, [\n applyClassesTo,\n density,\n mode,\n themeName,\n targetWindow,\n inheritedWindow,\n themeNext,\n corner,\n headingFont,\n accent,\n actionFont,\n ]);\n\n const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </BreakpointProvider>\n </ThemeContext.Provider>\n </DensityContext.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\ninterface SaltProviderNextAdditionalProps {\n /**\n * Either \"sharp\" or \"rounded\".\n * Determines selected components corner radius.\n * @default \"sharp\"\n */\n corner?: Corner;\n /**\n * Either \"Open Sans\" or \"Amplitude\".\n * Determines font family of display and heading text.\n * @default \"Open Sans\"\n */\n headingFont?: HeadingFont;\n /**\n * Either \"blue\" or \"teal\".\n * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n * @default \"blue\"\n */\n accent?: Accent;\n /**\n * Either \"Open Sans\" or \"Amplitude\".\n * Determines font family of action components, mostly Buttons.\n * @default \"Open Sans\"\n */\n actionFont?: ActionFont;\n}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n SaltProviderNextAdditionalProps;\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\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/** @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":["saltProviderCss"],"mappings":";;;;;;;;;;;;;AAoCO,MAAM,eAAA,GAAkB;AAE/B,MAAM,kBAAA,GAAqB,YAAA;AAC3B,MAAM,uBAAA,GAA0B,iBAAA;AAEhC,MAAM,YAAA,GAAe,OAAA;AACrB,MAAM,cAAA,GAAyB,OAAA;AAC/B,MAAM,oBAAA,GAAoC,WAAA;AAC1C,MAAM,cAAA,GAAyB,MAAA;AAC/B,MAAM,mBAAA,GAAkC,WAAA;AAqBjC,MAAM,cAAA,GAAiB,cAAuB,eAAe;AAE7D,MAAM,eAAe,aAAA,CAAiC;AAAA,EAC3D,KAAA,EAAO,EAAA;AAAA,EACP,IAAA,EAAM,YAAA;AAAA,EACN,SAAA,EAAW,KAAA;AAAA,EACX,MAAA,EAAQ,cAAA;AAAA,EACR,eAAA,EAAiB,cAAA;AAAA,EACjB,WAAA,EAAa,oBAAA;AAAA,EACb,oBAAA,EAAsB,oBAAA;AAAA,EACtB,MAAA,EAAQ,cAAA;AAAA,EACR,eAAA,EAAiB,cAAA;AAAA,EACjB,UAAA,EAAY,mBAAA;AAAA,EACZ,mBAAA,EAAqB;AACvB,CAAC;AAEM,MAAM,iBAAA,GACX,cAA2B,mBAAmB;AAKhD,MAAM,aAAA,GAAgB,CACpB,SAAA,EACA,SAAA,KACc;AACd,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAO,SAAA,KAAc,qBACjB,IAAA,CAAK,kBAAA,EAAoB,uBAAuB,CAAA,GAChD,IAAA,CAAK,kBAAA,EAAoB,uBAAA,EAAyB,SAAS,CAAA;AAAA,EACjE;AACA,EAAA,OAAO,SAAA,KAAc,kBAAA,GACjB,SAAA,GACA,IAAA,CAAK,oBAAoB,SAAS,CAAA;AACxC,CAAA;AAMA,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAOsC;AA5HtC,EAAA,IAAA,EAAA;AA6HE,EAAA,MAAM,gBAAA,GAAmB,aAAA,CAAc,SAAA,EAAW,SAAS,CAAA;AAC3D,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,aAAA,EAAe,MAAA;AAAA,IACf,mBAAA,EAAqB,WAAA;AAAA,IACrB,aAAA,EAAe,MAAA;AAAA,IACf,kBAAA,EAAoB;AAAA,GACtB;AACA,EAAA,IAAI,mBAAmB,MAAA,EAAQ;AAC7B,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,IAAI,mBAAmB,OAAA,EAAS;AAC9B,IAAA,IAAI,cAAA,CAA4C,QAAQ,CAAA,EAAG;AACzD,MAAA,OAAO,aAAa,QAAA,EAAU;AAAA,QAC5B,SAAA,EAAW,IAAA;AAAA,UAAA,CACT,EAAA,GAAA,QAAA,CAAS,UAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAgB,SAAA;AAAA,UAChB,gBAAA;AAAA,UACA,gBAAgB,OAAO,CAAA;AAAA,SACzB;AAAA;AAAA,QAEA,WAAA,EAAa,IAAA;AAAA,QACb,GAAI,SAAA,GAAY,cAAA,GAAiB;AAAC,OACnC,CAAA;AAAA,IACH;AACA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA;AAAA;AAAA,iDAAA;AAAA,KAGF;AACA,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,gBAAgB,OAAO,CAAA;AAAA,OACzB;AAAA,MACA,WAAA,EAAW,IAAA;AAAA,MACV,GAAI,SAAA,GAAY,cAAA,GAAiB,EAAC;AAAA,MAElC;AAAA;AAAA,GACH;AAEJ,CAAA;AAiEA,SAAS,oBAAA,CAAqB;AAAA,EAC5B,cAAA,EAAgB,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,OAAA,EAAS,WAAA;AAAA,EACT,KAAA,EAAO,SAAA;AAAA,EACP,IAAA,EAAM,QAAA;AAAA,EACN,WAAA,EAAa,eAAA;AAAA,EACb,SAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,WAAA,EAAa,eAAA;AAAA,EACb,MAAA,EAAQ,UAAA;AAAA,EACR,UAAA,EAAY;AACd,CAAA,EAGG;AACD,EAAA,MAAM,gBAAA,GAAmB,WAAW,cAAc,CAAA;AAClD,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,cAAA;AAAA,IACP,IAAA,EAAM,aAAA;AAAA,IACN,MAAA,EAAQ,eAAA;AAAA,IACR,MAAA,EAAQ,eAAA;AAAA,IACR,WAAA,EAAa,oBAAA;AAAA,IACb,MAAA,EAAQ,eAAA;AAAA,IACR,UAAA,EAAY;AAAA,GACd,GAAI,WAAW,YAAY,CAAA;AAE3B,EAAA,MAAM,cAAA,GAAiB,cAAA,KAAmB,MAAA,IAAa,cAAA,KAAmB,EAAA;AAC1E,EAAA,MAAM,OAAA,GAAU,eAAe,gBAAA,IAAoB,eAAA;AACnD,EAAA,MAAM,SAAA,GACJ,SAAA,KAAc,cAAA,KAAmB,EAAA,GAAK,kBAAA,GAAqB,cAAA,CAAA;AAC7D,EAAA,MAAM,OAAO,QAAA,IAAY,aAAA;AACzB,EAAA,MAAM,cAAc,eAAA,IAAmB,mBAAA;AACvC,EAAA,MAAM,MAAA,GAAS,cAAc,eAAA,IAAmB,cAAA;AAChD,EAAA,MAAM,WAAA,GACJ,mBAAmB,oBAAA,IAAwB,oBAAA;AAC7C,EAAA,MAAM,MAAA,GAAS,cAAc,eAAA,IAAmB,cAAA;AAChD,EAAA,MAAM,UAAA,GACJ,kBAAkB,mBAAA,IAAuB,mBAAA;AAE3C,EAAA,MAAM,cAAA,GACJ,kBAAA,KAAuB,cAAA,GAAiB,MAAA,GAAS,OAAA,CAAA;AAEnD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,iBAAA,GAAoB,OAAA;AAAA,IACxB,OAAO;AAAA,MACL,KAAA,EAAO,SAAA;AAAA,MACP,IAAA;AAAA,MACA,MAAA,EAAQ,YAAA;AAAA,MACR,SAAA,EAAW,QAAQ,SAAS,CAAA;AAAA,MAC5B,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA;AAAA,MAEA,eAAA,EAAiB,MAAA;AAAA,MACjB,oBAAA,EAAsB,WAAA;AAAA,MACtB,eAAA,EAAiB,MAAA;AAAA,MACjB,mBAAA,EAAqB;AAAA,KACvB,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,iBAAiB,oBAAA,CAAqB;AAAA,IAC1C,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,gBAAA,GAAmB,aAAA,CAAc,SAAA,EAAW,SAAS,CAAA;AAC3D,IAAA,MAAM,UAAA,GAAa,gBAAA,CAAiB,KAAA,CAAM,GAAG,CAAA;AAE7C,IAAA,IAAI,cAAA,KAAmB,UAAU,YAAA,EAAc;AAC7C,MAAA,IAAI,oBAAoB,YAAA,EAAc;AAEpC,QAAA,YAAA,CAAa,QAAA,CAAS,gBAAgB,SAAA,CAAU,GAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAA,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,IAAA,GAAO,IAAA;AACrD,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,MAAA,GAAS,MAAA;AACvD,UAAA,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,WAAA,GAC5C,WAAA;AACF,UAAA,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,MAAA,GAAS,MAAA;AACvD,UAAA,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,UAAA,GAAa,UAAA;AAAA,QAC7D;AAAA,MACF,CAAA,MAAO;AACL,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,cAAA,KAAmB,UAAU,YAAA,EAAc;AAE7C,QAAA,YAAA,CAAa,QAAA,CAAS,gBAAgB,SAAA,CAAU,MAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAA,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,IAAA,GAAO,MAAA;AACrD,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,OAAO,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,MAAA;AACrD,UAAA,OAAO,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,WAAA;AACrD,UAAA,OAAO,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,MAAA;AACrD,UAAA,OAAO,YAAA,CAAa,QAAA,CAAS,eAAA,CAAgB,OAAA,CAAQ,UAAA;AAAA,QACvD;AAAA,MACF;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG;AAAA,IACD,cAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqB,sBAAsB,WAAW,CAAA;AAE5D,EAAA,MAAM,YAAA,mBACJ,GAAA,CAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,KAAA,EAAO,OAAA,EAC9B,QAAA,kBAAA,GAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,iBAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,kBAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,WAAA,EACjC,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAA,cAAA,EAAe,CAAA,EACpC,CAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAGF,EAAA,IAAI,cAAA,EAAgB;AAClB,IAAA,uBAAO,GAAA,CAAC,yBAAuB,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,EAC9C;AACA,EAAA,OAAO,YAAA;AACT;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,oBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA,CAAC,0BAAuB,KAAA,EAAO,oBAAA,EAC7B,8BAAC,oBAAA,EAAA,EAAsB,GAAG,WAAW,CAAA,EACvC,CAAA;AAEJ;AAkCO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,oBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA,CAAC,sBAAA,EAAA,EAAuB,KAAA,EAAO,oBAAA,EAE7B,QAAA,kBAAA,GAAA,CAAC,wBAAsB,GAAG,SAAA,EAAW,SAAA,EAAW,IAAA,EAAM,CAAA,EACxD,CAAA;AAEJ;AAEO,MAAM,yBAAA,GAA4B;AAElC,MAAM,WAAW,MAAyB;AAC/C,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAA,EAAS,GAAG,oBAAA,EAAqB,GAAI,WAAW,YAAY,CAAA;AAE5E,EAAA,OAAO,oBAAA;AACT;AAKO,SAAS,WAAW,OAAA,EAA4B;AACrD,EAAA,MAAM,kBAAA,GAAqB,WAAW,cAAc,CAAA;AACpD,EAAA,OAAO,WAAW,kBAAA,IAAsB,eAAA;AAC1C;AAEO,MAAM,iBAAiB,MAAmB;AAC/C,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACrC;;;;"}
|
|
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 themeProp,\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":["saltProviderCss"],"mappings":"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"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useWindow } from '@salt-ds/window';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { isValidElement, cloneElement } from 'react';
|
|
5
|
+
import { useId } from '../utils/useId.js';
|
|
6
|
+
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
|
|
7
|
+
|
|
8
|
+
const providerSymbol = Symbol.for("salt-provider");
|
|
9
|
+
function ThemeApplicator({
|
|
10
|
+
applyClassesTo,
|
|
11
|
+
children,
|
|
12
|
+
density,
|
|
13
|
+
mode,
|
|
14
|
+
theme,
|
|
15
|
+
corner,
|
|
16
|
+
headingFont,
|
|
17
|
+
accent,
|
|
18
|
+
actionFont
|
|
19
|
+
}) {
|
|
20
|
+
var _a;
|
|
21
|
+
const targetWindow = useWindow();
|
|
22
|
+
const providerId = useId();
|
|
23
|
+
useIsomorphicLayoutEffect(() => {
|
|
24
|
+
if (applyClassesTo !== "root" || !targetWindow || !providerId) return;
|
|
25
|
+
const targetDocument = targetWindow.document;
|
|
26
|
+
if (!targetDocument[providerSymbol]) {
|
|
27
|
+
targetDocument[providerSymbol] = providerId;
|
|
28
|
+
}
|
|
29
|
+
if (providerId !== targetDocument[providerSymbol]) {
|
|
30
|
+
console.warn(
|
|
31
|
+
"Multiple providers targeting the same window. There can be only one level root level SaltProvider per window."
|
|
32
|
+
);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const themeNames = theme.split(" ");
|
|
36
|
+
targetDocument.documentElement.classList.add(
|
|
37
|
+
...themeNames,
|
|
38
|
+
`salt-density-${density}`
|
|
39
|
+
);
|
|
40
|
+
targetDocument.documentElement.dataset.mode = mode;
|
|
41
|
+
if (corner) targetDocument.documentElement.dataset.corner = corner;
|
|
42
|
+
if (headingFont)
|
|
43
|
+
targetDocument.documentElement.dataset.headingFont = headingFont;
|
|
44
|
+
if (accent) targetDocument.documentElement.dataset.accent = accent;
|
|
45
|
+
if (actionFont)
|
|
46
|
+
targetDocument.documentElement.dataset.actionFont = actionFont;
|
|
47
|
+
return () => {
|
|
48
|
+
delete targetDocument[providerSymbol];
|
|
49
|
+
targetDocument.documentElement.classList.remove(
|
|
50
|
+
...themeNames,
|
|
51
|
+
`salt-density-${density}`
|
|
52
|
+
);
|
|
53
|
+
targetDocument.documentElement.dataset.mode = void 0;
|
|
54
|
+
delete targetDocument.documentElement.dataset.corner;
|
|
55
|
+
delete targetDocument.documentElement.dataset.headingFont;
|
|
56
|
+
delete targetDocument.documentElement.dataset.accent;
|
|
57
|
+
delete targetDocument.documentElement.dataset.actionFont;
|
|
58
|
+
};
|
|
59
|
+
}, [
|
|
60
|
+
providerId,
|
|
61
|
+
applyClassesTo,
|
|
62
|
+
density,
|
|
63
|
+
mode,
|
|
64
|
+
theme,
|
|
65
|
+
targetWindow,
|
|
66
|
+
corner,
|
|
67
|
+
headingFont,
|
|
68
|
+
accent,
|
|
69
|
+
actionFont
|
|
70
|
+
]);
|
|
71
|
+
const themeNextProps = {
|
|
72
|
+
"data-corner": corner,
|
|
73
|
+
"data-heading-font": headingFont,
|
|
74
|
+
"data-accent": accent,
|
|
75
|
+
"data-action-font": actionFont
|
|
76
|
+
};
|
|
77
|
+
if (applyClassesTo === "child") {
|
|
78
|
+
if (isValidElement(children)) {
|
|
79
|
+
return cloneElement(children, {
|
|
80
|
+
className: clsx(
|
|
81
|
+
(_a = children.props) == null ? void 0 : _a.className,
|
|
82
|
+
theme,
|
|
83
|
+
`salt-density-${density}`
|
|
84
|
+
),
|
|
85
|
+
// @ts-expect-error
|
|
86
|
+
"data-mode": mode,
|
|
87
|
+
...themeNextProps
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
console.warn(
|
|
91
|
+
`
|
|
92
|
+
SaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.
|
|
93
|
+
Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a
|
|
94
|
+
div element will wrap your child elements`
|
|
95
|
+
);
|
|
96
|
+
return children;
|
|
97
|
+
}
|
|
98
|
+
if (applyClassesTo === "scope") {
|
|
99
|
+
return /* @__PURE__ */ jsx(
|
|
100
|
+
"div",
|
|
101
|
+
{
|
|
102
|
+
className: clsx("salt-provider", theme, `salt-density-${density}`),
|
|
103
|
+
"data-mode": mode,
|
|
104
|
+
...themeNextProps,
|
|
105
|
+
children
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
return children;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export { ThemeApplicator };
|
|
113
|
+
//# sourceMappingURL=ThemeApplicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeApplicator.js","sources":["../src/salt-provider/ThemeApplicator.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n type ReactNode,\n} from \"react\";\nimport type {\n Accent,\n ActionFont,\n Corner,\n Density,\n HeadingFont,\n Mode,\n ThemeName,\n} from \"../theme/index\";\nimport { useId } from \"../utils/useId\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nexport interface ThemeApplicatorProps {\n /**\n * Either \"root\", \"scope\" or \"child\".\n * Specifies the location of salt theme class and attributes should be applied to.\n *\n * Defaults to \"root\" for a root provider, otherwise \"scope\".\n */\n applyClassesTo: \"root\" | \"scope\" | \"child\";\n /**\n * Either \"high\", \"medium\", \"low\" or \"touch\".\n * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n *\n * @default \"medium\"\n */\n density: Density;\n /**\n * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n */\n theme: ThemeName;\n /**\n * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n *\n * @default \"light\"\n */\n mode: Mode;\n /**\n * Either \"sharp\" or \"rounded\".\n * Determines selected components corner radius.\n * @default \"sharp\"\n */\n corner?: Corner;\n /**\n * Either \"Open Sans\" or \"Amplitude\".\n * Determines font family of display and heading text.\n * @default \"Open Sans\"\n */\n headingFont?: HeadingFont;\n /**\n * Either \"blue\" or \"teal\".\n * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n * @default \"blue\"\n */\n accent?: Accent;\n /**\n * Either \"Open Sans\" or \"Amplitude\".\n * Determines font family of action components, mostly Buttons.\n * @default \"Open Sans\"\n */\n actionFont?: ActionFont;\n children?: ReactNode;\n}\n\nconst providerSymbol = Symbol.for(\"salt-provider\");\n\nexport function ThemeApplicator({\n applyClassesTo,\n children,\n density,\n mode,\n theme,\n corner,\n headingFont,\n accent,\n actionFont,\n}: ThemeApplicatorProps) {\n const targetWindow = useWindow();\n\n const providerId = useId();\n\n useIsomorphicLayoutEffect(() => {\n if (applyClassesTo !== \"root\" || !targetWindow || !providerId) return;\n\n const targetDocument: Document & { [providerSymbol]?: string } =\n targetWindow.document;\n\n // Claim the document if no other provider has already. The symbol is used so the lock isn't enumerable and guarantees it won't clash with anything else.\n if (!targetDocument[providerSymbol]) {\n targetDocument[providerSymbol] = providerId;\n }\n\n if (providerId !== targetDocument[providerSymbol]) {\n console.warn(\n \"Multiple providers targeting the same window. There can be only one level root level SaltProvider per window.\",\n );\n return;\n }\n\n const themeNames = theme.split(\" \");\n\n // add the styles we want to apply\n targetDocument.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`,\n );\n targetDocument.documentElement.dataset.mode = mode;\n\n // Theme Next\n if (corner) targetDocument.documentElement.dataset.corner = corner;\n if (headingFont)\n targetDocument.documentElement.dataset.headingFont = headingFont;\n if (accent) targetDocument.documentElement.dataset.accent = accent;\n if (actionFont)\n targetDocument.documentElement.dataset.actionFont = actionFont;\n\n return () => {\n // Delete lock\n delete targetDocument[providerSymbol];\n\n // When unmounting/remounting, remove the applied styles from the root\n targetDocument.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`,\n );\n targetDocument.documentElement.dataset.mode = undefined;\n\n // Theme Next\n delete targetDocument.documentElement.dataset.corner;\n delete targetDocument.documentElement.dataset.headingFont;\n delete targetDocument.documentElement.dataset.accent;\n delete targetDocument.documentElement.dataset.actionFont;\n };\n }, [\n providerId,\n applyClassesTo,\n density,\n mode,\n theme,\n targetWindow,\n corner,\n headingFont,\n accent,\n actionFont,\n ]);\n\n const themeNextProps = {\n \"data-corner\": corner,\n \"data-heading-font\": headingFont,\n \"data-accent\": accent,\n \"data-action-font\": actionFont,\n };\n\n if (applyClassesTo === \"child\") {\n if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return cloneElement(children, {\n className: clsx(\n children.props?.className,\n theme,\n `salt-density-${density}`,\n ),\n // @ts-expect-error\n \"data-mode\": mode,\n ...themeNextProps,\n });\n }\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`,\n );\n return children;\n }\n\n if (applyClassesTo === \"scope\") {\n return (\n <div\n className={clsx(\"salt-provider\", theme, `salt-density-${density}`)}\n data-mode={mode}\n {...themeNextProps}\n >\n {children}\n </div>\n );\n }\n\n return children;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import { type WindowContextType } from "@salt-ds/window";
|
|
|
2
2
|
import { type ReactElement, type ReactNode } from "react";
|
|
3
3
|
import { type Breakpoints } from "../breakpoints";
|
|
4
4
|
import type { Accent, ActionFont, Corner, Density, HeadingFont, Mode, ThemeName } from "../theme";
|
|
5
|
+
import { type ThemeApplicatorProps } from "./ThemeApplicator";
|
|
5
6
|
export declare const DEFAULT_DENSITY = "medium";
|
|
6
7
|
export interface ThemeContextProps {
|
|
7
8
|
theme: ThemeName;
|
|
@@ -25,34 +26,8 @@ export interface ThemeContextProps {
|
|
|
25
26
|
export declare const DensityContext: import("react").Context<"touch" | "high" | "low" | "medium">;
|
|
26
27
|
export declare const ThemeContext: import("react").Context<ThemeContextProps>;
|
|
27
28
|
export declare const BreakpointContext: import("react").Context<Breakpoints>;
|
|
28
|
-
type
|
|
29
|
-
interface SaltProviderBaseProps {
|
|
30
|
-
/**
|
|
31
|
-
* Either "root", "scope" or "child".
|
|
32
|
-
* Specifies the location of salt theme class and attributes should be applied to.
|
|
33
|
-
*
|
|
34
|
-
* Defaults to "root" for a root provider, otherwise "scope".
|
|
35
|
-
*/
|
|
36
|
-
applyClassesTo?: TargetElement;
|
|
37
|
-
/**
|
|
38
|
-
* Either "high", "medium", "low" or "touch".
|
|
39
|
-
* Determines the amount of content that can fit on a screen based on the size and spacing of components.
|
|
40
|
-
* Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.
|
|
41
|
-
*
|
|
42
|
-
* @default "medium"
|
|
43
|
-
*/
|
|
44
|
-
density?: Density;
|
|
45
|
-
/**
|
|
46
|
-
* A string. Specifies custom theme name(s) you want to apply, similar to `className`.
|
|
47
|
-
*/
|
|
48
|
-
theme?: ThemeName;
|
|
49
|
-
/**
|
|
50
|
-
* Either "light" or "dark". Enable the color palette to change from light to dark.
|
|
51
|
-
* Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.
|
|
52
|
-
*
|
|
53
|
-
* @default "light"
|
|
54
|
-
*/
|
|
55
|
-
mode?: Mode;
|
|
29
|
+
type ThemeNextOnlyAttributes = "accent" | "corner" | "actionFont" | "headingFont";
|
|
30
|
+
interface SaltProviderBaseProps extends Partial<Omit<ThemeApplicatorProps, "children" | ThemeNextOnlyAttributes>> {
|
|
56
31
|
/**
|
|
57
32
|
* Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.
|
|
58
33
|
* Determines breakpoints used in responsive calculation for layout components.
|
|
@@ -79,36 +54,10 @@ interface SaltProviderThatClassesToRoot extends SaltProviderThatInjectsThemeElem
|
|
|
79
54
|
}
|
|
80
55
|
type SaltProviderProps = SaltProviderThatAppliesClassesToChild | SaltProviderThatInjectsThemeElement | SaltProviderThatClassesToRoot;
|
|
81
56
|
export declare function SaltProvider({ enableStyleInjection, ...restProps }: SaltProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
* Either "sharp" or "rounded".
|
|
85
|
-
* Determines selected components corner radius.
|
|
86
|
-
* @default "sharp"
|
|
87
|
-
*/
|
|
88
|
-
corner?: Corner;
|
|
89
|
-
/**
|
|
90
|
-
* Either "Open Sans" or "Amplitude".
|
|
91
|
-
* Determines font family of display and heading text.
|
|
92
|
-
* @default "Open Sans"
|
|
93
|
-
*/
|
|
94
|
-
headingFont?: HeadingFont;
|
|
95
|
-
/**
|
|
96
|
-
* Either "blue" or "teal".
|
|
97
|
-
* Determines accent color used across components, e.g. Accent Button, List, Calendar.
|
|
98
|
-
* @default "blue"
|
|
99
|
-
*/
|
|
100
|
-
accent?: Accent;
|
|
101
|
-
/**
|
|
102
|
-
* Either "Open Sans" or "Amplitude".
|
|
103
|
-
* Determines font family of action components, mostly Buttons.
|
|
104
|
-
* @default "Open Sans"
|
|
105
|
-
*/
|
|
106
|
-
actionFont?: ActionFont;
|
|
107
|
-
}
|
|
108
|
-
export type SaltProviderNextProps = SaltProviderProps & SaltProviderNextAdditionalProps;
|
|
57
|
+
export type SaltProviderNextProps = SaltProviderProps & Pick<ThemeApplicatorProps, ThemeNextOnlyAttributes>;
|
|
58
|
+
export declare function SaltProviderNext({ enableStyleInjection, ...restProps }: SaltProviderNextProps): import("react/jsx-runtime").JSX.Element;
|
|
109
59
|
/** @deprecated use `SaltProviderNextProps` */
|
|
110
60
|
export type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;
|
|
111
|
-
export declare function SaltProviderNext({ enableStyleInjection, ...restProps }: SaltProviderNextProps): import("react/jsx-runtime").JSX.Element;
|
|
112
61
|
/** @deprecated use `SaltProviderNext` */
|
|
113
62
|
export declare const UNSTABLE_SaltProviderNext: typeof SaltProviderNext;
|
|
114
63
|
export declare const useTheme: () => ThemeContextProps;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
import type { Accent, ActionFont, Corner, Density, HeadingFont, Mode, ThemeName } from "../theme/index";
|
|
3
|
+
export interface ThemeApplicatorProps {
|
|
4
|
+
/**
|
|
5
|
+
* Either "root", "scope" or "child".
|
|
6
|
+
* Specifies the location of salt theme class and attributes should be applied to.
|
|
7
|
+
*
|
|
8
|
+
* Defaults to "root" for a root provider, otherwise "scope".
|
|
9
|
+
*/
|
|
10
|
+
applyClassesTo: "root" | "scope" | "child";
|
|
11
|
+
/**
|
|
12
|
+
* Either "high", "medium", "low" or "touch".
|
|
13
|
+
* Determines the amount of content that can fit on a screen based on the size and spacing of components.
|
|
14
|
+
* Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.
|
|
15
|
+
*
|
|
16
|
+
* @default "medium"
|
|
17
|
+
*/
|
|
18
|
+
density: Density;
|
|
19
|
+
/**
|
|
20
|
+
* A string. Specifies custom theme name(s) you want to apply, similar to `className`.
|
|
21
|
+
*/
|
|
22
|
+
theme: ThemeName;
|
|
23
|
+
/**
|
|
24
|
+
* Either "light" or "dark". Enable the color palette to change from light to dark.
|
|
25
|
+
* Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.
|
|
26
|
+
*
|
|
27
|
+
* @default "light"
|
|
28
|
+
*/
|
|
29
|
+
mode: Mode;
|
|
30
|
+
/**
|
|
31
|
+
* Either "sharp" or "rounded".
|
|
32
|
+
* Determines selected components corner radius.
|
|
33
|
+
* @default "sharp"
|
|
34
|
+
*/
|
|
35
|
+
corner?: Corner;
|
|
36
|
+
/**
|
|
37
|
+
* Either "Open Sans" or "Amplitude".
|
|
38
|
+
* Determines font family of display and heading text.
|
|
39
|
+
* @default "Open Sans"
|
|
40
|
+
*/
|
|
41
|
+
headingFont?: HeadingFont;
|
|
42
|
+
/**
|
|
43
|
+
* Either "blue" or "teal".
|
|
44
|
+
* Determines accent color used across components, e.g. Accent Button, List, Calendar.
|
|
45
|
+
* @default "blue"
|
|
46
|
+
*/
|
|
47
|
+
accent?: Accent;
|
|
48
|
+
/**
|
|
49
|
+
* Either "Open Sans" or "Amplitude".
|
|
50
|
+
* Determines font family of action components, mostly Buttons.
|
|
51
|
+
* @default "Open Sans"
|
|
52
|
+
*/
|
|
53
|
+
actionFont?: ActionFont;
|
|
54
|
+
children?: ReactNode;
|
|
55
|
+
}
|
|
56
|
+
export declare function ThemeApplicator({ applyClassesTo, children, density, mode, theme, corner, headingFont, accent, actionFont, }: ThemeApplicatorProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/core",
|
|
3
|
-
"version": "1.54.
|
|
3
|
+
"version": "1.54.1",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@floating-ui/react": "^0.26.28",
|
|
17
|
-
"@salt-ds/icons": "^1.
|
|
17
|
+
"@salt-ds/icons": "^1.16.0",
|
|
18
18
|
"@salt-ds/styles": "0.2.1",
|
|
19
19
|
"@salt-ds/window": "0.1.1",
|
|
20
20
|
"clsx": "^2.0.0",
|