@stack-spot/citric-react 0.14.2 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/CheckboxGroup.d.ts +15 -1
  2. package/dist/components/CheckboxGroup.d.ts.map +1 -1
  3. package/dist/components/CheckboxGroup.js +3 -2
  4. package/dist/components/CheckboxGroup.js.map +1 -1
  5. package/dist/components/RadioGroup.d.ts +15 -1
  6. package/dist/components/RadioGroup.d.ts.map +1 -1
  7. package/dist/components/RadioGroup.js +3 -2
  8. package/dist/components/RadioGroup.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/CheckboxGroup.tsx +25 -9
  11. package/src/components/RadioGroup.tsx +25 -9
package/dist/components/CheckboxGroup.d.ts CHANGED
@@ -24,6 +24,9 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
24
24
  onChange: (value: T[]) => void;
25
25
  /**
26
26
  * A function to render the item label.
27
+ *
28
+ * Attention: ignored if `renderItem` is set.
29
+ *
27
30
  * @example
28
31
  * `(option) => option.name`
29
32
  * @default "the item's toString() result."
@@ -31,6 +34,17 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
31
34
  * @returns a React Node to render.
32
35
  */
33
36
  renderLabel?: (option: T) => React.ReactNode;
37
+ /**
38
+ * A function to render the item with the checkbox. When set, `renderLabel` is ignored.
39
+ * @example
40
+ * ```
41
+ * (checkbox, option) => <label>{checkbox} {option.name}</label>
42
+ * ```
43
+ * @param checkbox the checkbox.
44
+ * @param option the current item.
45
+ * @returns a React Node to render.
46
+ */
47
+ renderItem?: (checkbox: React.ReactElement, option: T) => React.ReactNode;
34
48
  /**
35
49
  * A function to render the item value, a unique identifier for the option.
36
50
  * @example
@@ -49,7 +63,7 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
49
63
  isDisabled?: (option: T) => boolean;
50
64
  }
51
65
  export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>;
52
- declare function _CheckboxGroup<T>({ appearance, name, value, options, onChange, renderLabel, renderKey, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
66
+ declare function _CheckboxGroup<T>({ appearance, name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
53
67
  export declare const CheckboxGroup: typeof _CheckboxGroup;
54
68
  export {};
55
69
  //# sourceMappingURL=CheckboxGroup.d.ts.map
package/dist/components/CheckboxGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAA;AAEjI,iBAAS,cAAc,CAAC,CAAC,EAAE,EACzB,UAAuB,EACvB,IAAI,EACJ,KAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAqBvB;AAED,eAAO,MAAM,aAAa,uBAA0B,CAAA"}
1
+ {"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAA;AAEjI,iBAAS,cAAc,CAAC,CAAC,EAAE,EACzB,UAAuB,EACvB,IAAI,EACJ,KAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAsBvB;AAED,eAAO,MAAM,aAAa,uBAA0B,CAAA"}
package/dist/components/CheckboxGroup.js CHANGED
@@ -5,12 +5,13 @@ import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
5
5
  import { withRef } from '../utils/react.js';
6
6
  import { CitricComponent } from './CitricComponent.js';
7
7
  import { Column } from './layout.js';
8
- function _CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, isDisabled, colorScheme, style, ...props }) {
8
+ function _CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
9
9
  const items = useMemo(() => {
10
10
  const valueKeys = value.map(renderKey);
11
11
  return options.map((o) => {
12
12
  const key = renderKey(o);
13
- return (_jsxs(CitricComponent, { tag: "label", component: `${appearance}-row`, colorScheme: colorScheme, children: [_jsx("input", { type: "checkbox", name: name, value: key, checked: value.includes(o) || (!isNil(key) && valueKeys.includes(key)), onChange: (e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? [])), disabled: isDisabled?.(o) }), renderLabel(o)] }, key));
13
+ const checkbox = _jsx("input", { type: "checkbox", name: name, value: key, checked: value.includes(o) || (!isNil(key) && valueKeys.includes(key)), onChange: (e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? [])), disabled: isDisabled?.(o) });
14
+ return renderItem ? renderItem(checkbox, o) : (_jsxs(CitricComponent, { tag: "label", component: `${appearance}-row`, colorScheme: colorScheme, children: [checkbox, renderLabel(o)] }, key));
14
15
  });
15
16
  }, [options, value, name, colorScheme, appearance]);
16
17
  return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
package/dist/components/CheckboxGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,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;AAsDjC,SAAS,cAAc,CAAI,EACzB,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACc;IACtB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACtC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,OAAO,CACL,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC7F,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EACtE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAChH,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,EACD,WAAW,CAAC,CAAC,CAAC,KATiD,GAAG,CAUnD,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAA;IACnD,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA"}
1
+ {"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,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;AAoEjC,SAAS,cAAc,CAAI,EACzB,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACc;IACtB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACtC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,QAAQ,GAAG,gBACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EACtE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAChH,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5C,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC5F,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,KAFiD,GAAG,CAGnD,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAA;IACnD,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA"}
package/dist/components/RadioGroup.d.ts CHANGED
@@ -19,6 +19,9 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
19
19
  onChange?: (value: T) => void;
20
20
  /**
21
21
  * A function to render the item label.
22
+ *
23
+ * Attention: ignored if `renderItem` is set.
24
+ *
22
25
  * @example
23
26
  * `(option) => option.name`
24
27
  * @default "the item's toString() result."
@@ -26,6 +29,17 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
26
29
  * @returns a React Node to render.
27
30
  */
