@ndlib/component-library 0.0.86 → 0.0.87

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 (5) hide show
  1. package/dist/components/elements/Fields/CheckboxGroup/index.d.ts +9 -9
  2. package/dist/components/elements/Fields/CheckboxGroup/index.js +8 -8
  3. package/dist/components/elements/Fields/RadioGroup/index.d.ts +10 -9
  4. package/dist/components/elements/Fields/RadioGroup/index.js +8 -8
  5. package/package.json +1 -1
package/dist/components/elements/Fields/CheckboxGroup/index.d.ts CHANGED
@@ -1,16 +1,16 @@
1
- import React from 'react';
2
1
  import { StyledElementProps, StylesProp } from '../../../../theme';
3
2
  import { Key } from '../option';
4
- type Option = {
5
- value: Key;
3
+ type Option<K extends Key = string> = {
4
+ value: K;
6
5
  label: string;
7
6
  };
8
- type CheckboxGroupProps = StyledElementProps<HTMLDivElement, {
9
- onChange: (value: Set<Key>) => void;
10
- options: Option[];
11
- checkedOptions?: Set<Key>;
12
- columnStyles: StylesProp;
7
+ type CheckboxGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
8
+ onChange: (value: Set<K>) => void;
9
+ options: Option<K>[];
10
+ checkedOptions?: Set<K>;
11
+ columnStyles?: StylesProp;
12
+ rowStyles?: StylesProp;
13
13
  columns?: number;
14
14
  }, string>;
15
- export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
15
+ export declare function CheckboxGroup<K extends Key>({ options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange, ...rest }: CheckboxGroupProps<K>): import("react/jsx-runtime").JSX.Element;
16
16
  export {};
package/dist/components/elements/Fields/CheckboxGroup/index.js CHANGED
@@ -18,8 +18,8 @@ import { Group } from '../../Group';
18
18
  import { GROUP_TYPE } from '../../Group';
19
19
  import { Column } from '../../layout/Column';
20
20
  import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
21
- export const CheckboxGroup = (_a) => {
22
- var { options, checkedOptions, columns: columnsProp, columnStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "onChange"]);
21
+ export function CheckboxGroup(_a) {
22
+ var { options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "rowStyles", "onChange"]);
23
23
  const columns = columnsProp || 1;
24
24
  const optionsByColumn = useMemo(() => {
25
25
  const optionsByColumn = [];
@@ -33,10 +33,7 @@ export const CheckboxGroup = (_a) => {
33
33
  }
34
34
  return optionsByColumn;
35
35
  }, [options, columns]);
36
- return (_jsx(Row, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(Column, Object.assign({ grow: 1, sx: Object.assign({ mr: 4 }, columnStyles) }, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
37
- mb: 2,
38
- alignItems: 'center',
39
- } }, { children: [_jsx(Checkbox, { onChange: (checked) => {
36
+ return (_jsx(Row, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(Column, Object.assign({ grow: 1, sx: Object.assign({ mr: 4 }, columnStyles) }, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles) }, { children: [_jsx(Checkbox, { onChange: (checked) => {
40
37
  const updatedSet = new Set(checkedOptions || []);
41
38
  if (checked) {
42
39
  updatedSet.add(option.value);
@@ -45,5 +42,8 @@ export const CheckboxGroup = (_a) => {
45
42
  updatedSet.delete(option.value);
46
43
  }
47
44
  onChange(updatedSet);
48
- }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
49
- };
45
+ }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: {
46
+ mr: 2,
47
+ flexShrink: 0,
48
+ } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
49
+ }
package/dist/components/elements/Fields/RadioGroup/index.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import React from 'react';
2
- import { StyledElementProps } from '../../../../theme';
1
+ import { StyledElementProps, StylesProp } from '../../../../theme';
3
2
  import { Key } from '../option';
4
- type Option = {
5
- value: Key;
3
+ type Option<K extends Key = string> = {
4
+ value: K;
6
5
  label: string;
7
6
  };
8
- type RadioGroupProps = StyledElementProps<HTMLDivElement, {
9
- onChange: (value: Key) => void;
10
- options: Option[];
11
- checked?: Key;
7
+ type RadioGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
8
+ onChange: (value: K) => void;
9
+ options: Option<K>[];
10
+ columnStyles?: StylesProp;
11
+ rowStyles?: StylesProp;
12
+ checked?: K;
12
13
  }, string>;
13
- export declare const RadioGroup: React.FC<RadioGroupProps>;
14
+ export declare function RadioGroup<K extends Key = string>({ options, checked, onChange, columnStyles, rowStyles, ...rest }: RadioGroupProps<K>): import("react/jsx-runtime").JSX.Element;
14
15
  export {};
package/dist/components/elements/Fields/RadioGroup/index.js CHANGED
@@ -17,12 +17,12 @@ import { GROUP_TYPE } from '../../Group';
17
17
  import { Column } from '../../layout/Column';
18
18
  import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
19
19
  import { Radio } from '../Radio';
20
- export const RadioGroup = (_a) => {
21
- var { options, checked, onChange } = _a, rest = __rest(_a, ["options", "checked", "onChange"]);
22
- return (_jsx(Column, Object.assign({}, rest, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
23
- mb: 2,
24
- alignItems: 'center',
25
- } }, { children: [_jsx(Radio, { onChange: () => {
20
+ export function RadioGroup(_a) {
21
+ var { options, checked, onChange, columnStyles, rowStyles } = _a, rest = __rest(_a, ["options", "checked", "onChange", "columnStyles", "rowStyles"]);
22
+ return (_jsx(Column, Object.assign({}, rest, { sx: columnStyles }, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles) }, { children: [_jsx(Radio, { onChange: () => {
26
23
  onChange(option.value);
27
- }, checked: checked === option.value, id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
28
- };
24
+ }, checked: checked === option.value, id: labelTargetId, sx: {
25
+ mr: 2,
26
+ flexShrink: 0,
27
+ } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
28
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndlib/component-library",
3
- "version": "0.0.86",
3
+ "version": "0.0.87",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "files": [