@salt-ds/lab 1.0.0-alpha.22 → 1.0.0-alpha.24
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/css/salt-lab.css +12 -10
- package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
- package/dist-cjs/color-chooser/ColorPicker.js +2 -2
- package/dist-cjs/color-chooser/ColorPicker.js.map +1 -1
- package/dist-cjs/pill-next/PillNext.js +5 -10
- package/dist-cjs/pill-next/PillNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
- package/dist-es/color-chooser/ColorPicker.css.js +1 -1
- package/dist-es/color-chooser/ColorPicker.js +2 -2
- package/dist-es/color-chooser/ColorPicker.js.map +1 -1
- package/dist-es/pill-next/PillNext.js +5 -10
- package/dist-es/pill-next/PillNext.js.map +1 -1
- package/dist-es/tabs-next/TabstripNext.css.js +1 -1
- package/package.json +4 -4
package/css/salt-lab.css
CHANGED
|
@@ -345,19 +345,19 @@
|
|
|
345
345
|
align-content: stretch;
|
|
346
346
|
padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);
|
|
347
347
|
}
|
|
348
|
-
.root,
|
|
349
|
-
.rootDisabledAlpha {
|
|
348
|
+
.saltColorChooserPicker-root,
|
|
349
|
+
.saltColorChooserPicker-rootDisabledAlpha {
|
|
350
350
|
box-shadow: none !important;
|
|
351
351
|
padding: 8px 8px 0px 0px !important;
|
|
352
352
|
background: transparent !important;
|
|
353
353
|
width: calc(9 * var(--salt-size-stackable)) !important;
|
|
354
354
|
}
|
|
355
|
-
.root .flexbox-fix,
|
|
356
|
-
.rootDisabledAlpha .flexbox-fix {
|
|
355
|
+
.saltColorChooserPicker-root .flexbox-fix,
|
|
356
|
+
.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {
|
|
357
357
|
padding-top: 8px !important;
|
|
358
358
|
}
|
|
359
|
-
.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,
|
|
360
|
-
.root .flexbox-fix ~ .flexbox-fix {
|
|
359
|
+
.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,
|
|
360
|
+
.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {
|
|
361
361
|
display: none !important;
|
|
362
362
|
}
|
|
363
363
|
.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {
|
|
@@ -382,7 +382,7 @@
|
|
|
382
382
|
width: calc(var(--salt-size-base) / 4) !important;
|
|
383
383
|
height: calc(var(--salt-size-base) / 4) !important;
|
|
384
384
|
}
|
|
385
|
-
.rootDisabledAlpha .hue-horizontal > div > div {
|
|
385
|
+
.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {
|
|
386
386
|
position: relative;
|
|
387
387
|
margin-top: 0px !important;
|
|
388
388
|
width: 4px !important;
|
|
@@ -3830,13 +3830,15 @@
|
|
|
3830
3830
|
position: relative;
|
|
3831
3831
|
background: transparent;
|
|
3832
3832
|
width: 100%;
|
|
3833
|
-
padding-left: var(--salt-spacing-300);
|
|
3834
|
-
padding-right: var(--salt-spacing-300);
|
|
3835
3833
|
font-family: var(--salt-text-fontFamily);
|
|
3836
3834
|
font-size: var(--salt-text-fontSize);
|
|
3837
3835
|
font-weight: var(--salt-text-fontWeight);
|
|
3838
3836
|
line-height: var(--salt-text-lineHeight);
|
|
3839
3837
|
}
|
|
3838
|
+
.saltTabstripNext-main {
|
|
3839
|
+
padding-left: var(--salt-spacing-300);
|
|
3840
|
+
padding-right: var(--salt-spacing-300);
|
|
3841
|
+
}
|
|
3840
3842
|
.saltTabstripNext-main::before {
|
|
3841
3843
|
content: "";
|
|
3842
3844
|
position: absolute;
|
|
@@ -4840,4 +4842,4 @@
|
|
|
4840
4842
|
margin: calc(var(--salt-size-unit) / 2) 0;
|
|
4841
4843
|
}
|
|
4842
4844
|
|
|
4843
|
-
/* src/
|
|
4845
|
+
/* src/54bcdacf-3525-4b80-99dd-6c38ba20e381.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.root,\n.rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
|
|
3
|
+
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ColorPicker.css.js.map
|
|
@@ -68,8 +68,8 @@ const ColorPicker = ({
|
|
|
68
68
|
children: [
|
|
69
69
|
/* @__PURE__ */ jsxRuntime.jsx(reactColor.SketchPicker, {
|
|
70
70
|
className: clsx.clsx(withBaseName("swatchPickerStyles"), {
|
|
71
|
-
["rootDisabledAlpha"]: disableAlphaChooser,
|
|
72
|
-
["root"]: !disableAlphaChooser
|
|
71
|
+
[withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
|
|
72
|
+
[withBaseName("root")]: !disableAlphaChooser
|
|
73
73
|
}),
|
|
74
74
|
color: rgbaValue,
|
|
75
75
|
onChange: onSketchPickerChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [\"rootDisabledAlpha\"]: disableAlphaChooser,\n [\"root\"]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","colorPickerCss","Color","alpha","_a","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n [withBaseName(\"root\")]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","colorPickerCss","Color","alpha","_a","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":"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"}
|
|
@@ -30,20 +30,15 @@ const PillNext = React.forwardRef(
|
|
|
30
30
|
});
|
|
31
31
|
const { tabIndex, ...restButtonProps } = buttonProps;
|
|
32
32
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
33
|
-
className: withBaseName(),
|
|
33
|
+
className: clsx__default["default"](withBaseName(), className),
|
|
34
34
|
children: [
|
|
35
35
|
/* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
36
36
|
"data-testid": "pill",
|
|
37
37
|
ref,
|
|
38
|
-
className: clsx__default["default"](
|
|
39
|
-
withBaseName("
|
|
40
|
-
withBaseName("
|
|
41
|
-
|
|
42
|
-
[withBaseName("active")]: active,
|
|
43
|
-
[withBaseName("disabled")]: disabled
|
|
44
|
-
},
|
|
45
|
-
className
|
|
46
|
-
),
|
|
38
|
+
className: clsx__default["default"](withBaseName("action"), withBaseName("clickable"), {
|
|
39
|
+
[withBaseName("active")]: active,
|
|
40
|
+
[withBaseName("disabled")]: disabled
|
|
41
|
+
}),
|
|
47
42
|
...restButtonProps,
|
|
48
43
|
...restProps,
|
|
49
44
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillNext.js","sources":["../src/pill-next/PillNext.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, MouseEvent } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer, useButton } from \"@salt-ds/core\";\nimport pillCss from \"./PillNext.css\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nexport interface PillNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* If true the pill will be disabled */\n disabled?: boolean;\n onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n /* Pass an element to render an icon descriptor on the left of the label */\n icon?: React.ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltPillNext\");\n\nexport const PillNext = forwardRef<HTMLButtonElement, PillNextProps>(\n function PillNext(\n { children, className, icon, disabled, onClose, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-next\",\n css: pillCss,\n window: targetWindow,\n });\n const { buttonProps, active } = useButton<HTMLButtonElement>({\n disabled,\n ...restProps,\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n return (\n <div className={withBaseName()}>\n <button\n data-testid=\"pill\"\n ref={ref}\n className={clsx(
|
|
1
|
+
{"version":3,"file":"PillNext.js","sources":["../src/pill-next/PillNext.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, MouseEvent } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer, useButton } from \"@salt-ds/core\";\nimport pillCss from \"./PillNext.css\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nexport interface PillNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* If true the pill will be disabled */\n disabled?: boolean;\n onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n /* Pass an element to render an icon descriptor on the left of the label */\n icon?: React.ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltPillNext\");\n\nexport const PillNext = forwardRef<HTMLButtonElement, PillNextProps>(\n function PillNext(\n { children, className, icon, disabled, onClose, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-next\",\n css: pillCss,\n window: targetWindow,\n });\n const { buttonProps, active } = useButton<HTMLButtonElement>({\n disabled,\n ...restProps,\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n return (\n <div className={clsx(withBaseName(), className)}>\n <button\n data-testid=\"pill\"\n ref={ref}\n className={clsx(withBaseName(\"action\"), withBaseName(\"clickable\"), {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"disabled\")]: disabled,\n })}\n {...restButtonProps}\n {...restProps}\n >\n {icon}\n <span className={withBaseName(\"label\")}>{children}</span>\n </button>\n {onClose && (\n <Button\n data-testid=\"pill-close-button\"\n className={withBaseName(\"close-button\")}\n disabled={disabled}\n onClick={onClose}\n >\n <CloseIcon />\n </Button>\n )}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","PillNext","useWindow","useComponentCssInjection","pillCss","useButton","jsxs","clsx","jsx","Button","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,MAAM,QAAU,EAAA,OAAA,EAAA,GAAY,SAAU,EAAA,EAC7D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,cAA6B,CAAA;AAAA,MAC3D,QAAA;AAAA,MACA,GAAG,SAAA;AAAA,KACJ,CAAA,CAAA;AAID,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AAEzC,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,wBAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAACD,eAAA,CAAA,QAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,GAAA;AAAA,UACA,WAAWC,wBAAK,CAAA,YAAA,CAAa,QAAQ,CAAG,EAAA,YAAA,CAAa,WAAW,CAAG,EAAA;AAAA,YACjE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC7B,CAAA;AAAA,UACA,GAAG,eAAA;AAAA,UACH,GAAG,SAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,IAAA;AAAA,4BACAC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,QAAA;AAAA,aAAS,CAAA;AAAA,WAAA;AAAA,SACpD,CAAA;AAAA,QACC,2BACEA,cAAA,CAAAC,WAAA,EAAA;AAAA,UACC,aAAY,EAAA,mBAAA;AAAA,UACZ,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,OAAA;AAAA,UAET,yCAACC,eAAU,EAAA,EAAA,CAAA;AAAA,SACb,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n
|
|
3
|
+
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=TabstripNext.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.root,\n.rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
|
|
1
|
+
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=ColorPicker.css.js.map
|
|
@@ -64,8 +64,8 @@ const ColorPicker = ({
|
|
|
64
64
|
children: [
|
|
65
65
|
/* @__PURE__ */ jsx(SketchPicker, {
|
|
66
66
|
className: clsx(withBaseName("swatchPickerStyles"), {
|
|
67
|
-
["rootDisabledAlpha"]: disableAlphaChooser,
|
|
68
|
-
["root"]: !disableAlphaChooser
|
|
67
|
+
[withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
|
|
68
|
+
[withBaseName("root")]: !disableAlphaChooser
|
|
69
69
|
}),
|
|
70
70
|
color: rgbaValue,
|
|
71
71
|
onChange: onSketchPickerChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [\"rootDisabledAlpha\"]: disableAlphaChooser,\n [\"root\"]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["colorPickerCss","alpha","_a"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n [withBaseName(\"root\")]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["colorPickerCss","alpha","_a"],"mappings":"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"}
|
|
@@ -22,20 +22,15 @@ const PillNext = forwardRef(
|
|
|
22
22
|
});
|
|
23
23
|
const { tabIndex, ...restButtonProps } = buttonProps;
|
|
24
24
|
return /* @__PURE__ */ jsxs("div", {
|
|
25
|
-
className: withBaseName(),
|
|
25
|
+
className: clsx(withBaseName(), className),
|
|
26
26
|
children: [
|
|
27
27
|
/* @__PURE__ */ jsxs("button", {
|
|
28
28
|
"data-testid": "pill",
|
|
29
29
|
ref,
|
|
30
|
-
className: clsx(
|
|
31
|
-
withBaseName("
|
|
32
|
-
withBaseName("
|
|
33
|
-
|
|
34
|
-
[withBaseName("active")]: active,
|
|
35
|
-
[withBaseName("disabled")]: disabled
|
|
36
|
-
},
|
|
37
|
-
className
|
|
38
|
-
),
|
|
30
|
+
className: clsx(withBaseName("action"), withBaseName("clickable"), {
|
|
31
|
+
[withBaseName("active")]: active,
|
|
32
|
+
[withBaseName("disabled")]: disabled
|
|
33
|
+
}),
|
|
39
34
|
...restButtonProps,
|
|
40
35
|
...restProps,
|
|
41
36
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillNext.js","sources":["../src/pill-next/PillNext.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, MouseEvent } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer, useButton } from \"@salt-ds/core\";\nimport pillCss from \"./PillNext.css\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nexport interface PillNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* If true the pill will be disabled */\n disabled?: boolean;\n onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n /* Pass an element to render an icon descriptor on the left of the label */\n icon?: React.ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltPillNext\");\n\nexport const PillNext = forwardRef<HTMLButtonElement, PillNextProps>(\n function PillNext(\n { children, className, icon, disabled, onClose, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-next\",\n css: pillCss,\n window: targetWindow,\n });\n const { buttonProps, active } = useButton<HTMLButtonElement>({\n disabled,\n ...restProps,\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n return (\n <div className={withBaseName()}>\n <button\n data-testid=\"pill\"\n ref={ref}\n className={clsx(
|
|
1
|
+
{"version":3,"file":"PillNext.js","sources":["../src/pill-next/PillNext.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, MouseEvent } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer, useButton } from \"@salt-ds/core\";\nimport pillCss from \"./PillNext.css\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nexport interface PillNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* If true the pill will be disabled */\n disabled?: boolean;\n onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n /* Pass an element to render an icon descriptor on the left of the label */\n icon?: React.ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltPillNext\");\n\nexport const PillNext = forwardRef<HTMLButtonElement, PillNextProps>(\n function PillNext(\n { children, className, icon, disabled, onClose, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-next\",\n css: pillCss,\n window: targetWindow,\n });\n const { buttonProps, active } = useButton<HTMLButtonElement>({\n disabled,\n ...restProps,\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n return (\n <div className={clsx(withBaseName(), className)}>\n <button\n data-testid=\"pill\"\n ref={ref}\n className={clsx(withBaseName(\"action\"), withBaseName(\"clickable\"), {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"disabled\")]: disabled,\n })}\n {...restButtonProps}\n {...restProps}\n >\n {icon}\n <span className={withBaseName(\"label\")}>{children}</span>\n </button>\n {onClose && (\n <Button\n data-testid=\"pill-close-button\"\n className={withBaseName(\"close-button\")}\n disabled={disabled}\n onClick={onClose}\n >\n <CloseIcon />\n </Button>\n )}\n </div>\n );\n }\n);\n"],"names":["PillNext","pillCss"],"mappings":";;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,MAAM,QAAU,EAAA,OAAA,EAAA,GAAY,SAAU,EAAA,EAC7D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAI,SAA6B,CAAA;AAAA,MAC3D,QAAA;AAAA,MACA,GAAG,SAAA;AAAA,KACJ,CAAA,CAAA;AAID,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AAEzC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,QAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,GAAA;AAAA,UACA,WAAW,IAAK,CAAA,YAAA,CAAa,QAAQ,CAAG,EAAA,YAAA,CAAa,WAAW,CAAG,EAAA;AAAA,YACjE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC7B,CAAA;AAAA,UACA,GAAG,eAAA;AAAA,UACH,GAAG,SAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,IAAA;AAAA,4BACA,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,QAAA;AAAA,aAAS,CAAA;AAAA,WAAA;AAAA,SACpD,CAAA;AAAA,QACC,2BACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,aAAY,EAAA,mBAAA;AAAA,UACZ,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,OAAA;AAAA,UAET,8BAAC,SAAU,EAAA,EAAA,CAAA;AAAA,SACb,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n
|
|
1
|
+
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=TabstripNext.css.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.24",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"react-window": "^1.8.6",
|
|
27
27
|
"rifm": "^0.12.0",
|
|
28
28
|
"tinycolor2": "^1.4.2",
|
|
29
|
-
"@salt-ds/core": "^1.
|
|
29
|
+
"@salt-ds/core": "^1.13.2",
|
|
30
30
|
"@salt-ds/window": "^0.1.1",
|
|
31
|
-
"@salt-ds/styles": "^0.
|
|
32
|
-
"@salt-ds/icons": "^1.
|
|
31
|
+
"@salt-ds/styles": "^0.2.0",
|
|
32
|
+
"@salt-ds/icons": "^1.9.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@types/react": ">=16.14.0",
|