28
31
  renderLabel?: (option: T) => React.ReactNode;
32
+ /**
33
+ * A function to render the item with the radio button. When set, `renderLabel` is ignored.
34
+ * @example
35
+ * ```
36
+ * (radio, option) => <label>{radio} {option.name}</label>
37
+ * ```
38
+ * @param radio the radio button.
39
+ * @param option the current item.
40
+ * @returns a React Node to render.
41
+ */
42
+ renderItem?: (radio: React.ReactElement, option: T) => React.ReactNode;
29
43
  /**
30
44
  * A function to render the item value, a unique identifier for the option.
31
45
  * @example
@@ -44,7 +58,7 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
44
58
  isDisabled?: (option: T) => boolean;
45
59
  }
46
60
  export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>;
47
- declare function _RadioGroup<T>({ name, value, options, onChange, renderLabel, renderKey, isDisabled, colorScheme, style, ...props }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
61
+ declare function _RadioGroup<T>({ name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
48
62
  export declare const RadioGroup: typeof _RadioGroup;
49
63
  export {};
50
64
  //# sourceMappingURL=RadioGroup.d.ts.map
package/dist/components/RadioGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAE3H,iBAAS,WAAW,CAAC,CAAC,EAAE,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAqBpB;AAED,eAAO,MAAM,UAAU,oBAAuB,CAAA"}
1
+ {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAE3H,iBAAS,WAAW,CAAC,CAAC,EAAE,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAsBpB;AAED,eAAO,MAAM,UAAU,oBAAuB,CAAA"}
package/dist/components/RadioGroup.js CHANGED
@@ -5,12 +5,13 @@ import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
5
5
  import { withRef } from '../utils/react.js';
6
6
  import { CitricComponent } from './CitricComponent.js';
7
7
  import { Column } from './layout.js';
8
- function _RadioGroup({ name, value, options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, isDisabled, colorScheme, style, ...props }) {
8
+ function _RadioGroup({ name, value, options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
9
9
  const items = useMemo(() => {
10
10
  const valueKey = value ? renderKey(value) : undefined;
11
11
  return options.map((o) => {
12
12
  const key = renderKey(o);
13
- return (_jsxs(CitricComponent, { tag: "label", component: "radio-row", colorScheme: colorScheme, children: [_jsx("input", { type: "radio", name: name, value: key, checked: value === o || (!isNil(key) && valueKey === key), onChange: () => onChange?.(o), disabled: isDisabled?.(o) }), renderLabel(o)] }, key));
13
+ const radio = _jsx("input", { type: "radio", name: name, value: key, checked: value === o || (!isNil(key) && valueKey === key), onChange: () => onChange?.(o), disabled: isDisabled?.(o) });
14
+ return renderItem ? renderItem(radio, o) : (_jsxs(CitricComponent, { tag: "label", component: "radio-row", colorScheme: colorScheme, children: [radio, renderLabel(o)] }, key));
14
15
  });
15
16
  }, [options, value, name, colorScheme]);
16
17
  return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
package/dist/components/RadioGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,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;AAiDjC,SAAS,WAAW,CAAI,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,OAAO,CACL,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAW,WAAW,EAAE,WAAW,aACnF,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,EACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,EACD,WAAW,CAAC,CAAC,CAAC,KATuC,GAAG,CAUzC,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvC,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA"}
1
+ {"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,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;AA+DjC,SAAS,WAAW,CAAI,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,KAAK,GAAG,gBACZ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,EACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACzC,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAW,WAAW,EAAE,WAAW,aAClF,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,KAFuC,GAAG,CAGzC,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvC,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.14.2",
3
+ "version": "0.15.0",
4
4
  "author": "StackSpot",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/CheckboxGroup.tsx CHANGED
@@ -31,6 +31,9 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
31
31
  onChange: (value: T[]) => void,
32
32
  /**
33
33
  * A function to render the item label.
34
+ *
35
+ * Attention: ignored if `renderItem` is set.
36
+ *
34
37
  * @example
35
38
  * `(option) => option.name`
36
39
  * @default "the item's toString() result."
@@ -38,6 +41,17 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
38
41
  * @returns a React Node to render.
39
42
  */
