@frontify/fondue 12.0.0-beta.148 → 12.0.0-beta.149
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/dist/components/ColorPicker/BrandColorPicker.es.js +18 -18
- package/dist/components/ColorPicker/BrandColorPicker.es.js.map +1 -1
- package/dist/components/ColorPicker/ColorPicker.es.js +13 -13
- package/dist/components/ColorPicker/ColorPicker.es.js.map +1 -1
- package/dist/components/{Slider/Slider.d.ts → SegmentedControls/SegmentedControls.d.ts} +2 -2
- package/dist/components/SegmentedControls/SegmentedControls.es.js +98 -0
- package/dist/components/SegmentedControls/SegmentedControls.es.js.map +1 -0
- package/dist/components/SegmentedControls/index.d.ts +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +2 -2
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/components/Slider/Slider.es.js +0 -98
- package/dist/components/Slider/Slider.es.js.map +0 -1
- package/dist/components/Slider/index.d.ts +0 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SegmentedControls as N } from "../SegmentedControls/SegmentedControls.es.js";
|
|
2
2
|
import { TextInput as h } from "../TextInput/TextInput.es.js";
|
|
3
3
|
import { IconSize as L } from "../../foundation/Icon/IconSize.es.js";
|
|
4
4
|
import { isColorLight as k, toShortRgb as v } from "../../utilities/colors.es.js";
|
|
5
5
|
import { merge as d } from "../../utilities/merge.es.js";
|
|
6
|
-
import e, { useState as w, useEffect as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
6
|
+
import e, { useState as w, useEffect as C } from "react";
|
|
7
|
+
import I from "tinycolor2";
|
|
8
|
+
import S from "../../foundation/Icon/Generated/IconMagnifier.es.js";
|
|
9
9
|
import y from "../../foundation/Icon/Generated/IconCheckMark.es.js";
|
|
10
10
|
import R from "../../foundation/Icon/Generated/IconGridRegular.es.js";
|
|
11
11
|
import z from "../../foundation/Icon/Generated/IconStackVertical.es.js";
|
|
@@ -13,27 +13,27 @@ const o = (r, l = "") => r == null ? void 0 : r.toLocaleLowerCase().includes(l.t
|
|
|
13
13
|
const f = [
|
|
14
14
|
{ id: "Grid", icon: /* @__PURE__ */ e.createElement(R, null), ariaLabel: "Grid" },
|
|
15
15
|
{ id: "List", icon: /* @__PURE__ */ e.createElement(z, null), ariaLabel: "List" }
|
|
16
|
-
], [c,
|
|
17
|
-
|
|
16
|
+
], [c, g] = w(f[0].id), [m, u] = w(""), [E, b] = w(r);
|
|
17
|
+
C(() => {
|
|
18
18
|
const a = setTimeout(() => {
|
|
19
19
|
b(
|
|
20
|
-
r.filter(({ title:
|
|
21
|
-
id:
|
|
22
|
-
title:
|
|
23
|
-
colors: t.some(({ name: s }) => o(s,
|
|
20
|
+
r.filter(({ title: n, colors: i }) => o(n, m) || i.some(({ name: t }) => o(t, m))).map(({ id: n, title: i, colors: t }) => ({
|
|
21
|
+
id: n,
|
|
22
|
+
title: i,
|
|
23
|
+
colors: t.some(({ name: s }) => o(s, m)) ? t.filter(({ name: s }) => o(s, m)) : t
|
|
24
24
|
}))
|
|
25
25
|
);
|
|
26
26
|
}, 200);
|
|
27
27
|
return () => clearTimeout(a);
|
|
28
|
-
}, [r,
|
|
28
|
+
}, [r, m]);
|
|
29
29
|
const p = E.filter((a) => a.colors.length > 0);
|
|
30
30
|
return /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-flex-col tw-gap-4", "data-test-id": "brand-color-picker" }, /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-gap-2" }, /* @__PURE__ */ e.createElement("div", { className: "tw-flex-1" }, /* @__PURE__ */ e.createElement(
|
|
31
31
|
h,
|
|
32
32
|
{
|
|
33
|
-
value:
|
|
34
|
-
decorator: /* @__PURE__ */ e.createElement(
|
|
33
|
+
value: m,
|
|
34
|
+
decorator: /* @__PURE__ */ e.createElement(S, null),
|
|
35
35
|
placeholder: "Search",
|
|
36
|
-
onChange: (a) =>
|
|
36
|
+
onChange: (a) => u(a),
|
|
37
37
|
clearable: !0
|
|
38
38
|
}
|
|
39
39
|
)), /* @__PURE__ */ e.createElement("div", { className: "tw-w-[72px]" }, /* @__PURE__ */ e.createElement(
|
|
@@ -41,9 +41,9 @@ const o = (r, l = "") => r == null ? void 0 : r.toLocaleLowerCase().includes(l.t
|
|
|
41
41
|
{
|
|
42
42
|
items: f,
|
|
43
43
|
activeItemId: c,
|
|
44
|
-
onChange: (a) =>
|
|
44
|
+
onChange: (a) => g(a)
|
|
45
45
|
}
|
|
46
|
-
))), /* @__PURE__ */ e.createElement("ul", { className: "tw-flex tw-flex-col tw-gap-4" }, p.length > 0 ? p.map(({ id: a, title:
|
|
46
|
+
))), /* @__PURE__ */ e.createElement("ul", { className: "tw-flex tw-flex-col tw-gap-4" }, p.length > 0 ? p.map(({ id: a, title: n, colors: i }) => /* @__PURE__ */ e.createElement("li", { key: a, className: "tw-flex tw-flex-col tw-gap-2" }, /* @__PURE__ */ e.createElement("p", { className: "tw-text-black tw-text-xs tw-font-medium dark:tw-text-white" }, n), /* @__PURE__ */ e.createElement(
|
|
47
47
|
"ul",
|
|
48
48
|
{
|
|
49
49
|
className: d([
|
|
@@ -51,7 +51,7 @@ const o = (r, l = "") => r == null ? void 0 : r.toLocaleLowerCase().includes(l.t
|
|
|
51
51
|
c === "List" && "tw-flex-col"
|
|
52
52
|
])
|
|
53
53
|
},
|
|
54
|
-
|
|
54
|
+
i.map((t) => /* @__PURE__ */ e.createElement("li", { key: t.name, "data-test-id": "brand-color" }, /* @__PURE__ */ e.createElement(
|
|
55
55
|
"button",
|
|
56
56
|
{
|
|
57
57
|
className: "tw-flex tw-w-full",
|
|
@@ -65,7 +65,7 @@ const o = (r, l = "") => r == null ? void 0 : r.toLocaleLowerCase().includes(l.t
|
|
|
65
65
|
"tw-h-6 tw-w-6 tw-mr-2 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1",
|
|
66
66
|
k(t) ? "tw-text-black" : "tw-text-white"
|
|
67
67
|
]),
|
|
68
|
-
style: { background:
|
|
68
|
+
style: { background: I(v(t)).toRgbString() }
|
|
69
69
|
},
|
|
70
70
|
t.red === l.red && t.green === l.green && t.blue === l.blue && t.alpha === l.alpha && /* @__PURE__ */ e.createElement(y, { size: L.Size20 })
|
|
71
71
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrandColorPicker.es.js","sources":["../../../src/components/ColorPicker/BrandColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {
|
|
1
|
+
{"version":3,"file":"BrandColorPicker.es.js","sources":["../../../src/components/ColorPicker/BrandColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { SegmentedControls } from '@components/SegmentedControls/SegmentedControls';\nimport { TextInput } from '@components/TextInput/TextInput';\nimport { IconCheckMark, IconGridRegular, IconMagnifier, IconStackVertical } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { isColorLight, toShortRgb } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useEffect, useState } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { ColorPickerProps } from './ColorPicker';\n\nconst find = (haystack?: string, needle = '') =>\n haystack?.toLocaleLowerCase().includes(needle.toLocaleLowerCase().trim());\n\nenum BrandColorView {\n List = 'List',\n Grid = 'Grid',\n}\n\ntype Props = Omit<ColorPickerProps, 'currentFormat' | 'setFormat'>;\n\nexport const BrandColorPicker: FC<Props> = ({ palettes: defaultPalettes = [], currentColor, onSelect }) => {\n const views = [\n { id: BrandColorView.Grid, icon: <IconGridRegular />, ariaLabel: 'Grid' },\n { id: BrandColorView.List, icon: <IconStackVertical />, ariaLabel: 'List' },\n ];\n const [view, setView] = useState(views[0].id);\n const [query, setQuery] = useState('');\n const [palettes, setPalettes] = useState(defaultPalettes);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setPalettes(\n defaultPalettes\n .filter(({ title, colors }) => find(title, query) || colors.some(({ name }) => find(name, query)))\n .map(({ id, title, colors }) => ({\n id,\n title,\n colors: colors.some(({ name }) => find(name, query))\n ? colors.filter(({ name }) => find(name, query))\n : colors,\n })),\n );\n }, 200);\n\n return () => clearTimeout(timer);\n }, [defaultPalettes, query]);\n\n const palettesWithColors = palettes.filter((palette) => palette.colors.length > 0);\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-4\" data-test-id=\"brand-color-picker\">\n <div className=\"tw-flex tw-gap-2\">\n <div className=\"tw-flex-1\">\n <TextInput\n value={query}\n decorator={<IconMagnifier />}\n placeholder=\"Search\"\n onChange={(value) => setQuery(value)}\n clearable\n />\n </div>\n <div className=\"tw-w-[72px]\">\n <SegmentedControls\n items={views}\n activeItemId={view}\n onChange={(colorView) => setView(colorView as BrandColorView)}\n />\n </div>\n </div>\n <ul className=\"tw-flex tw-flex-col tw-gap-4\">\n {palettesWithColors.length > 0\n ? palettesWithColors.map(({ id, title, colors }) => (\n <li key={id} className=\"tw-flex tw-flex-col tw-gap-2\">\n <p className=\"tw-text-black tw-text-xs tw-font-medium dark:tw-text-white\">{title}</p>\n <ul\n className={merge([\n 'tw-flex tw-gap-y-2 tw-flex-wrap',\n view === BrandColorView.List && 'tw-flex-col',\n ])}\n >\n {colors.map((color) => (\n <li key={color.name} data-test-id=\"brand-color\">\n <button\n className=\"tw-flex tw-w-full\"\n onClick={() => onSelect(color)}\n type=\"button\"\n >\n <span\n className={merge([\n 'tw-h-6 tw-w-6 tw-mr-2 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1',\n isColorLight(color) ? 'tw-text-black' : 'tw-text-white',\n ])}\n style={{ background: tinycolor(toShortRgb(color)).toRgbString() }}\n >\n {color.red === currentColor.red &&\n color.green === currentColor.green &&\n color.blue === currentColor.blue &&\n color.alpha === currentColor.alpha && (\n <IconCheckMark size={IconSize.Size20} />\n )}\n </span>\n {view === BrandColorView.List && (\n <span className=\"tw-h-6 tw-grow tw-flex tw-items-center tw-text-sm tw-text-left\">\n {color.name}\n </span>\n )}\n </button>\n </li>\n ))}\n </ul>\n </li>\n ))\n : 'No colors found'}\n </ul>\n </div>\n );\n};\nBrandColorPicker.displayName = 'FondueBrandColorPicker';\n"],"names":["find","haystack","needle","BrandColorPicker","defaultPalettes","currentColor","onSelect","views","IconGridRegular","IconStackVertical","view","setView","useState","query","setQuery","palettes","setPalettes","useEffect","timer","title","colors","name","id","palettesWithColors","palette","React","TextInput","IconMagnifier","value","SegmentedControls","colorView","merge","color","isColorLight","tinycolor","toShortRgb","IconCheckMark","IconSize"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import e, { useState as
|
|
1
|
+
import { SegmentedControls as d } from "../SegmentedControls/SegmentedControls.es.js";
|
|
2
|
+
import e, { useState as p } from "react";
|
|
3
3
|
import { ColorFormat as C } from "../../types/colors.es.js";
|
|
4
4
|
import { BrandColorPicker as f } from "./BrandColorPicker.es.js";
|
|
5
5
|
import "./ColorPicker.css.es.js";
|
|
@@ -9,30 +9,30 @@ const v = [
|
|
|
9
9
|
{ id: "Brand", value: "Brand" },
|
|
10
10
|
{ id: "Custom", value: "Custom" }
|
|
11
11
|
], E = ({
|
|
12
|
-
currentColor:
|
|
13
|
-
palettes:
|
|
12
|
+
currentColor: o,
|
|
13
|
+
palettes: r,
|
|
14
14
|
onSelect: t,
|
|
15
15
|
setFormat: a,
|
|
16
|
-
showPreview:
|
|
17
|
-
currentFormat:
|
|
16
|
+
showPreview: l = !0,
|
|
17
|
+
currentFormat: i = C.Hex,
|
|
18
18
|
allowCustomColor: c = !0
|
|
19
19
|
}) => {
|
|
20
|
-
const [m, n] =
|
|
20
|
+
const [m, n] = p(
|
|
21
21
|
"Brand"
|
|
22
22
|
/* Brand */
|
|
23
23
|
);
|
|
24
|
-
return /* @__PURE__ */ e.createElement("div", { className: "tw-w-[400px] tw-relative" },
|
|
25
|
-
|
|
24
|
+
return /* @__PURE__ */ e.createElement("div", { className: "tw-w-[400px] tw-relative" }, l && /* @__PURE__ */ e.createElement(u, { color: o }), /* @__PURE__ */ e.createElement("div", { className: "tw-p-5 tw-flex tw-flex-col tw-gap-2" }, r && c && /* @__PURE__ */ e.createElement(
|
|
25
|
+
d,
|
|
26
26
|
{
|
|
27
27
|
items: v,
|
|
28
28
|
activeItemId: m,
|
|
29
|
-
onChange: (
|
|
29
|
+
onChange: (s) => n(s)
|
|
30
30
|
}
|
|
31
|
-
),
|
|
31
|
+
), r && m === "Brand" ? /* @__PURE__ */ e.createElement(f, { currentColor: o, palettes: r, onSelect: t }) : /* @__PURE__ */ e.createElement(
|
|
32
32
|
w,
|
|
33
33
|
{
|
|
34
|
-
currentColor:
|
|
35
|
-
currentFormat:
|
|
34
|
+
currentColor: o,
|
|
35
|
+
currentFormat: i,
|
|
36
36
|
setFormat: a,
|
|
37
37
|
onSelect: t
|
|
38
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.es.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {
|
|
1
|
+
{"version":3,"file":"ColorPicker.es.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { SegmentedControls } from '@components/SegmentedControls/SegmentedControls';\nimport React, { useState } from 'react';\nimport { Color, ColorFormat, Palette } from '../../types/colors';\nimport { BrandColorPicker } from './BrandColorPicker';\nimport './ColorPicker.css';\nimport { ColorPreview } from './ColorPreview';\nimport { CustomColorPicker } from './CustomColorPicker';\n\nexport type ColorPickerProps = {\n palettes?: Palette[];\n currentColor: Color;\n currentFormat: ColorFormat;\n setFormat: (id: ColorFormat) => void;\n onSelect: (color: Color) => void;\n showPreview?: boolean;\n allowCustomColor?: boolean;\n};\n\nenum ColorType {\n Brand = 'Brand',\n Custom = 'Custom',\n}\n\nconst colorTypes = [\n { id: ColorType.Brand, value: 'Brand' },\n { id: ColorType.Custom, value: 'Custom' },\n];\n\nexport const ColorPicker = ({\n currentColor,\n palettes,\n onSelect,\n setFormat,\n showPreview = true,\n currentFormat = ColorFormat.Hex,\n allowCustomColor = true,\n}: ColorPickerProps) => {\n const [colorType, setColorType] = useState(ColorType.Brand);\n\n return (\n <div className=\"tw-w-[400px] tw-relative\">\n {showPreview && <ColorPreview color={currentColor} />}\n <div className=\"tw-p-5 tw-flex tw-flex-col tw-gap-2\">\n {palettes && allowCustomColor && (\n <SegmentedControls\n items={colorTypes}\n activeItemId={colorType}\n onChange={(type) => setColorType(type as ColorType)}\n />\n )}\n {palettes && colorType === ColorType.Brand ? (\n <BrandColorPicker currentColor={currentColor} palettes={palettes} onSelect={onSelect} />\n ) : (\n <CustomColorPicker\n currentColor={currentColor}\n currentFormat={currentFormat}\n setFormat={setFormat}\n onSelect={onSelect}\n />\n )}\n </div>\n </div>\n );\n};\nColorPicker.displayName = 'FondueColorPicker';\n"],"names":["colorTypes","ColorPicker","currentColor","palettes","onSelect","setFormat","showPreview","currentFormat","ColorFormat","allowCustomColor","colorType","setColorType","useState","React","ColorPreview","SegmentedControls","type","BrandColorPicker","CustomColorPicker"],"mappings":";;;;;;;AAyBA,MAAMA,IAAa;AAAA,EACf,EAAE,IAAI,SAAiB,OAAO,QAAQ;AAAA,EACtC,EAAE,IAAI,UAAkB,OAAO,SAAS;AAC5C,GAEaC,IAAc,CAAC;AAAA,EACxB,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,eAAAC,IAAgBC,EAAY;AAAA,EAC5B,kBAAAC,IAAmB;AACvB,MAAwB;AACpB,QAAM,CAACC,GAAWC,CAAY,IAAIC;AAAA,IAAS;AAAA;AAAA,EAAe;AAE1D,SACK,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,2BAAA,GACVP,KAAgB,gBAAAO,EAAA,cAAAC,GAAA,EAAa,OAAOZ,EAAA,CAAc,GAClD,gBAAAW,EAAA,cAAA,OAAA,EAAI,WAAU,yCACVV,KAAYM,KACT,gBAAAI,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAOf;AAAA,MACP,cAAcU;AAAA,MACd,UAAU,CAACM,MAASL,EAAaK,CAAiB;AAAA,IAAA;AAAA,EACtD,GAEHb,KAAYO,MAAc,0CACtBO,GAAiB,EAAA,cAAAf,GAA4B,UAAAC,GAAoB,UAAAC,GAAoB,IAEtF,gBAAAS,EAAA;AAAA,IAACK;AAAA,IAAA;AAAA,MACG,cAAAhB;AAAA,MACA,eAAAK;AAAA,MACA,WAAAF;AAAA,MACA,UAAAD;AAAA,IAAA;AAAA,EAGZ,CAAA,CACJ;AAER;AACAH,EAAY,cAAc;"}
|
|
@@ -10,7 +10,7 @@ export type TextOrNumberItem = {
|
|
|
10
10
|
id: string;
|
|
11
11
|
value: string | number;
|
|
12
12
|
};
|
|
13
|
-
export type
|
|
13
|
+
export type SegmentedControlsProps = {
|
|
14
14
|
id?: string;
|
|
15
15
|
items: (TextOrNumberItem | IconItem)[];
|
|
16
16
|
activeItemId?: string;
|
|
@@ -18,4 +18,4 @@ export type SliderProps = {
|
|
|
18
18
|
ariaLabel?: string;
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
};
|
|
21
|
-
export declare const
|
|
21
|
+
export declare const SegmentedControls: FC<SegmentedControlsProps>;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { useMemoizedId as b } from "../../hooks/useMemoizedId.es.js";
|
|
2
|
+
import { useFocusRing as g } from "@react-aria/focus";
|
|
3
|
+
import { setInteractionModality as v } from "@react-aria/interactions";
|
|
4
|
+
import { useRadioGroup as x, useRadio as h } from "@react-aria/radio";
|
|
5
|
+
import { VisuallyHidden as E } from "@react-aria/visually-hidden";
|
|
6
|
+
import { useRadioGroupState as S } from "@react-stately/radio";
|
|
7
|
+
import { FOCUS_STYLE as k } from "../../utilities/focusStyle.es.js";
|
|
8
|
+
import { merge as p } from "../../utilities/merge.es.js";
|
|
9
|
+
import { motion as y } from "framer-motion";
|
|
10
|
+
import t, { useMemo as N, useRef as C } from "react";
|
|
11
|
+
const u = (i) => i.icon !== void 0, I = (i) => {
|
|
12
|
+
const { id: r, item: e, disabled: l, radioGroupState: c } = i, o = C(null), s = e.id === c.selectedValue, { inputProps: d } = h(
|
|
13
|
+
{
|
|
14
|
+
value: e.id,
|
|
15
|
+
"aria-label": u(e) ? e.ariaLabel : e.value.toString(),
|
|
16
|
+
isDisabled: l,
|
|
17
|
+
id: s ? r : void 0
|
|
18
|
+
},
|
|
19
|
+
c,
|
|
20
|
+
o
|
|
21
|
+
), { isFocusVisible: a, focusProps: w } = g(), f = () => {
|
|
22
|
+
var n;
|
|
23
|
+
l || (c.setSelectedValue(e.id), (n = o.current) == null || n.focus(), v("pointer"));
|
|
24
|
+
}, m = () => {
|
|
25
|
+
switch (!0) {
|
|
26
|
+
case u(e):
|
|
27
|
+
return "fondue-segmented-controls-item-icon";
|
|
28
|
+
case typeof e.value == "string":
|
|
29
|
+
return "fondue-segmented-controls-item-text";
|
|
30
|
+
default:
|
|
31
|
+
return "fondue-segmented-controls-item-number";
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
return /* @__PURE__ */ t.createElement("div", { key: e.id, className: p(["tw-relative", a && k]) }, /* @__PURE__ */ t.createElement(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
role: "none",
|
|
38
|
+
onClick: f,
|
|
39
|
+
"data-test-id": m(),
|
|
40
|
+
className: p([
|
|
41
|
+
"tw-relative tw-w-full tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center",
|
|
42
|
+
s && !l ? "tw-text-black" : "tw-text-black-80",
|
|
43
|
+
l ? "" : "hover:tw-text-black hover:tw-cursor-pointer"
|
|
44
|
+
])
|
|
45
|
+
},
|
|
46
|
+
/* @__PURE__ */ t.createElement(E, null, /* @__PURE__ */ t.createElement("input", { ...d, ...w, "data-test-id": "fondue-segmented-controls-input", ref: o })),
|
|
47
|
+
/* @__PURE__ */ t.createElement("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex" }, u(e) && /* @__PURE__ */ t.createElement("span", { className: "tw-leading-3", "aria-label": e.ariaLabel }, e.icon), e.value && /* @__PURE__ */ t.createElement("span", { className: u(e) ? "tw-ml-2" : "" }, e.value.toString()))
|
|
48
|
+
));
|
|
49
|
+
}, R = ({
|
|
50
|
+
id: i,
|
|
51
|
+
items: r,
|
|
52
|
+
activeItemId: e,
|
|
53
|
+
onChange: l,
|
|
54
|
+
ariaLabel: c = "SegmentedControls",
|
|
55
|
+
disabled: o = !1
|
|
56
|
+
}) => {
|
|
57
|
+
const s = b(i), d = { onChange: l, value: e, label: c, isDisabled: o }, a = S(d), { radioGroupProps: w } = x(d, a), f = N(() => r.map((n) => /* @__PURE__ */ t.createElement(
|
|
58
|
+
I,
|
|
59
|
+
{
|
|
60
|
+
id: s,
|
|
61
|
+
item: n,
|
|
62
|
+
disabled: o,
|
|
63
|
+
radioGroupState: a,
|
|
64
|
+
key: `fondue-segmented-controls-${s}-item-${n.id}`
|
|
65
|
+
}
|
|
66
|
+
)), [r, s, o, a]), m = r.findIndex((n) => n.id === a.selectedValue);
|
|
67
|
+
return /* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, /* @__PURE__ */ t.createElement(
|
|
68
|
+
"fieldset",
|
|
69
|
+
{
|
|
70
|
+
...w,
|
|
71
|
+
"data-test-id": "fondue-segmented-controls",
|
|
72
|
+
className: "tw-relative tw-h-9 tw-w-full tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly tw-p-0 tw-border tw-border-black-20 tw-m-0 tw-bg-black-0 tw-rounded tw-font-sans tw-text-s tw-select-none"
|
|
73
|
+
},
|
|
74
|
+
/* @__PURE__ */ t.createElement(
|
|
75
|
+
y.div,
|
|
76
|
+
{
|
|
77
|
+
"aria-hidden": "true",
|
|
78
|
+
animate: { x: `calc(${100 * m}% - ${2 * m}px)` },
|
|
79
|
+
initial: !1,
|
|
80
|
+
transition: { type: "tween", duration: 0.3 },
|
|
81
|
+
style: {
|
|
82
|
+
width: `${100 / r.length}%`
|
|
83
|
+
},
|
|
84
|
+
hidden: !e,
|
|
85
|
+
className: p([
|
|
86
|
+
"tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none",
|
|
87
|
+
o ? "tw-border-line-x-strong tw-border-opacity-30 tw-bg-black-0" : "tw-border-black tw-bg-white"
|
|
88
|
+
])
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
f
|
|
92
|
+
));
|
|
93
|
+
};
|
|
94
|
+
R.displayName = "FondueSegmentedControls";
|
|
95
|
+
export {
|
|
96
|
+
R as SegmentedControls
|
|
97
|
+
};
|
|
98
|
+
//# sourceMappingURL=SegmentedControls.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport React, { FC, ReactElement, useMemo, useRef } from 'react';\n\nexport type IconItem = {\n id: string;\n icon: ReactElement<IconProps>;\n value?: string;\n ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n id: string;\n value: string | number;\n};\n\nexport type SegmentedControlsProps = {\n id?: string;\n items: (TextOrNumberItem | IconItem)[];\n activeItemId?: string;\n onChange: (id: string) => void;\n ariaLabel?: string;\n disabled?: boolean;\n};\n\nconst isIconItem = (item: TextOrNumberItem | IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n id: string;\n item: TextOrNumberItem | IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n}\n\nconst SegmentedControlsItem = (props: SegmentedControlsItemProps) => {\n const { id, item, disabled, radioGroupState } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const isActive = item.id === radioGroupState.selectedValue;\n const { inputProps } = useRadio(\n {\n value: item.id,\n 'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n isDisabled: disabled,\n id: isActive ? id : undefined,\n },\n radioGroupState,\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleMockLabelClick = () => {\n if (!disabled) {\n radioGroupState.setSelectedValue(item.id);\n ref.current?.focus();\n setInteractionModality('pointer');\n }\n };\n\n const getSegmentedControlsItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'fondue-segmented-controls-item-icon';\n case typeof item.value === 'string':\n return 'fondue-segmented-controls-item-text';\n default:\n return 'fondue-segmented-controls-item-number';\n }\n };\n\n return (\n <div key={item.id} className={merge(['tw-relative', isFocusVisible && FOCUS_STYLE])}>\n <div\n // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n // https://github.com/adobe/react-spectrum/issues/2380\n role=\"none\"\n onClick={handleMockLabelClick}\n data-test-id={getSegmentedControlsItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n isActive && !disabled ? 'tw-text-black' : 'tw-text-black-80',\n !disabled ? 'hover:tw-text-black hover:tw-cursor-pointer' : '',\n ])}\n >\n <VisuallyHidden>\n <input {...inputProps} {...focusProps} data-test-id=\"fondue-segmented-controls-input\" ref={ref} />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && (\n <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n {item.icon}\n </span>\n )}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </div>\n );\n};\n\nexport const SegmentedControls: FC<SegmentedControlsProps> = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'SegmentedControls',\n disabled = false,\n}) => {\n const id = useMemoizedId(propId);\n const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n const radioGroupState = useRadioGroupState(groupProps);\n const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n const itemElements = useMemo(() => {\n return items.map((item) => (\n <SegmentedControlsItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n key={`fondue-segmented-controls-${id}-item-${item.id}`}\n />\n ));\n }, [items, id, disabled, radioGroupState]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n\n return (\n <div className=\"tw-flex\">\n <fieldset\n {...radioGroupProps}\n data-test-id=\"fondue-segmented-controls\"\n className=\"tw-relative tw-h-9 tw-w-full tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly tw-p-0 tw-border tw-border-black-20 tw-m-0 tw-bg-black-0 tw-rounded tw-font-sans tw-text-s tw-select-none\"\n >\n <motion.div\n aria-hidden=\"true\"\n // div border is not included in width so it must be subtracted from translation.\n animate={{ x: `calc(${100 * selectedIndex}% - ${2 * selectedIndex}px)` }}\n initial={false}\n transition={{ type: 'tween', duration: 0.3 }}\n style={{\n width: `${100 / items.length}%`,\n }}\n hidden={!activeItemId}\n className={merge([\n 'tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n disabled\n ? 'tw-border-line-x-strong tw-border-opacity-30 tw-bg-black-0'\n : 'tw-border-black tw-bg-white',\n ])}\n />\n {itemElements}\n </fieldset>\n </div>\n );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","props","id","disabled","radioGroupState","ref","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","React","merge","FOCUS_STYLE","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemElements","useMemo","selectedIndex","motion"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SegmentedControls';
|
|
@@ -35,7 +35,7 @@ export * from './OverflowMenu';
|
|
|
35
35
|
export * from './RadioPill';
|
|
36
36
|
export * from './RichTextEditor';
|
|
37
37
|
export * from './ScrollWrapper';
|
|
38
|
-
export * from './
|
|
38
|
+
export * from './SegmentedControls';
|
|
39
39
|
export * from './Switch';
|
|
40
40
|
export * from './Table';
|
|
41
41
|
export * from './Tabs';
|