@frontify/fondue 12.0.0-beta.258 → 12.0.0-beta.259
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.
|
@@ -8,23 +8,18 @@ export type Columns = 1 | 2 | 3 | 4;
|
|
|
8
8
|
export type CheckboxValue = Omit<CheckboxProps, 'onChange' | 'groupInputProps' | 'value'> & {
|
|
9
9
|
value: string;
|
|
10
10
|
};
|
|
11
|
-
type ChecklistBase = {
|
|
11
|
+
export type ChecklistBase = {
|
|
12
12
|
checkboxes: CheckboxValue[];
|
|
13
13
|
setActiveValues: (value: string[]) => void;
|
|
14
14
|
activeValues?: string[];
|
|
15
15
|
ariaLabel?: string;
|
|
16
16
|
'data-test-id'?: string;
|
|
17
17
|
};
|
|
18
|
-
type
|
|
19
|
-
direction: ChecklistDirection.Vertical;
|
|
18
|
+
export type ChecklistProps = ChecklistBase & {
|
|
19
|
+
direction: ChecklistDirection.Vertical | ChecklistDirection.Horizontal;
|
|
20
20
|
columns?: Columns;
|
|
21
21
|
};
|
|
22
|
-
type ChecklistHorizontal = ChecklistBase & {
|
|
23
|
-
direction: ChecklistDirection.Horizontal;
|
|
24
|
-
};
|
|
25
|
-
export type ChecklistProps = ChecklistVertical | ChecklistHorizontal;
|
|
26
22
|
export declare const Checklist: {
|
|
27
23
|
({ checkboxes, setActiveValues, ariaLabel, activeValues, direction, "data-test-id": dataTestId, ...props }: ChecklistProps): JSX.Element;
|
|
28
24
|
displayName: string;
|
|
29
25
|
};
|
|
30
|
-
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checklist.es.js","sources":["../../../src/components/Checklist/Checklist.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checkbox, CheckboxProps, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';\nimport { CheckboxGroupState, useCheckboxGroupState } from '@react-stately/checkbox';\nimport { merge } from '@utilities/merge';\nimport React, { useEffect, useRef, useState } from 'react';\n\nexport enum ChecklistDirection {\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\nexport type Columns = 1 | 2 | 3 | 4;\n\nconst columnsStyle: Record<Columns, string> = {\n 1: 'tw-grid-cols-1',\n 2: 'tw-grid-cols-2',\n 3: 'tw-grid-cols-3',\n 4: 'tw-grid-cols-4',\n};\n\nexport type CheckboxValue = Omit<CheckboxProps, 'onChange' | 'groupInputProps' | 'value'> & { value: string };\n\
|
|
1
|
+
{"version":3,"file":"Checklist.es.js","sources":["../../../src/components/Checklist/Checklist.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checkbox, CheckboxProps, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';\nimport { CheckboxGroupState, useCheckboxGroupState } from '@react-stately/checkbox';\nimport { merge } from '@utilities/merge';\nimport React, { useEffect, useRef, useState } from 'react';\n\nexport enum ChecklistDirection {\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\nexport type Columns = 1 | 2 | 3 | 4;\n\nconst columnsStyle: Record<Columns, string> = {\n 1: 'tw-grid-cols-1',\n 2: 'tw-grid-cols-2',\n 3: 'tw-grid-cols-3',\n 4: 'tw-grid-cols-4',\n};\n\nexport type CheckboxValue = Omit<CheckboxProps, 'onChange' | 'groupInputProps' | 'value'> & { value: string };\n\nexport type ChecklistBase = {\n checkboxes: CheckboxValue[];\n setActiveValues: (value: string[]) => void;\n activeValues?: string[];\n ariaLabel?: string;\n 'data-test-id'?: string;\n};\n\nexport type ChecklistProps = ChecklistBase & {\n direction: ChecklistDirection.Vertical | ChecklistDirection.Horizontal;\n columns?: Columns;\n};\n\ntype ChecklistItemProps = { checkbox: CheckboxValue; state: CheckboxGroupState };\n\nconst ChecklistItem = ({ checkbox, state }: ChecklistItemProps) => {\n const ref = useRef<HTMLInputElement | null>(null);\n const { value, disabled, label, 'aria-label': checkboxAriaLabel, state: checkboxState } = checkbox;\n const [checkState, setCheckState] = useState(checkboxState);\n const isSelected = state.isSelected(value);\n const { inputProps } = useCheckboxGroupItem(\n { value, isDisabled: disabled, 'aria-label': checkboxAriaLabel || label },\n state,\n ref,\n );\n\n useEffect(() => {\n if (checkState === CheckboxState.Mixed && !isSelected) {\n setCheckState(CheckboxState.Mixed);\n } else {\n setCheckState(isSelected ? CheckboxState.Checked : CheckboxState.Unchecked);\n }\n }, [checkState, isSelected]);\n\n return <Checkbox {...checkbox} state={checkState} groupInputProps={inputProps} ref={ref} />;\n};\n\nconst getLastItemColumnSpan = (items: CheckboxValue[], columns: number) => {\n if (!columns || columns <= 1) {\n return '';\n }\n\n const gridSpan = 'auto / span';\n const spanItems = items.length % columns;\n\n if (spanItems === 0) {\n return '';\n }\n\n return `${gridSpan} ${columns - spanItems + 1}`;\n};\n\nexport const Checklist = ({\n checkboxes,\n setActiveValues,\n ariaLabel = 'Checklist',\n activeValues = [],\n direction = ChecklistDirection.Horizontal,\n 'data-test-id': dataTestId = 'checklist',\n ...props\n}: ChecklistProps) => {\n const listContainerRef = useRef<HTMLUListElement | null>(null);\n const state = useCheckboxGroupState({\n value: activeValues,\n onChange: setActiveValues,\n });\n const { groupProps } = useCheckboxGroup(\n {\n 'aria-label': ariaLabel,\n },\n state,\n );\n\n const columns = ('columns' in props && props.columns) || 1;\n\n return (\n <ul\n {...groupProps}\n data-test-id={dataTestId}\n className={merge([\n direction === ChecklistDirection.Horizontal\n ? 'tw-flex tw-flex-row tw-gap-12'\n : `tw-grid tw-gap-4 ${columnsStyle[columns]}`,\n ])}\n ref={listContainerRef}\n >\n {checkboxes.map((checkbox, index) => {\n return (\n <li\n key={checkbox.value}\n style={{\n maxWidth: listContainerRef?.current?.getBoundingClientRect().width,\n gridColumn:\n index === checkboxes.length - 1 && direction === ChecklistDirection.Vertical\n ? getLastItemColumnSpan(checkboxes, columns)\n : undefined,\n }}\n >\n <ChecklistItem checkbox={checkbox} state={state} />\n </li>\n );\n })}\n </ul>\n );\n};\nChecklist.displayName = 'FondueChecklist';\n"],"names":["ChecklistDirection","columnsStyle","ChecklistItem","checkbox","state","ref","useRef","value","disabled","label","checkboxAriaLabel","checkboxState","checkState","setCheckState","useState","isSelected","inputProps","useCheckboxGroupItem","useEffect","CheckboxState","React","Checkbox","getLastItemColumnSpan","items","columns","gridSpan","spanItems","Checklist","checkboxes","setActiveValues","ariaLabel","activeValues","direction","dataTestId","props","listContainerRef","useCheckboxGroupState","groupProps","useCheckboxGroup","merge","index","_a"],"mappings":";;;;;AAQY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,WAAW,YAFHA,IAAAA,KAAA,CAAA,CAAA;AAOZ,MAAMC,IAAwC;AAAA,EAC1C,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACP,GAmBMC,IAAgB,CAAC,EAAE,UAAAC,GAAU,OAAAC,QAAgC;AACzD,QAAAC,IAAMC,EAAgC,IAAI,GAC1C,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,cAAcC,GAAmB,OAAOC,EAAkB,IAAAR,GACpF,CAACS,GAAYC,CAAa,IAAIC,EAASH,CAAa,GACpDI,IAAaX,EAAM,WAAWG,CAAK,GACnC,EAAE,YAAAS,MAAeC;AAAA,IACnB,EAAE,OAAAV,GAAO,YAAYC,GAAU,cAAcE,KAAqBD,EAAM;AAAA,IACxEL;AAAA,IACAC;AAAA,EAAA;AAGJ,SAAAa,EAAU,MAAM;AACZ,IAAIN,MAAeO,EAAc,SAAS,CAACJ,IACvCF,EAAcM,EAAc,KAAK,IAEjCN,EAAcE,IAAaI,EAAc,UAAUA,EAAc,SAAS;AAAA,EAC9E,GACD,CAACP,GAAYG,CAAU,CAAC,GAEpB,gBAAAK,EAAA,cAACC,KAAU,GAAGlB,GAAU,OAAOS,GAAY,iBAAiBI,GAAY,KAAAX,EAAU,CAAA;AAC7F,GAEMiB,IAAwB,CAACC,GAAwBC,MAAoB;AACnE,MAAA,CAACA,KAAWA,KAAW;AAChB,WAAA;AAGX,QAAMC,IAAW,eACXC,IAAYH,EAAM,SAASC;AAEjC,SAAIE,MAAc,IACP,KAGJ,GAAGD,KAAYD,IAAUE,IAAY;AAChD,GAEaC,IAAY,CAAC;AAAA,EACtB,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,cAAAC,IAAe,CAAC;AAAA,EAChB,WAAAC,IAAY;AAAA,EACZ,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,MAAsB;AACZ,QAAAC,IAAmB7B,EAAgC,IAAI,GACvDF,IAAQgC,EAAsB;AAAA,IAChC,OAAOL;AAAA,IACP,UAAUF;AAAA,EAAA,CACb,GACK,EAAE,YAAAQ,MAAeC;AAAA,IACnB;AAAA,MACI,cAAcR;AAAA,IAClB;AAAA,IACA1B;AAAA,EAAA,GAGEoB,IAAW,aAAaU,KAASA,EAAM,WAAY;AAGrD,SAAA,gBAAAd,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGiB;AAAA,MACJ,gBAAcJ;AAAA,MACd,WAAWM,EAAM;AAAA,QACbP,MAAc,eACR,kCACA,oBAAoB/B,EAAauB,CAAO;AAAA,MAAA,CACjD;AAAA,MACD,KAAKW;AAAA,IAAA;AAAA,IAEJP,EAAW,IAAI,CAACzB,GAAUqC,MAAU;;AAE7B,aAAA,gBAAApB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAKjB,EAAS;AAAA,UACd,OAAO;AAAA,YACH,WAAUsC,IAAAN,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAM,EAA2B,wBAAwB;AAAA,YAC7D,YACID,MAAUZ,EAAW,SAAS,KAAKI,MAAc,aAC3CV,EAAsBM,GAAYJ,CAAO,IACzC;AAAA,UACd;AAAA,QAAA;AAAA,QAEA,gBAAAJ,EAAA,cAAClB,GAAc,EAAA,UAAAC,GAAoB,OAAAC,EAAc,CAAA;AAAA,MAAA;AAAA,IACrD,CAEP;AAAA,EAAA;AAGb;AACAuB,EAAU,cAAc;"}
|