40
43
  renderLabel?: (option: T) => React.ReactNode,
44
+ /**
45
+ * A function to render the item with the checkbox. When set, `renderLabel` is ignored.
46
+ * @example
47
+ * ```
48
+ * (checkbox, option) => <label>{checkbox} {option.name}</label>
49
+ * ```
50
+ * @param checkbox the checkbox.
51
+ * @param option the current item.
52
+ * @returns a React Node to render.
53
+ */
54
+ renderItem?: (checkbox: React.ReactElement, option: T) => React.ReactNode,
41
55
  /**
42
56
  * A function to render the item value, a unique identifier for the option.
43
57
  * @example
@@ -66,6 +80,7 @@ function _CheckboxGroup<T>({
66
80
  onChange,
67
81
  renderLabel = defaultRenderLabel,
68
82
  renderKey = defaultRenderKey,
83
+ renderItem,
69
84
  isDisabled,
70
85
  colorScheme,
71
86
  style,
@@ -75,16 +90,17 @@ function _CheckboxGroup<T>({
75
90
  const valueKeys = value.map(renderKey)
76
91
  return options.map((o) => {
77
92
  const key = renderKey(o)
78
- return (
93
+ const checkbox = <input
94
+ type="checkbox"
95
+ name={name}
96
+ value={key}
97
+ checked={value.includes(o) || (!isNil(key) && valueKeys.includes(key))}
98
+ onChange={(e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? []))}
99
+ disabled={isDisabled?.(o)}
100
+ />
101
+ return renderItem ? renderItem(checkbox, o) : (
79
102
  <CitricComponent tag="label" component={`${appearance}-row`} key={key} colorScheme={colorScheme}>
80
- <input
81
- type="checkbox"
82
- name={name}
83
- value={key}
84
- checked={value.includes(o) || (!isNil(key) && valueKeys.includes(key))}
85
- onChange={(e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? []))}
86
- disabled={isDisabled?.(o)}
87
- />
103
+ {checkbox}
88
104
  {renderLabel(o)}
89
105
  </CitricComponent>
90
106
  )
package/src/components/RadioGroup.tsx CHANGED
@@ -26,6 +26,9 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
26
26
  onChange?: (value: T) => void,
27
27
  /**
28
28
  * A function to render the item label.
29
+ *
30
+ * Attention: ignored if `renderItem` is set.
31
+ *
29
32
  * @example
30
33
  * `(option) => option.name`
31
34
  * @default "the item's toString() result."
@@ -33,6 +36,17 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
33
36
  * @returns a React Node to render.
34
37
  */
35
38
  renderLabel?: (option: T) => React.ReactNode,
39
+ /**
40
+ * A function to render the item with the radio button. When set, `renderLabel` is ignored.
41
+ * @example
42
+ * ```
43
+ * (radio, option) => <label>{radio} {option.name}</label>
44
+ * ```
45
+ * @param radio the radio button.
46
+ * @param option the current item.
47
+ * @returns a React Node to render.
48
+ */
49
+ renderItem?: (radio: React.ReactElement, option: T) => React.ReactNode,
36
50
  /**
37
51
  * A function to render the item value, a unique identifier for the option.
38
52
  * @example
@@ -60,6 +74,7 @@ function _RadioGroup<T>({
60
74
  onChange,
61
75
  renderLabel = defaultRenderLabel,
62
76
  renderKey = defaultRenderKey,
77
+ renderItem,
63
78
  isDisabled,
64
79
  colorScheme,
65
80
  style,
@@ -69,16 +84,17 @@ function _RadioGroup<T>({
69
84
  const valueKey = value ? renderKey(value) : undefined
70
85
  return options.map((o) => {
71
86
  const key = renderKey(o)
72
- return (
87
+ const radio = <input
88
+ type="radio"
89
+ name={name}
90
+ value={key}
91
+ checked={value === o || (!isNil(key) && valueKey === key)}
92
+ onChange={() => onChange?.(o)}
93
+ disabled={isDisabled?.(o)}
94
+ />
95
+ return renderItem ? renderItem(radio, o) : (
73
96
  <CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>
74
- <input
75
- type="radio"
76
- name={name}
77
- value={key}
78
- checked={value === o || (!isNil(key) && valueKey === key)}
79
- onChange={() => onChange?.(o)}
80
- disabled={isDisabled?.(o)}
81
- />
97
+ {radio}
82
98
  {renderLabel(o)}
83
99
  </CitricComponent>
84
100
  )