@stack-spot/citric-react 0.41.3 → 0.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/citric.css
CHANGED
|
@@ -1206,8 +1206,20 @@ input[type="range"][data-citric="slider"] {
|
|
|
1206
1206
|
opacity: 0.6;
|
|
1207
1207
|
pointer-events: none;
|
|
1208
1208
|
}
|
|
1209
|
+
|
|
1210
|
+
&.button > .option {
|
|
1211
|
+
width: auto;
|
|
1212
|
+
height: auto;
|
|
1213
|
+
padding: 8px 12px;
|
|
1214
|
+
gap: var(--spacing-3);
|
|
1215
|
+
flex-direction: row;
|
|
1216
|
+
.title {
|
|
1217
|
+
font: var(--font-body2);
|
|
1218
|
+
}
|
|
1219
|
+
}
|
|
1209
1220
|
}
|
|
1210
1221
|
|
|
1222
|
+
|
|
1211
1223
|
/* Parts of the select css is in input.css. */
|
|
1212
1224
|
|
|
1213
1225
|
[data-citric="rich-select"],
|
|
@@ -47,6 +47,14 @@ export interface CommonSelectBoxProps<T> extends WithColorPalette, WithColorSche
|
|
|
47
47
|
* @default 300
|
|
48
48
|
*/
|
|
49
49
|
bgLevel?: 300 | 400 | 500 | 600 | 700;
|
|
50
|
+
/**
|
|
51
|
+
* The appearance of each option.
|
|
52
|
+
*
|
|
53
|
+
* Attention: the appearance "button" hides the description text.
|
|
54
|
+
*
|
|
55
|
+
* @default 'box'
|
|
56
|
+
*/
|
|
57
|
+
appearance?: 'box' | 'button';
|
|
50
58
|
}
|
|
51
59
|
interface CheckboxProps<T> extends CommonSelectBoxProps<T> {
|
|
52
60
|
multiple: true;
|
|
@@ -90,6 +98,6 @@ export type SelectBoxProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChan
|
|
|
90
98
|
* />
|
|
91
99
|
* ```
|
|
92
100
|
*/
|
|
93
|
-
export declare const SelectBox: <T>({ multiple, name, value, options, onChange, renderLabel, renderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, ...props }: SelectBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
101
|
+
export declare const SelectBox: <T>({ multiple, name, value, options, onChange, renderLabel, renderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, appearance, ...props }: SelectBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
94
102
|
export {};
|
|
95
103
|
//# sourceMappingURL=SelectBox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.d.ts","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM5D,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IAChF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,cAAc,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectBox.d.ts","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM5D,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IAChF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,cAAc,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACtC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC/B;AAED,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACxD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACjC;AAED,UAAU,UAAU,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAEpE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAEzH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS,GACD,CAAC,2KAiBjB,cAAc,CAAC,CAAC,CAAC,4CAiDrB,CAAA"}
|
|
@@ -35,23 +35,24 @@ import { layout } from './layout.js';
|
|
|
35
35
|
* />
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
38
|
-
export const SelectBox = withRef(function SelectBox({ multiple, name, value, options, onChange, renderLabel = o => ({ title: defaultRenderLabel(o) }), renderKey = defaultRenderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, ...props }) {
|
|
38
|
+
export const SelectBox = withRef(function SelectBox({ multiple, name, value, options, onChange, renderLabel = o => ({ title: defaultRenderLabel(o) }), renderKey = defaultRenderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, appearance, ...props }) {
|
|
39
39
|
const items = useMemo(() => {
|
|
40
40
|
const valueAsArray = value ? (Array.isArray(value) ? value : [value]) : [];
|
|
41
41
|
const valueKeys = valueAsArray.map(renderKey);
|
|
42
42
|
return options.map((o) => {
|
|
43
43
|
const key = renderKey(o);
|
|
44
44
|
const label = renderLabel(o);
|
|
45
|
-
|
|
45
|
+
const checked = value ? valueKeys.includes(key) : undefined;
|
|
46
|
+
return (_jsxs(CitricComponent, { tag: "label", component: "select-box", className: listToClass([bgLevel && `bg-${bgLevel}`, appearance]), children: [_jsx("input", { type: multiple ? 'checkbox' : 'radio', name: name, value: key, checked: checked, disabled: isDisabled?.(o), onChange: onChange ? (e) => {
|
|
46
47
|
if (multiple) {
|
|
47
48
|
onChange(e.target.checked ? [...valueAsArray, o] : valueAsArray.filter(v => renderKey(v) !== key));
|
|
48
49
|
}
|
|
49
50
|
else {
|
|
50
51
|
onChange(o);
|
|
51
52
|
}
|
|
52
|
-
} : undefined }), _jsxs("div", { className: "option", children: [label.icon, _jsx("p", { className: "title", children: label.title }), label.description && _jsx("p", { className: "description", children: label.description })] })] }, key));
|
|
53
|
+
} : undefined }, `${key}-${checked}`), _jsxs("div", { className: "option", children: [label.icon, _jsx("p", { className: "title", children: label.title }), label.description && appearance !== 'button' && _jsx("p", { className: "description", children: label.description })] })] }, key));
|
|
53
54
|
});
|
|
54
|
-
}, [options, value, name, multiple, bgLevel]);
|
|
55
|
+
}, [options, value, name, multiple, bgLevel, appearance]);
|
|
55
56
|
return (_jsx("div", { "data-color-palette": colorPalette, "data-color-scheme": colorScheme, className: listToClass([className, direction === 'vertical' ? layout.column : layout.row]), style: { gap: '5px', ...style }, ...props, children: items }));
|
|
56
57
|
});
|
|
57
58
|
//# sourceMappingURL=SelectBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -55,6 +55,14 @@ export interface CommonSelectBoxProps<T> extends WithColorPalette, WithColorSche
|
|
|
55
55
|
* @default 300
|
|
56
56
|
*/
|
|
57
57
|
bgLevel?: 300 | 400 | 500 | 600 | 700,
|
|
58
|
+
/**
|
|
59
|
+
* The appearance of each option.
|
|
60
|
+
*
|
|
61
|
+
* Attention: the appearance "button" hides the description text.
|
|
62
|
+
*
|
|
63
|
+
* @default 'box'
|
|
64
|
+
*/
|
|
65
|
+
appearance?: 'box' | 'button',
|
|
58
66
|
}
|
|
59
67
|
|
|
60
68
|
interface CheckboxProps<T> extends CommonSelectBoxProps<T> {
|
|
@@ -119,6 +127,7 @@ export const SelectBox = withRef(
|
|
|
119
127
|
bgLevel,
|
|
120
128
|
colorPalette,
|
|
121
129
|
colorScheme,
|
|
130
|
+
appearance,
|
|
122
131
|
...props
|
|
123
132
|
}: SelectBoxProps<T>) {
|
|
124
133
|
const items = useMemo(() => {
|
|
@@ -127,13 +136,18 @@ export const SelectBox = withRef(
|
|
|
127
136
|
return options.map((o) => {
|
|
128
137
|
const key = renderKey(o)
|
|
129
138
|
const label = renderLabel(o)
|
|
139
|
+
const checked = value ? valueKeys.includes(key) : undefined
|
|
130
140
|
return (
|
|
131
|
-
<CitricComponent key={key} tag="label" component="select-box" className={bgLevel
|
|
141
|
+
<CitricComponent key={key} tag="label" component="select-box" className={listToClass([bgLevel && `bg-${bgLevel}`, appearance])}>
|
|
132
142
|
<input
|
|
143
|
+
// Fixes a super weird bug that happens only when rendering this component in an external project (not in Storybook). The bug
|
|
144
|
+
// prevents the initially checked option from ever being unchecked. By attaching this key to the checked attribute, we can
|
|
145
|
+
// guarantee this input will always be destroyed and reconstructed whenever the value changes.
|
|
146
|
+
key={`${key}-${checked}`}
|
|
133
147
|
type={multiple ? 'checkbox' : 'radio'}
|
|
134
148
|
name={name}
|
|
135
149
|
value={key}
|
|
136
|
-
checked={
|
|
150
|
+
checked={checked}
|
|
137
151
|
disabled={isDisabled?.(o)}
|
|
138
152
|
onChange={onChange ? (e) => {
|
|
139
153
|
if (multiple) {
|
|
@@ -146,12 +160,12 @@ export const SelectBox = withRef(
|
|
|
146
160
|
<div className="option">
|
|
147
161
|
{label.icon}
|
|
148
162
|
<p className="title">{label.title}</p>
|
|
149
|
-
{label.description && <p className="description">{label.description}</p>}
|
|
163
|
+
{label.description && appearance !== 'button' && <p className="description">{label.description}</p>}
|
|
150
164
|
</div>
|
|
151
165
|
</CitricComponent>
|
|
152
166
|
)
|
|
153
167
|
})
|
|
154
|
-
}, [options, value, name, multiple, bgLevel])
|
|
168
|
+
}, [options, value, name, multiple, bgLevel, appearance])
|
|
155
169
|
return (
|
|
156
170
|
<div
|
|
157
171
|
data-color-palette={colorPalette}
|