@webiny/admin-ui 6.0.0-rc.7 → 6.1.0-beta.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/CodeEditor/CodeEditor.js +1 -1
- package/CodeEditor/CodeEditor.js.map +1 -1
- package/ColorPicker/primitives/presenters/ColorPickerPresenter.d.ts +4 -4
- package/ColorPicker/primitives/presenters/ColorPickerPresenter.js.map +1 -1
- package/ColorPicker/primitives/presenters/ColorPickerPresenter.test.js.map +1 -1
- package/ColorPicker/primitives/useColorPicker.d.ts +2 -2
- package/DataTable/DataTable.d.ts +2 -2
- package/DataTable/DataTable.js.map +1 -1
- package/DelayedOnChange/DelayedOnChange.js.map +1 -1
- package/Dialog/Dialog.stories.js +0 -2
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/components/DialogBody.js +1 -1
- package/Dialog/components/DialogBody.js.map +1 -1
- package/Grid/Grid.d.ts +1 -1
- package/Grid/Grid.js.map +1 -1
- package/IconPicker/IconPicker.stories.js +0 -2
- package/IconPicker/IconPicker.stories.js.map +1 -1
- package/IconPicker/primitives/IconPickerPrimitive.js +1 -0
- package/IconPicker/primitives/IconPickerPrimitive.js.map +1 -1
- package/IconPicker/primitives/IconPickerPrimitive.stories.js +0 -2
- package/IconPicker/primitives/IconPickerPrimitive.stories.js.map +1 -1
- package/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.js +3 -1
- package/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.js.map +1 -1
- package/Switch/domains/SwitchItemDto.d.ts +1 -1
- package/Switch/domains/SwitchItemDto.js.map +1 -1
- package/package.json +19 -19
- package/theme.css +6 -0
package/CodeEditor/CodeEditor.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","makeDecoratable","CodeEditorPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableCodeEditor","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","CodeEditor"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { CodeEditorPrimitiveProps } from \"./CodeEditorPrimitive.js\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n FormComponentDescription,\n FormComponentErrorMessage,\n FormComponentLabel,\n FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;\n\nconst DecoratableCodeEditor = ({\n label,\n description,\n note,\n hint,\n required,\n disabled,\n validation,\n ...props\n}: CodeEditorProps) => {\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n return (\n <div className={\"w-full\"}>\n <FormComponentLabel\n text={label}\n hint={hint}\n required={required}\n disabled={disabled}\n invalid={invalid}\n />\n <FormComponentDescription text={description} disabled={disabled} />\n <CodeEditorPrimitive {...props} disabled={disabled} />\n <FormComponentErrorMessage\n text={validationMessage}\n invalid={invalid}\n disabled={disabled}\n />\n <FormComponentNote text={note} disabled={disabled} />\n </div>\n );\n};\nconst CodeEditor = makeDecoratable(\"CodeEditor\", DecoratableCodeEditor);\n\nexport { CodeEditor, type CodeEditorProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;
|
|
1
|
+
{"version":3,"names":["React","useMemo","makeDecoratable","CodeEditorPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableCodeEditor","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","CodeEditor"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { CodeEditorPrimitiveProps } from \"./CodeEditorPrimitive.js\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n FormComponentDescription,\n FormComponentErrorMessage,\n FormComponentLabel,\n FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;\n\nconst DecoratableCodeEditor = ({\n label,\n description,\n note,\n hint,\n required,\n disabled = false,\n validation,\n ...props\n}: CodeEditorProps) => {\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n return (\n <div className={\"w-full\"}>\n <FormComponentLabel\n text={label}\n hint={hint}\n required={required}\n disabled={disabled}\n invalid={invalid}\n />\n <FormComponentDescription text={description} disabled={disabled} />\n <CodeEditorPrimitive {...props} disabled={disabled} />\n <FormComponentErrorMessage\n text={validationMessage}\n invalid={invalid}\n disabled={disabled}\n />\n <FormComponentNote text={note} disabled={disabled} />\n </div>\n );\n};\nconst CodeEditor = makeDecoratable(\"CodeEditor\", DecoratableCodeEditor);\n\nexport { CodeEditor, type CodeEditorProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IAACoB,IAAI,EAAEd,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEd,KAAA,CAAAsB,aAAA,CAACnB,mBAAmB,EAAAsB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA;EAAS,EAAE,CAAC,eACtDd,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,UAAU,GAAGzB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASmB,UAAU","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ColorResult } from "react-color";
|
|
2
2
|
interface ColorPickerPresenterParams {
|
|
3
3
|
onOpenChange?: (open: boolean) => void;
|
|
4
4
|
onValueChange?: (value: string) => void;
|
|
@@ -11,7 +11,7 @@ interface IColorPickerPresenter {
|
|
|
11
11
|
value: string;
|
|
12
12
|
};
|
|
13
13
|
init: (params: ColorPickerPresenterParams) => void;
|
|
14
|
-
setColor: (color:
|
|
14
|
+
setColor: (color: Pick<ColorResult, "hex">) => void;
|
|
15
15
|
setOpen: (open: boolean) => void;
|
|
16
16
|
}
|
|
17
17
|
declare class ColorPickerPresenter implements IColorPickerPresenter {
|
|
@@ -24,8 +24,8 @@ declare class ColorPickerPresenter implements IColorPickerPresenter {
|
|
|
24
24
|
value: string;
|
|
25
25
|
};
|
|
26
26
|
init(params: ColorPickerPresenterParams): void;
|
|
27
|
-
setColor: (color:
|
|
28
|
-
commitColor: (color:
|
|
27
|
+
setColor: (color: Pick<ColorResult, "hex">) => void;
|
|
28
|
+
commitColor: (color: Pick<ColorResult, "hex">) => void;
|
|
29
29
|
setOpen: (open: boolean) => void;
|
|
30
30
|
}
|
|
31
31
|
export { ColorPickerPresenter, type ColorPickerPresenterParams, type IColorPickerPresenter };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["makeAutoObservable","ColorPickerPresenter","params","undefined","open","value","constructor","vm","init","setColor","color","hex","onValueChange","commitColor","onValueCommit","setOpen","onOpenChange"],"sources":["ColorPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type {
|
|
1
|
+
{"version":3,"names":["makeAutoObservable","ColorPickerPresenter","params","undefined","open","value","constructor","vm","init","setColor","color","hex","onValueChange","commitColor","onValueCommit","setOpen","onOpenChange"],"sources":["ColorPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { ColorResult } from \"react-color\";\n\ninterface ColorPickerPresenterParams {\n onOpenChange?: (open: boolean) => void;\n onValueChange?: (value: string) => void;\n onValueCommit?: (value: string) => void;\n value?: string;\n}\n\ninterface IColorPickerPresenter {\n vm: {\n open: boolean;\n value: string;\n };\n init: (params: ColorPickerPresenterParams) => void;\n setColor: (color: Pick<ColorResult, \"hex\">) => void;\n setOpen: (open: boolean) => void;\n}\n\nclass ColorPickerPresenter implements IColorPickerPresenter {\n private params?: ColorPickerPresenterParams = undefined;\n private open = false;\n private value = \"\";\n\n constructor() {\n makeAutoObservable(this);\n }\n\n get vm() {\n return {\n open: this.open,\n value: this.value\n };\n }\n\n init(params: ColorPickerPresenterParams) {\n this.params = params;\n this.value = params.value || \"\";\n }\n\n setColor = (color: Pick<ColorResult, \"hex\">) => {\n this.value = color.hex;\n this.params?.onValueChange?.(color.hex);\n };\n\n commitColor = (color: Pick<ColorResult, \"hex\">) => {\n this.value = color.hex;\n this.params?.onValueCommit?.(color.hex);\n };\n\n setOpen = (open: boolean) => {\n this.open = open;\n this.params?.onOpenChange?.(open);\n };\n}\n\nexport { ColorPickerPresenter, type ColorPickerPresenterParams, type IColorPickerPresenter };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAoBzC,MAAMC,oBAAoB,CAAkC;EAChDC,MAAM,GAAgCC,SAAS;EAC/CC,IAAI,GAAG,KAAK;EACZC,KAAK,GAAG,EAAE;EAElBC,WAAWA,CAAA,EAAG;IACVN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,IAAIO,EAAEA,CAAA,EAAG;IACL,OAAO;MACHH,IAAI,EAAE,IAAI,CAACA,IAAI;MACfC,KAAK,EAAE,IAAI,CAACA;IAChB,CAAC;EACL;EAEAG,IAAIA,CAACN,MAAkC,EAAE;IACrC,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACG,KAAK,GAAGH,MAAM,CAACG,KAAK,IAAI,EAAE;EACnC;EAEAI,QAAQ,GAAIC,KAA+B,IAAK;IAC5C,IAAI,CAACL,KAAK,GAAGK,KAAK,CAACC,GAAG;IACtB,IAAI,CAACT,MAAM,EAAEU,aAAa,GAAGF,KAAK,CAACC,GAAG,CAAC;EAC3C,CAAC;EAEDE,WAAW,GAAIH,KAA+B,IAAK;IAC/C,IAAI,CAACL,KAAK,GAAGK,KAAK,CAACC,GAAG;IACtB,IAAI,CAACT,MAAM,EAAEY,aAAa,GAAGJ,KAAK,CAACC,GAAG,CAAC;EAC3C,CAAC;EAEDI,OAAO,GAAIX,IAAa,IAAK;IACzB,IAAI,CAACA,IAAI,GAAGA,IAAI;IAChB,IAAI,CAACF,MAAM,EAAEc,YAAY,GAAGZ,IAAI,CAAC;EACrC,CAAC;AACL;AAEA,SAASH,oBAAoB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ColorPickerPresenter","describe","expect","it","vi","presenter","onValueChange","fn","init","value","vm","toBe","toEqual","open","setColor","hex","toHaveBeenCalledWith","onValueCommit","commitColor","onOpenChange","setOpen"],"sources":["ColorPickerPresenter.test.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"names":["ColorPickerPresenter","describe","expect","it","vi","presenter","onValueChange","fn","init","value","vm","toBe","toEqual","open","setColor","hex","toHaveBeenCalledWith","onValueCommit","commitColor","onOpenChange","setOpen"],"sources":["ColorPickerPresenter.test.ts"],"sourcesContent":["import { ColorPickerPresenter } from \"./ColorPickerPresenter.js\";\nimport { describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"ColorPickerPresenter\", () => {\n const presenter = new ColorPickerPresenter();\n const onValueChange = vi.fn();\n\n it(\"should return the compatible `vm` based on params\", () => {\n // `value`\n {\n presenter.init({ value: \"#ff0000\", onValueChange });\n expect(presenter.vm.value).toBe(\"#ff0000\");\n }\n\n {\n // default: no params\n presenter.init({ onValueChange });\n expect(presenter.vm.value).toEqual(\"\");\n expect(presenter.vm.open).toEqual(false);\n }\n });\n\n it(\"should set the color\", () => {\n presenter.init({ onValueChange });\n presenter.setColor({ hex: \"#ff0000\" });\n expect(presenter.vm.value).toBe(\"#ff0000\");\n expect(onValueChange).toHaveBeenCalledWith(\"#ff0000\");\n });\n\n it(\"should commit the color\", () => {\n const onValueCommit = vi.fn();\n presenter.init({ onValueChange, onValueCommit });\n presenter.commitColor({ hex: \"#00ff00\" });\n expect(presenter.vm.value).toBe(\"#00ff00\");\n expect(onValueCommit).toHaveBeenCalledWith(\"#00ff00\");\n });\n\n it(\"should set the open state\", () => {\n const onOpenChange = vi.fn();\n presenter.init({ onValueChange, onOpenChange });\n presenter.setOpen(true);\n expect(presenter.vm.open).toBe(true);\n expect(onOpenChange).toHaveBeenCalledWith(true);\n });\n});\n"],"mappings":"AAAA,SAASA,oBAAoB;AAC7B,SAASC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAEjDH,QAAQ,CAAC,sBAAsB,EAAE,MAAM;EACnC,MAAMI,SAAS,GAAG,IAAIL,oBAAoB,CAAC,CAAC;EAC5C,MAAMM,aAAa,GAAGF,EAAE,CAACG,EAAE,CAAC,CAAC;EAE7BJ,EAAE,CAAC,mDAAmD,EAAE,MAAM;IAC1D;IACA;MACIE,SAAS,CAACG,IAAI,CAAC;QAAEC,KAAK,EAAE,SAAS;QAAEH;MAAc,CAAC,CAAC;MACnDJ,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,SAAS,CAAC;IAC9C;IAEA;MACI;MACAN,SAAS,CAACG,IAAI,CAAC;QAAEF;MAAc,CAAC,CAAC;MACjCJ,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACG,OAAO,CAAC,EAAE,CAAC;MACtCV,MAAM,CAACG,SAAS,CAACK,EAAE,CAACG,IAAI,CAAC,CAACD,OAAO,CAAC,KAAK,CAAC;IAC5C;EACJ,CAAC,CAAC;EAEFT,EAAE,CAAC,sBAAsB,EAAE,MAAM;IAC7BE,SAAS,CAACG,IAAI,CAAC;MAAEF;IAAc,CAAC,CAAC;IACjCD,SAAS,CAACS,QAAQ,CAAC;MAAEC,GAAG,EAAE;IAAU,CAAC,CAAC;IACtCb,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,SAAS,CAAC;IAC1CT,MAAM,CAACI,aAAa,CAAC,CAACU,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;EAEFb,EAAE,CAAC,yBAAyB,EAAE,MAAM;IAChC,MAAMc,aAAa,GAAGb,EAAE,CAACG,EAAE,CAAC,CAAC;IAC7BF,SAAS,CAACG,IAAI,CAAC;MAAEF,aAAa;MAAEW;IAAc,CAAC,CAAC;IAChDZ,SAAS,CAACa,WAAW,CAAC;MAAEH,GAAG,EAAE;IAAU,CAAC,CAAC;IACzCb,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,SAAS,CAAC;IAC1CT,MAAM,CAACe,aAAa,CAAC,CAACD,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;EAEFb,EAAE,CAAC,2BAA2B,EAAE,MAAM;IAClC,MAAMgB,YAAY,GAAGf,EAAE,CAACG,EAAE,CAAC,CAAC;IAC5BF,SAAS,CAACG,IAAI,CAAC;MAAEF,aAAa;MAAEa;IAAa,CAAC,CAAC;IAC/Cd,SAAS,CAACe,OAAO,CAAC,IAAI,CAAC;IACvBlB,MAAM,CAACG,SAAS,CAACK,EAAE,CAACG,IAAI,CAAC,CAACF,IAAI,CAAC,IAAI,CAAC;IACpCT,MAAM,CAACiB,YAAY,CAAC,CAACH,oBAAoB,CAAC,IAAI,CAAC;EACnD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
|
|
@@ -4,7 +4,7 @@ export declare const useColorPicker: (props: ColorPickerPrimitiveProps) => {
|
|
|
4
4
|
open: boolean;
|
|
5
5
|
value: string;
|
|
6
6
|
};
|
|
7
|
-
setColor: (color: import("react-color").
|
|
8
|
-
commitColor: (color: import("react-color").
|
|
7
|
+
setColor: (color: Pick<import("react-color").ColorResult, "hex">) => void;
|
|
8
|
+
commitColor: (color: Pick<import("react-color").ColorResult, "hex">) => void;
|
|
9
9
|
setOpen: (open: boolean) => void;
|
|
10
10
|
};
|
package/DataTable/DataTable.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { ColumnSort, OnChangeFn, Row, SortingState, VisibilityState } from "@tanstack/react-table";
|
|
3
3
|
interface DataTableColumn<T> {
|
|
4
|
-
header?: string | number | JSX.Element;
|
|
5
|
-
cell?: (row: T) => string | number | JSX.Element | null;
|
|
4
|
+
header?: string | number | React.JSX.Element;
|
|
5
|
+
cell?: (row: T) => string | number | React.JSX.Element | null;
|
|
6
6
|
size?: number;
|
|
7
7
|
className?: string;
|
|
8
8
|
enableSorting?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useCallback","useEffect","useMemo","useRef","useState","flexRender","getCoreRowModel","getSortedRowModel","useReactTable","CheckboxPrimitive","Skeleton","Table","ColumnSorter","ColumnsVisibility","cn","makeDecoratable","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","columnsList","Object","keys","map","key","id","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","size","props","row","original","getValue","String","meta","columnsDefs","firstColumn","isSelectable","createElement","indeterminate","table","getIsSomeRowsSelected","checked","getIsAllRowsSelected","onChange","toggleAllPageRowsSelected","disabled","onClick","e","stopPropagation","getIsSelected","value","toggleSelected","getCanSelect","slice","type","typedMemo","TableCell","getColumnWidth","width","Cell","assign","columnDef","style","maxWidth","getContext","MemoTableCell","TableRow","selected","cells","Row","MemoTableRow","emptyArray","Array","fill","DecoratableDataTable","bordered","columnVisibility","initialColumns","data","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","tableWidth","setTableWidth","updateElementWidth","current","clientWidth","window","addEventListener","removeEventListener","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","filter","x","length","parseInt","selection","tableSorting","isArray","columnResizeMode","enableColumnResizing","enableRowSelection","enableSortingRemoval","manualSorting","state","getCanResize","getSize","tableSize","getTotalSize","columnSize","Math","ceil","tableRows","getRowModel","rows","ref","sticky","Header","getHeaderGroups","headerGroup","headers","index","isLastCell","Head","colSpan","isPlaceholder","getToggleSortingHandler","sortable","getCanSort","Direction","direction","getIsSorted","getAllColumns","Resizer","onMouseDown","getResizeHandler","onTouchStart","isResizing","getIsResizing","Body","getVisibleCells","DataTable"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n Cell,\n Column,\n ColumnDef,\n ColumnSort,\n OnChangeFn,\n Row,\n RowSelectionState,\n SortingState,\n VisibilityState\n} from \"@tanstack/react-table\";\nimport {\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface DataTableColumn<T> {\n /*\n * Column header component.\n */\n header?: string | number | JSX.Element;\n /*\n * Cell renderer, receives the full row and returns the value to render inside the cell.\n */\n cell?: (row: T) => string | number | JSX.Element | null;\n /*\n * Column size.\n */\n size?: number;\n /*\n * Column class names.\n */\n className?: string;\n /*\n * Enable column sorting.\n */\n enableSorting?: boolean;\n /*\n * Enable column resizing.\n */\n enableResizing?: boolean;\n /*\n * Enable column visibility toggling.\n */\n enableHiding?: boolean;\n /*\n * Accessor key for the column data path.\n */\n accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n id: string;\n /*\n * Define if a specific row can be selected.\n */\n $selectable?: boolean;\n};\n\ntype DataTableRow<T> = Row<DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = VisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry> {\n /**\n * Show or hide borders.\n */\n bordered?: boolean;\n /**\n * Controls whether \"select all\" action is allowed.\n */\n canSelectAllRows?: boolean;\n /**\n * Columns definition.\n */\n columns: DataTableColumns<TEntry>;\n /**\n * The column visibility state.\n */\n columnVisibility?: DataTableColumnVisibility;\n /**\n * Callback that receives current column visibility state.\n */\n onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n /**\n * Data to display into DataTable body.\n */\n data: TEntry[];\n /**\n * Callback that is called to determine if the row is selectable.\n */\n isRowSelectable?: (row: Row<TEntry>) => boolean;\n /**\n * Render the skeleton state while data are loading.\n */\n loading?: boolean;\n /**\n * Callback that receives the selected rows.\n */\n onSelectRow?: (rows: TEntry[]) => void;\n /**\n * Callback that receives the toggled row.\n */\n onToggleRow?: (row: TEntry) => void;\n /**\n * Callback that receives current sorting state.\n */\n onSortingChange?: OnDataTableSortingChange;\n /**\n * Selected rows.\n */\n selectedRows?: TEntry[];\n /**\n * Sorting state.\n */\n sorting?: DataTableSorting;\n /**\n * Initial sorting state.\n */\n initialSorting?: DataTableSorting;\n /**\n * Enable sticky header.\n */\n stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry> {\n canSelectAllRows: boolean;\n onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T,>(\n columns: DataTableProps<T>[\"columns\"],\n options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n return useMemo(() => {\n const columnsList = Object.keys(columns).map(key => ({\n id: key,\n ...columns[key as keyof typeof columns]\n }));\n\n const defaults: ColumnDef<T>[] = columnsList.map(column => {\n const {\n accessorKey,\n cell,\n className,\n enableHiding = true,\n enableResizing = true,\n enableSorting = false,\n header,\n id,\n size = 100\n } = column;\n\n return {\n id,\n accessorKey: accessorKey || id,\n header: () => header,\n cell: props => {\n if (cell && typeof cell === \"function\") {\n return cell(props.row.original);\n } else {\n // Automatically convert any cell value to a string for rendering,\n // ensuring the table displays values correctly. This aligns with React's\n // rendering, which expects JSX, strings or null.\n // https://github.com/TanStack/table/issues/1042\n return props.getValue() ? String(props.getValue()) : null;\n }\n },\n enableSorting,\n meta: {\n className\n },\n enableResizing,\n size,\n enableHiding\n };\n });\n\n let columnsDefs = defaults;\n const firstColumn = defaults[0];\n const isSelectable = onToggleRow || onSelectRow;\n\n if (isSelectable && firstColumn) {\n columnsDefs = [\n {\n ...firstColumn,\n accessorKey: firstColumn.id as string,\n header: props => {\n if (!props) {\n return null;\n }\n\n return (\n <div className={\"flex items-center gap-xl\"}>\n <CheckboxPrimitive\n indeterminate={props.table.getIsSomeRowsSelected()}\n checked={props.table.getIsAllRowsSelected()}\n onChange={props.table.toggleAllPageRowsSelected}\n aria-label=\"Select all\"\n disabled={!canSelectAllRows}\n onClick={e => e.stopPropagation()}\n />\n {firstColumn.header\n ? React.createElement(firstColumn.header, props)\n : null}\n </div>\n );\n },\n cell: props => {\n if (!props) {\n return null;\n }\n return (\n <div className={\"flex items-center gap-xl\"}>\n <CheckboxPrimitive\n checked={props.row.getIsSelected()}\n onChange={value => props.row.toggleSelected(!!value)}\n disabled={!props.row.getCanSelect()}\n aria-label=\"Select row\"\n className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n />\n {firstColumn.cell\n ? React.createElement(firstColumn.cell, props)\n : null}\n </div>\n );\n }\n },\n ...defaults.slice(1)\n ];\n }\n\n return columnsDefs.map(column => {\n if (loading) {\n return {\n ...column,\n cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n };\n }\n\n return column;\n });\n }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n cell: Cell<T, unknown>;\n getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n const width = getColumnWidth(cell.column);\n\n return (\n <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n selected: boolean;\n cells: Cell<T, unknown>[];\n getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n return (\n <Table.Row selected={selected}>\n {cells.map(cell => (\n <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n ))}\n </Table.Row>\n );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n bordered,\n canSelectAllRows = true,\n columnVisibility,\n columns: initialColumns,\n data: initialData,\n initialSorting,\n isRowSelectable,\n loading,\n onColumnVisibilityChange,\n onSelectRow,\n onSortingChange,\n onToggleRow,\n selectedRows = [],\n sorting,\n stickyHeader\n}: DataTableProps<T>) => {\n const tableRef = useRef<HTMLDivElement>(null);\n const [tableWidth, setTableWidth] = useState(1);\n\n const data = loading ? emptyArray : initialData;\n\n useEffect(() => {\n const updateElementWidth = () => {\n if (tableRef.current) {\n const width = tableRef.current.clientWidth;\n setTableWidth(width);\n }\n };\n\n updateElementWidth();\n\n window.addEventListener(\"resize\", updateElementWidth);\n\n return () => {\n window.removeEventListener(\"resize\", updateElementWidth);\n };\n }, [tableRef.current]);\n\n const rowSelection = useMemo(() => {\n return selectedRows.reduce<RowSelectionState>((acc, item) => {\n const recordIndex = data.findIndex(rec => rec.id === item.id);\n return { ...acc, [recordIndex]: true };\n }, {});\n }, [selectedRows, data]);\n\n const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n /**\n * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n * the new selection state (an object with row indexes that are currently selected).\n *\n * To figure out what row was toggled, we need to calculate the difference between the old selection\n * and the new selection. What we're doing here is:\n * - find all items that were present in the previous selection, but are no longer present in the new selection\n * - find all items that are present in the new selection, but were not present in the previous selection\n */\n const toggledRows = [\n ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n ];\n\n // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n onToggleRow(data[parseInt(toggledRows[0])]);\n return;\n } else if (typeof onSelectRow === \"function\") {\n const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n onSelectRow(selection);\n }\n };\n\n const tableSorting = useMemo(() => {\n if (!Array.isArray(sorting) || !sorting.length) {\n return initialSorting;\n }\n return sorting;\n }, [sorting]);\n\n const columns = defineColumns(initialColumns, {\n canSelectAllRows,\n onSelectRow,\n onToggleRow,\n loading\n });\n\n const table = useReactTable<T>({\n columnResizeMode: \"onChange\",\n columns,\n data,\n enableColumnResizing: true,\n enableHiding: !!onColumnVisibilityChange,\n enableRowSelection: isRowSelectable,\n enableSorting: !!onSortingChange,\n enableSortingRemoval: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n manualSorting: true,\n onColumnVisibilityChange,\n onRowSelectionChange,\n onSortingChange,\n state: {\n columnVisibility,\n rowSelection,\n sorting: tableSorting\n }\n });\n\n const getColumnWidth = useCallback(\n (column: Column<T>): number => {\n if (!column.getCanResize()) {\n return column.getSize();\n }\n\n const tableSize = table.getTotalSize();\n const columnSize = column.getSize();\n\n return Math.ceil((columnSize * tableWidth) / tableSize);\n },\n [table, tableWidth]\n );\n\n /**\n * Had to memoize the rows to avoid browser freeze.\n */\n const tableRows = useMemo(() => {\n return table.getRowModel().rows;\n }, [table, data, columns]);\n\n return (\n <div ref={tableRef}>\n <Table bordered={bordered} sticky={stickyHeader}>\n <Table.Header sticky={stickyHeader}>\n {table.getHeaderGroups().map(headerGroup => (\n <Table.Row key={headerGroup.id}>\n {headerGroup.headers.map((header, index) => {\n const isLastCell = index === headerGroup.headers.length - 1;\n const width = getColumnWidth(header.column);\n\n return (\n <Table.Head\n key={header.id}\n {...header.column.columnDef.meta}\n colSpan={header.colSpan}\n style={{ width, maxWidth: width }}\n >\n {header.isPlaceholder ? null : (\n <ColumnSorter\n onClick={header.column.getToggleSortingHandler()}\n sortable={header.column.getCanSort()}\n >\n <div className=\"w-full overflow-hidden whitespace-nowrap truncate\">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </div>\n <Table.Direction\n direction={header.column.getIsSorted() || null}\n />\n {isLastCell && (\n <div className={\"mr-xs h-md\"}>\n <ColumnsVisibility\n columns={table.getAllColumns()}\n />\n </div>\n )}\n </ColumnSorter>\n )}\n {header.column.getCanResize() && (\n <Table.Resizer\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n isResizing={header.column.getIsResizing()}\n />\n )}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n <Table.Body>\n {tableRows.map(row => {\n const id = row.original.id || row.id;\n return (\n <MemoTableRow<T>\n key={id}\n cells={row.getVisibleCells()}\n selected={row.getIsSelected()}\n getColumnWidth={getColumnWidth}\n />\n );\n })}\n </Table.Body>\n </Table>\n </div>\n );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n DataTable,\n type DataTableProps,\n type DataTableColumn,\n type DataTableColumns,\n type DataTableDefaultData,\n type DataTableRow,\n type DataTableSorting,\n type DataTableColumnSort,\n type OnDataTableSortingChange,\n type DataTableColumnVisibility,\n type OnDataTableColumnVisibilityChange\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","memo","useCallback","useEffect","useMemo","useRef","useState","flexRender","getCoreRowModel","getSortedRowModel","useReactTable","CheckboxPrimitive","Skeleton","Table","ColumnSorter","ColumnsVisibility","cn","makeDecoratable","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","columnsList","Object","keys","map","key","id","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","size","props","row","original","getValue","String","meta","columnsDefs","firstColumn","isSelectable","createElement","indeterminate","table","getIsSomeRowsSelected","checked","getIsAllRowsSelected","onChange","toggleAllPageRowsSelected","disabled","onClick","e","stopPropagation","getIsSelected","value","toggleSelected","getCanSelect","slice","type","typedMemo","TableCell","getColumnWidth","width","Cell","assign","columnDef","style","maxWidth","getContext","MemoTableCell","TableRow","selected","cells","Row","MemoTableRow","emptyArray","Array","fill","DecoratableDataTable","bordered","columnVisibility","initialColumns","data","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","tableWidth","setTableWidth","updateElementWidth","current","clientWidth","window","addEventListener","removeEventListener","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","filter","x","length","parseInt","selection","tableSorting","isArray","columnResizeMode","enableColumnResizing","enableRowSelection","enableSortingRemoval","manualSorting","state","getCanResize","getSize","tableSize","getTotalSize","columnSize","Math","ceil","tableRows","getRowModel","rows","ref","sticky","Header","getHeaderGroups","headerGroup","headers","index","isLastCell","Head","colSpan","isPlaceholder","getToggleSortingHandler","sortable","getCanSort","Direction","direction","getIsSorted","getAllColumns","Resizer","onMouseDown","getResizeHandler","onTouchStart","isResizing","getIsResizing","Body","getVisibleCells","DataTable"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n Cell,\n Column,\n ColumnDef,\n ColumnSort,\n OnChangeFn,\n Row,\n RowSelectionState,\n SortingState,\n VisibilityState\n} from \"@tanstack/react-table\";\nimport {\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface DataTableColumn<T> {\n /*\n * Column header component.\n */\n header?: string | number | React.JSX.Element;\n /*\n * Cell renderer, receives the full row and returns the value to render inside the cell.\n */\n cell?: (row: T) => string | number | React.JSX.Element | null;\n /*\n * Column size.\n */\n size?: number;\n /*\n * Column class names.\n */\n className?: string;\n /*\n * Enable column sorting.\n */\n enableSorting?: boolean;\n /*\n * Enable column resizing.\n */\n enableResizing?: boolean;\n /*\n * Enable column visibility toggling.\n */\n enableHiding?: boolean;\n /*\n * Accessor key for the column data path.\n */\n accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n id: string;\n /*\n * Define if a specific row can be selected.\n */\n $selectable?: boolean;\n};\n\ntype DataTableRow<T> = Row<DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = VisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry> {\n /**\n * Show or hide borders.\n */\n bordered?: boolean;\n /**\n * Controls whether \"select all\" action is allowed.\n */\n canSelectAllRows?: boolean;\n /**\n * Columns definition.\n */\n columns: DataTableColumns<TEntry>;\n /**\n * The column visibility state.\n */\n columnVisibility?: DataTableColumnVisibility;\n /**\n * Callback that receives current column visibility state.\n */\n onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n /**\n * Data to display into DataTable body.\n */\n data: TEntry[];\n /**\n * Callback that is called to determine if the row is selectable.\n */\n isRowSelectable?: (row: Row<TEntry>) => boolean;\n /**\n * Render the skeleton state while data are loading.\n */\n loading?: boolean;\n /**\n * Callback that receives the selected rows.\n */\n onSelectRow?: (rows: TEntry[]) => void;\n /**\n * Callback that receives the toggled row.\n */\n onToggleRow?: (row: TEntry) => void;\n /**\n * Callback that receives current sorting state.\n */\n onSortingChange?: OnDataTableSortingChange;\n /**\n * Selected rows.\n */\n selectedRows?: TEntry[];\n /**\n * Sorting state.\n */\n sorting?: DataTableSorting;\n /**\n * Initial sorting state.\n */\n initialSorting?: DataTableSorting;\n /**\n * Enable sticky header.\n */\n stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry> {\n canSelectAllRows: boolean;\n onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T,>(\n columns: DataTableProps<T>[\"columns\"],\n options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n return useMemo(() => {\n const columnsList = Object.keys(columns).map(key => ({\n id: key,\n ...columns[key as keyof typeof columns]\n }));\n\n const defaults: ColumnDef<T>[] = columnsList.map(column => {\n const {\n accessorKey,\n cell,\n className,\n enableHiding = true,\n enableResizing = true,\n enableSorting = false,\n header,\n id,\n size = 100\n } = column;\n\n return {\n id,\n accessorKey: accessorKey || id,\n header: () => header,\n cell: props => {\n if (cell && typeof cell === \"function\") {\n return cell(props.row.original);\n } else {\n // Automatically convert any cell value to a string for rendering,\n // ensuring the table displays values correctly. This aligns with React's\n // rendering, which expects JSX, strings or null.\n // https://github.com/TanStack/table/issues/1042\n return props.getValue() ? String(props.getValue()) : null;\n }\n },\n enableSorting,\n meta: {\n className\n },\n enableResizing,\n size,\n enableHiding\n };\n });\n\n let columnsDefs = defaults;\n const firstColumn = defaults[0];\n const isSelectable = onToggleRow || onSelectRow;\n\n if (isSelectable && firstColumn) {\n columnsDefs = [\n {\n ...firstColumn,\n accessorKey: firstColumn.id as string,\n header: props => {\n if (!props) {\n return null;\n }\n\n return (\n <div className={\"flex items-center gap-xl\"}>\n <CheckboxPrimitive\n indeterminate={props.table.getIsSomeRowsSelected()}\n checked={props.table.getIsAllRowsSelected()}\n onChange={props.table.toggleAllPageRowsSelected}\n aria-label=\"Select all\"\n disabled={!canSelectAllRows}\n onClick={e => e.stopPropagation()}\n />\n {firstColumn.header\n ? React.createElement(firstColumn.header, props)\n : null}\n </div>\n );\n },\n cell: props => {\n if (!props) {\n return null;\n }\n return (\n <div className={\"flex items-center gap-xl\"}>\n <CheckboxPrimitive\n checked={props.row.getIsSelected()}\n onChange={value => props.row.toggleSelected(!!value)}\n disabled={!props.row.getCanSelect()}\n aria-label=\"Select row\"\n className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n />\n {firstColumn.cell\n ? React.createElement(firstColumn.cell, props)\n : null}\n </div>\n );\n }\n },\n ...defaults.slice(1)\n ];\n }\n\n return columnsDefs.map(column => {\n if (loading) {\n return {\n ...column,\n cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n };\n }\n\n return column;\n });\n }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n cell: Cell<T, unknown>;\n getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n const width = getColumnWidth(cell.column);\n\n return (\n <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n selected: boolean;\n cells: Cell<T, unknown>[];\n getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n return (\n <Table.Row selected={selected}>\n {cells.map(cell => (\n <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n ))}\n </Table.Row>\n );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n bordered,\n canSelectAllRows = true,\n columnVisibility,\n columns: initialColumns,\n data: initialData,\n initialSorting,\n isRowSelectable,\n loading,\n onColumnVisibilityChange,\n onSelectRow,\n onSortingChange,\n onToggleRow,\n selectedRows = [],\n sorting,\n stickyHeader\n}: DataTableProps<T>) => {\n const tableRef = useRef<HTMLDivElement>(null);\n const [tableWidth, setTableWidth] = useState(1);\n\n const data = loading ? emptyArray : initialData;\n\n useEffect(() => {\n const updateElementWidth = () => {\n if (tableRef.current) {\n const width = tableRef.current.clientWidth;\n setTableWidth(width);\n }\n };\n\n updateElementWidth();\n\n window.addEventListener(\"resize\", updateElementWidth);\n\n return () => {\n window.removeEventListener(\"resize\", updateElementWidth);\n };\n }, [tableRef.current]);\n\n const rowSelection = useMemo(() => {\n return selectedRows.reduce<RowSelectionState>((acc, item) => {\n const recordIndex = data.findIndex(rec => rec.id === item.id);\n return { ...acc, [recordIndex]: true };\n }, {});\n }, [selectedRows, data]);\n\n const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n /**\n * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n * the new selection state (an object with row indexes that are currently selected).\n *\n * To figure out what row was toggled, we need to calculate the difference between the old selection\n * and the new selection. What we're doing here is:\n * - find all items that were present in the previous selection, but are no longer present in the new selection\n * - find all items that are present in the new selection, but were not present in the previous selection\n */\n const toggledRows = [\n ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n ];\n\n // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n onToggleRow(data[parseInt(toggledRows[0])]);\n return;\n } else if (typeof onSelectRow === \"function\") {\n const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n onSelectRow(selection);\n }\n };\n\n const tableSorting = useMemo(() => {\n if (!Array.isArray(sorting) || !sorting.length) {\n return initialSorting;\n }\n return sorting;\n }, [sorting]);\n\n const columns = defineColumns(initialColumns, {\n canSelectAllRows,\n onSelectRow,\n onToggleRow,\n loading\n });\n\n const table = useReactTable<T>({\n columnResizeMode: \"onChange\",\n columns,\n data,\n enableColumnResizing: true,\n enableHiding: !!onColumnVisibilityChange,\n enableRowSelection: isRowSelectable,\n enableSorting: !!onSortingChange,\n enableSortingRemoval: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n manualSorting: true,\n onColumnVisibilityChange,\n onRowSelectionChange,\n onSortingChange,\n state: {\n columnVisibility,\n rowSelection,\n sorting: tableSorting\n }\n });\n\n const getColumnWidth = useCallback(\n (column: Column<T>): number => {\n if (!column.getCanResize()) {\n return column.getSize();\n }\n\n const tableSize = table.getTotalSize();\n const columnSize = column.getSize();\n\n return Math.ceil((columnSize * tableWidth) / tableSize);\n },\n [table, tableWidth]\n );\n\n /**\n * Had to memoize the rows to avoid browser freeze.\n */\n const tableRows = useMemo(() => {\n return table.getRowModel().rows;\n }, [table, data, columns]);\n\n return (\n <div ref={tableRef}>\n <Table bordered={bordered} sticky={stickyHeader}>\n <Table.Header sticky={stickyHeader}>\n {table.getHeaderGroups().map(headerGroup => (\n <Table.Row key={headerGroup.id}>\n {headerGroup.headers.map((header, index) => {\n const isLastCell = index === headerGroup.headers.length - 1;\n const width = getColumnWidth(header.column);\n\n return (\n <Table.Head\n key={header.id}\n {...header.column.columnDef.meta}\n colSpan={header.colSpan}\n style={{ width, maxWidth: width }}\n >\n {header.isPlaceholder ? null : (\n <ColumnSorter\n onClick={header.column.getToggleSortingHandler()}\n sortable={header.column.getCanSort()}\n >\n <div className=\"w-full overflow-hidden whitespace-nowrap truncate\">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </div>\n <Table.Direction\n direction={header.column.getIsSorted() || null}\n />\n {isLastCell && (\n <div className={\"mr-xs h-md\"}>\n <ColumnsVisibility\n columns={table.getAllColumns()}\n />\n </div>\n )}\n </ColumnSorter>\n )}\n {header.column.getCanResize() && (\n <Table.Resizer\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n isResizing={header.column.getIsResizing()}\n />\n )}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n <Table.Body>\n {tableRows.map(row => {\n const id = row.original.id || row.id;\n return (\n <MemoTableRow<T>\n key={id}\n cells={row.getVisibleCells()}\n selected={row.getIsSelected()}\n getColumnWidth={getColumnWidth}\n />\n );\n })}\n </Table.Body>\n </Table>\n </div>\n );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n DataTable,\n type DataTableProps,\n type DataTableColumn,\n type DataTableColumns,\n type DataTableDefaultData,\n type DataTableRow,\n type DataTableSorting,\n type DataTableColumnSort,\n type OnDataTableSortingChange,\n type DataTableColumnVisibility,\n type OnDataTableColumnVisibilityChange\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","useState","isEqual","emptyFunction","undefined","DelayedOnChange","children","other","firstMount","onChange","delay","value","initialValue","setValue","localTimeout","applyValue","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport isEqual from \"lodash/isEqual.js\";\n\nconst emptyFunction = (): undefined => {\n return undefined;\n};\n\nexport interface ApplyValueCb<TValue> {\n (value: TValue): void;\n}\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\n\nexport interface OnChangeCallable<TValue = any> {\n (value: TValue, cb?: ApplyValueCb<TValue>): void;\n}\n\ninterface OnBlurCallable {\n (ev: React.SyntheticEvent): void;\n}\n\ninterface OnKeyDownCallable {\n (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\n\ninterface ChildrenCallableParams<TValue> {\n value: TValue;\n onChange: OnChangeCallable<TValue>;\n}\n\ninterface ChildrenCallable<TValue> {\n (params: ChildrenCallableParams<TValue>): React.ReactElement;\n}\n\nexport interface DelayedOnChangeProps<TValue> {\n value?: TValue;\n delay?: number;\n onChange?: OnChangeCallable<TValue>;\n onBlur?: OnBlurCallable;\n onKeyDown?: OnKeyDownCallable;\n children: React.ReactNode | ChildrenCallable<TValue | undefined>;\n}\n\nexport const DelayedOnChange = <TValue = any>({\n children,\n ...other\n}: DelayedOnChangeProps<TValue>) => {\n const firstMount = useRef(true);\n const { onChange, delay = 400, value: initialValue } = other;\n const [value, setValue] = useState<TValue | undefined>(initialValue);\n // Sync state and props\n useEffect(() => {\n // Do not update local state, if the incoming value is the same as the local state.\n // This is primarily an optimization for non-scalar values (objects).\n if (isEqual(initialValue, value)) {\n return;\n }\n\n setValue(initialValue);\n }, [initialValue]);\n\n const localTimeout = React.useRef<number | null>(null);\n\n const applyValue = (value: TValue | undefined) => {\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n if (!onChange) {\n return;\n }\n onChange(value as NonNullable<TValue>);\n };\n\n const onChangeLocal = React.useCallback((value: TValue | undefined) => {\n setValue(value);\n }, []);\n\n // this is fired upon change value state\n const onValueStateChanged = (nextValue: TValue | undefined) => {\n // We don't want to execute callbacks, if the value hasn't changed.\n if (isEqual(nextValue, initialValue)) {\n return;\n }\n\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n };\n\n // need to clear the timeout when unmounting the component\n useEffect(() => {\n return () => {\n if (!localTimeout.current) {\n return;\n }\n clearTimeout(localTimeout.current);\n localTimeout.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (firstMount.current) {\n firstMount.current = false;\n return;\n }\n\n onValueStateChanged(value);\n }, [value]);\n\n const newProps = {\n ...other,\n value: value,\n onChange: onChangeLocal\n };\n\n const renderProp =\n typeof children === \"function\" ? (children as ChildrenCallable<TValue | undefined>) : null;\n const child = renderProp\n ? renderProp(newProps)\n : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n const props = { ...child.props };\n const realOnKeyDown = props.onKeyDown || emptyFunction;\n const realOnBlur = props.onBlur || emptyFunction;\n\n // Need to apply value if input lost focus\n const onBlur: OnBlurCallable = ev => {\n if (!ev[\"persist\"]) {\n return;\n }\n ev.persist();\n applyValue((ev.target as HTMLInputElement).value as
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","useState","isEqual","emptyFunction","undefined","DelayedOnChange","children","other","firstMount","onChange","delay","value","initialValue","setValue","localTimeout","applyValue","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport isEqual from \"lodash/isEqual.js\";\n\nconst emptyFunction = (): undefined => {\n return undefined;\n};\n\nexport interface ApplyValueCb<TValue> {\n (value: TValue): void;\n}\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\n\nexport interface OnChangeCallable<TValue = any> {\n (value: TValue, cb?: ApplyValueCb<TValue>): void;\n}\n\ninterface OnBlurCallable {\n (ev: React.SyntheticEvent): void;\n}\n\ninterface OnKeyDownCallable {\n (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\n\ninterface ChildrenCallableParams<TValue> {\n value: TValue;\n onChange: OnChangeCallable<TValue>;\n}\n\ninterface ChildrenCallable<TValue> {\n (params: ChildrenCallableParams<TValue>): React.ReactElement;\n}\n\nexport interface DelayedOnChangeProps<TValue> {\n value?: TValue;\n delay?: number;\n onChange?: OnChangeCallable<TValue>;\n onBlur?: OnBlurCallable;\n onKeyDown?: OnKeyDownCallable;\n children: React.ReactNode | ChildrenCallable<TValue | undefined>;\n}\n\nexport const DelayedOnChange = <TValue = any>({\n children,\n ...other\n}: DelayedOnChangeProps<TValue>) => {\n const firstMount = useRef(true);\n const { onChange, delay = 400, value: initialValue } = other;\n const [value, setValue] = useState<TValue | undefined>(initialValue);\n // Sync state and props\n useEffect(() => {\n // Do not update local state, if the incoming value is the same as the local state.\n // This is primarily an optimization for non-scalar values (objects).\n if (isEqual(initialValue, value)) {\n return;\n }\n\n setValue(initialValue);\n }, [initialValue]);\n\n const localTimeout = React.useRef<number | null>(null);\n\n const applyValue = (value: TValue | undefined) => {\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n if (!onChange) {\n return;\n }\n onChange(value as NonNullable<TValue>);\n };\n\n const onChangeLocal = React.useCallback((value: TValue | undefined) => {\n setValue(value);\n }, []);\n\n // this is fired upon change value state\n const onValueStateChanged = (nextValue: TValue | undefined) => {\n // We don't want to execute callbacks, if the value hasn't changed.\n if (isEqual(nextValue, initialValue)) {\n return;\n }\n\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n };\n\n // need to clear the timeout when unmounting the component\n useEffect(() => {\n return () => {\n if (!localTimeout.current) {\n return;\n }\n clearTimeout(localTimeout.current);\n localTimeout.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (firstMount.current) {\n firstMount.current = false;\n return;\n }\n\n onValueStateChanged(value);\n }, [value]);\n\n const newProps = {\n ...other,\n value: value,\n onChange: onChangeLocal\n };\n\n const renderProp =\n typeof children === \"function\" ? (children as ChildrenCallable<TValue | undefined>) : null;\n const child = renderProp\n ? renderProp(newProps)\n : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n const props = { ...(child.props as DelayedOnChangeProps<TValue>) };\n const realOnKeyDown = props.onKeyDown || emptyFunction;\n const realOnBlur = props.onBlur || emptyFunction;\n\n // Need to apply value if input lost focus\n const onBlur: OnBlurCallable = ev => {\n if (!ev[\"persist\"]) {\n return;\n }\n ev.persist();\n applyValue((ev.target as HTMLInputElement).value as TValue);\n realOnBlur(ev);\n };\n\n // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n const onKeyDown: OnKeyDownCallable = ev => {\n ev.persist();\n if (ev.key === \"Tab\") {\n applyValue((ev.target as HTMLInputElement).value as TValue);\n realOnKeyDown(ev);\n } else if (ev.key === \"Enter\") {\n applyValue((ev.target as HTMLInputElement).value as TValue);\n realOnKeyDown(ev);\n } else {\n realOnKeyDown(ev);\n }\n };\n\n return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,OAAOC,OAAO,MAAM,mBAAmB;AAEvC,MAAMC,aAAa,GAAGA,CAAA,KAAiB;EACnC,OAAOC,SAAS;AACpB,CAAC;;AAMD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgCA,OAAO,MAAMC,eAAe,GAAGA,CAAe;EAC1CC,QAAQ;EACR,GAAGC;AACuB,CAAC,KAAK;EAChC,MAAMC,UAAU,GAAGR,MAAM,CAAC,IAAI,CAAC;EAC/B,MAAM;IAAES,QAAQ;IAAEC,KAAK,GAAG,GAAG;IAAEC,KAAK,EAAEC;EAAa,CAAC,GAAGL,KAAK;EAC5D,MAAM,CAACI,KAAK,EAAEE,QAAQ,CAAC,GAAGZ,QAAQ,CAAqBW,YAAY,CAAC;EACpE;EACAb,SAAS,CAAC,MAAM;IACZ;IACA;IACA,IAAIG,OAAO,CAACU,YAAY,EAAED,KAAK,CAAC,EAAE;MAC9B;IACJ;IAEAE,QAAQ,CAACD,YAAY,CAAC;EAC1B,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAME,YAAY,GAAGhB,KAAK,CAACE,MAAM,CAAgB,IAAI,CAAC;EAEtD,MAAMe,UAAU,GAAIJ,KAAyB,IAAK;IAC9CG,YAAY,CAACE,OAAO,IAAIC,YAAY,CAACH,YAAY,CAACE,OAAO,CAAC;IAC1DF,YAAY,CAACE,OAAO,GAAG,IAAI;IAC3B,IAAI,CAACP,QAAQ,EAAE;MACX;IACJ;IACAA,QAAQ,CAACE,KAA4B,CAAC;EAC1C,CAAC;EAED,MAAMO,aAAa,GAAGpB,KAAK,CAACqB,WAAW,CAAER,KAAyB,IAAK;IACnEE,QAAQ,CAACF,KAAK,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMS,mBAAmB,GAAIC,SAA6B,IAAK;IAC3D;IACA,IAAInB,OAAO,CAACmB,SAAS,EAAET,YAAY,CAAC,EAAE;MAClC;IACJ;IAEAE,YAAY,CAACE,OAAO,IAAIC,YAAY,CAACH,YAAY,CAACE,OAAO,CAAC;IAC1DF,YAAY,CAACE,OAAO,GAAG,IAAI;IAC3BF,YAAY,CAACE,OAAO,GAAGM,UAAU,CAAC,MAAMP,UAAU,CAACM,SAAS,CAAC,EAAEX,KAAK,CAAsB;EAC9F,CAAC;;EAED;EACAX,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,IAAI,CAACe,YAAY,CAACE,OAAO,EAAE;QACvB;MACJ;MACAC,YAAY,CAACH,YAAY,CAACE,OAAO,CAAC;MAClCF,YAAY,CAACE,OAAO,GAAG,IAAI;IAC/B,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAENjB,SAAS,CAAC,MAAM;IACZ,IAAIS,UAAU,CAACQ,OAAO,EAAE;MACpBR,UAAU,CAACQ,OAAO,GAAG,KAAK;MAC1B;IACJ;IAEAI,mBAAmB,CAACT,KAAK,CAAC;EAC9B,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAMY,QAAQ,GAAG;IACb,GAAGhB,KAAK;IACRI,KAAK,EAAEA,KAAK;IACZF,QAAQ,EAAES;EACd,CAAC;EAED,MAAMM,UAAU,GACZ,OAAOlB,QAAQ,KAAK,UAAU,GAAIA,QAAQ,GAA4C,IAAI;EAC9F,MAAMmB,KAAK,GAAGD,UAAU,GAClBA,UAAU,CAACD,QAAQ,CAAC,gBACpBzB,KAAK,CAAC4B,YAAY,CAACpB,QAAQ,EAAmCiB,QAAQ,CAAC;EAE7E,MAAMI,KAAK,GAAG;IAAE,GAAIF,KAAK,CAACE;EAAuC,CAAC;EAClE,MAAMC,aAAa,GAAGD,KAAK,CAACE,SAAS,IAAI1B,aAAa;EACtD,MAAM2B,UAAU,GAAGH,KAAK,CAACI,MAAM,IAAI5B,aAAa;;EAEhD;EACA,MAAM4B,MAAsB,GAAGC,EAAE,IAAI;IACjC,IAAI,CAACA,EAAE,CAAC,SAAS,CAAC,EAAE;MAChB;IACJ;IACAA,EAAE,CAACC,OAAO,CAAC,CAAC;IACZlB,UAAU,CAAEiB,EAAE,CAACE,MAAM,CAAsBvB,KAAe,CAAC;IAC3DmB,UAAU,CAACE,EAAE,CAAC;EAClB,CAAC;;EAED;EACA,MAAMH,SAA4B,GAAGG,EAAE,IAAI;IACvCA,EAAE,CAACC,OAAO,CAAC,CAAC;IACZ,IAAID,EAAE,CAACG,GAAG,KAAK,KAAK,EAAE;MAClBpB,UAAU,CAAEiB,EAAE,CAACE,MAAM,CAAsBvB,KAAe,CAAC;MAC3DiB,aAAa,CAACI,EAAE,CAAC;IACrB,CAAC,MAAM,IAAIA,EAAE,CAACG,GAAG,KAAK,OAAO,EAAE;MAC3BpB,UAAU,CAAEiB,EAAE,CAACE,MAAM,CAAsBvB,KAAe,CAAC;MAC3DiB,aAAa,CAACI,EAAE,CAAC;IACrB,CAAC,MAAM;MACHJ,aAAa,CAACI,EAAE,CAAC;IACrB;EACJ,CAAC;EAED,oBAAOlC,KAAK,CAAC4B,YAAY,CAACD,KAAK,EAAE;IAAE,GAAGE,KAAK;IAAEI,MAAM;IAAEF;EAAU,CAAC,CAAC;AACrE,CAAC","ignoreList":[]}
|
package/Dialog/Dialog.stories.js
CHANGED
|
@@ -7,8 +7,6 @@ import { DropdownMenu } from "../DropdownMenu/index.js";
|
|
|
7
7
|
import { ReactComponent as NotificationIcon } from "@webiny/icons/notifications_active.svg";
|
|
8
8
|
import { Tabs } from "../Tabs/index.js";
|
|
9
9
|
import { IconPicker } from "../IconPicker/index.js";
|
|
10
|
-
|
|
11
|
-
// @ts-expect-error
|
|
12
10
|
library.add(fas);
|
|
13
11
|
const meta = {
|
|
14
12
|
title: "Components/Dialog",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","library","fas","Dialog","Button","DropdownMenu","ReactComponent","NotificationIcon","Tabs","IconPicker","add","meta","title","component","argTypes","Default","args","size","trigger","createElement","variant","text","description","info","Fragment","href","children","onOpenChange","opened","console","log","actions","CancelAction","ConfirmAction","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","render","props","open","setOpen","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","value","setValue","icons","prefix","name","onChange","WithIcon","icon","Icon","label","PreventOutsideDismiss","dismissible","WithTabs","bodyPadding","separator","spacing","tabs","Tab","key","Documentation","control","options","defaultValue"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Dialog } from \"./Dialog.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\n// @ts-expect-error\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n title: \"Components/Dialog\",\n component: Dialog,\n argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n args: {\n size: \"md\",\n trigger: <Button variant=\"primary\" text={\"Open\"} />,\n title: \"Dialog Title\",\n description: \"A short dialog description.\",\n info: (\n <>\n Learn more about this <a href={\"#\"}>here</a>.\n </>\n ),\n children: (\n <>\n The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n winds, is something that deserves all admiration. Crafted with perfect textures, it\n bravely withstands storms and gently shades the rays of the sun. A remarkable\n innovation, with an ergonomically designed grip most suited to the hand, it remains\n stable even in the fiercest weather.\n </>\n ),\n onOpenChange: opened => {\n console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n },\n actions: (\n <>\n <Dialog.CancelAction />\n <Dialog.ConfirmAction />\n </>\n )\n },\n argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n args: {\n ...Default.args,\n size: \"sm\"\n }\n};\n\nexport const SizeMedium: Story = {\n args: {\n ...Default.args,\n size: \"md\"\n }\n};\n\nexport const SizeLarge: Story = {\n args: {\n ...Default.args,\n size: \"lg\"\n }\n};\n\nexport const SizeExtraLarge: Story = {\n args: {\n ...Default.args,\n size: \"xl\"\n }\n};\n\nexport const SizeFullScreen: Story = {\n args: {\n ...Default.args,\n size: \"full\"\n }\n};\n\nexport const ControlledVisibility: Story = {\n render: props => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n <Dialog\n {...props}\n open={open}\n onOpenChange={open => {\n if (!open) {\n setOpen(false);\n }\n }}\n />\n </>\n );\n },\n args: { ...Default.args, trigger: null }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n args: {\n ...Default.args,\n onClose: () => {\n console.log(\"onClose triggered\");\n },\n onOpen: () => {\n console.log(\"onOpen triggered\");\n }\n }\n};\n\nexport const WithDropdownMenu: Story = {\n render: props => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n <DropdownMenu.Item\n text={\"Open Dialog\"}\n content={\"Open Dialog\"}\n onClick={() => setOpen(true)}\n />\n </DropdownMenu>\n\n <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n </>\n );\n },\n args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n args: {\n ...Default.args,\n info: null,\n showCloseButton: false,\n title: \"Confirm Action\",\n description: \"Are you sure you want to delete this item?\",\n children: (\n <>\n <p>This action cannot be undone.</p>\n <p>Deleted items cannot be recovered.</p>\n </>\n )\n }\n};\n\nexport const DropdownMenuInDialog: Story = {\n args: {\n ...Default.args,\n children: (\n <>\n <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n <DropdownMenu.Item text={\"Billing\"} />\n <DropdownMenu.Item text={\"Settings\"} />\n <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n </DropdownMenu>\n </>\n )\n }\n};\n\nexport const DropdownIconPickerInDialog: Story = {\n args: {\n ...Default.args\n },\n render: args => {\n const [value, setValue] = useState(\"\");\n return (\n <Dialog {...args}>\n <IconPicker\n icons={[\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n { prefix: \"fas\", name: \"naira-sign\" },\n { prefix: \"fas\", name: \"cart-arrow-down\" },\n { prefix: \"fas\", name: \"walkie-talkie\" },\n { prefix: \"fas\", name: \"file-edit\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"pen-square\" },\n { prefix: \"fas\", name: \"pencil-square\" },\n { prefix: \"fas\", name: \"square-pen\" },\n { prefix: \"fas\", name: \"suitcase-rolling\" },\n { prefix: \"fas\", name: \"person-circle-exclamation\" },\n { prefix: \"fas\", name: \"chevron-down\" },\n { prefix: \"fas\", name: \"battery\" },\n { prefix: \"fas\", name: \"battery-5\" },\n { prefix: \"fas\", name: \"battery-full\" },\n { prefix: \"fas\", name: \"skull-crossbones\" },\n { prefix: \"fas\", name: \"code-compare\" },\n { prefix: \"fas\", name: \"list-dots\" },\n { prefix: \"fas\", name: \"list-ul\" },\n { prefix: \"fas\", name: \"school-lock\" },\n { prefix: \"fas\", name: \"tower-cell\" },\n { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n { prefix: \"fas\", name: \"down-long\" },\n { prefix: \"fas\", name: \"ranking-star\" },\n { prefix: \"fas\", name: \"chess-king\" },\n { prefix: \"fas\", name: \"person-harassing\" },\n { prefix: \"fas\", name: \"brazilian-real-sign\" },\n { prefix: \"fas\", name: \"landmark-alt\" }\n ]}\n value={value}\n onChange={value => {\n console.log(\"Selected icon:\", value);\n setValue(value);\n }}\n />\n </Dialog>\n );\n }\n};\n\nexport const WithIcon: Story = {\n args: {\n ...Default.args,\n icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n }\n};\n\nexport const PreventOutsideDismiss: Story = {\n args: {\n ...Default.args,\n dismissible: false\n }\n};\n\nexport const WithTabs: Story = {\n args: {\n ...Default.args,\n bodyPadding: false,\n children: (\n <>\n <Tabs\n separator={true}\n spacing={\"lg\"}\n tabs={[\n <Tabs.Tab\n key={\"account\"}\n value={\"account\"}\n trigger={\"Account\"}\n content={\"Make changes to your account here.\"}\n />,\n <Tabs.Tab\n key={\"company\"}\n value={\"company\"}\n trigger={\"Company\"}\n content={\"Make changes to your company info here.\"}\n />,\n <Tabs.Tab\n key={\"security\"}\n value={\"security\"}\n trigger={\"Security\"}\n content={\"Make changes to your security settings here.\"}\n />,\n <Tabs.Tab\n key={\"development\"}\n value={\"development\"}\n trigger={\"Development\"}\n content={\"Make changes to your development settings here.\"}\n />\n ]}\n />\n </>\n )\n }\n};\n\nexport const Documentation: Story = {\n render: args => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n </>\n );\n },\n args: {\n title: \"Dialog Title\",\n description: \"A short dialog description.\",\n showCloseButton: true,\n dismissible: true,\n bodyPadding: true,\n info: (\n <>\n Learn more about this <a href={\"#\"}>here</a>.\n </>\n ),\n children: (\n <>\n This is the dialog content area. You can place any content here including forms,\n text, images, or other components.\n </>\n ),\n actions: (\n <>\n <Dialog.CancelAction />\n <Dialog.ConfirmAction />\n </>\n )\n },\n argTypes: {\n title: {\n description: \"Title displayed in the header\",\n control: \"text\"\n },\n description: {\n description: \"Description displayed below the title\",\n control: \"text\"\n },\n size: {\n description: \"Controls the size of the dialog\",\n control: \"select\",\n options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n },\n showCloseButton: {\n description:\n \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n control: \"boolean\",\n defaultValue: true\n },\n dismissible: {\n description:\n \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n control: \"boolean\",\n defaultValue: true\n },\n bodyPadding: {\n description: \"Add padding to the Dialog body.\",\n control: \"boolean\",\n defaultValue: true\n },\n info: {\n description:\n \"Additional info displayed below the description, please refer to the example below for details.\"\n },\n children: {\n description:\n \"Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n },\n actions: {\n description:\n \"Actions displayed in the footer, please refer to the code example for details.\"\n }\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","useState","library","fas","Dialog","Button","DropdownMenu","ReactComponent","NotificationIcon","Tabs","IconPicker","add","meta","title","component","argTypes","Default","args","size","trigger","createElement","variant","text","description","info","Fragment","href","children","onOpenChange","opened","console","log","actions","CancelAction","ConfirmAction","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","render","props","open","setOpen","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","value","setValue","icons","prefix","name","onChange","WithIcon","icon","Icon","label","PreventOutsideDismiss","dismissible","WithTabs","bodyPadding","separator","spacing","tabs","Tab","key","Documentation","control","options","defaultValue"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Dialog } from \"./Dialog.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n title: \"Components/Dialog\",\n component: Dialog,\n argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n args: {\n size: \"md\",\n trigger: <Button variant=\"primary\" text={\"Open\"} />,\n title: \"Dialog Title\",\n description: \"A short dialog description.\",\n info: (\n <>\n Learn more about this <a href={\"#\"}>here</a>.\n </>\n ),\n children: (\n <>\n The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n winds, is something that deserves all admiration. Crafted with perfect textures, it\n bravely withstands storms and gently shades the rays of the sun. A remarkable\n innovation, with an ergonomically designed grip most suited to the hand, it remains\n stable even in the fiercest weather.\n </>\n ),\n onOpenChange: opened => {\n console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n },\n actions: (\n <>\n <Dialog.CancelAction />\n <Dialog.ConfirmAction />\n </>\n )\n },\n argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n args: {\n ...Default.args,\n size: \"sm\"\n }\n};\n\nexport const SizeMedium: Story = {\n args: {\n ...Default.args,\n size: \"md\"\n }\n};\n\nexport const SizeLarge: Story = {\n args: {\n ...Default.args,\n size: \"lg\"\n }\n};\n\nexport const SizeExtraLarge: Story = {\n args: {\n ...Default.args,\n size: \"xl\"\n }\n};\n\nexport const SizeFullScreen: Story = {\n args: {\n ...Default.args,\n size: \"full\"\n }\n};\n\nexport const ControlledVisibility: Story = {\n render: props => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n <Dialog\n {...props}\n open={open}\n onOpenChange={open => {\n if (!open) {\n setOpen(false);\n }\n }}\n />\n </>\n );\n },\n args: { ...Default.args, trigger: null }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n args: {\n ...Default.args,\n onClose: () => {\n console.log(\"onClose triggered\");\n },\n onOpen: () => {\n console.log(\"onOpen triggered\");\n }\n }\n};\n\nexport const WithDropdownMenu: Story = {\n render: props => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n <DropdownMenu.Item\n text={\"Open Dialog\"}\n content={\"Open Dialog\"}\n onClick={() => setOpen(true)}\n />\n </DropdownMenu>\n\n <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n </>\n );\n },\n args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n args: {\n ...Default.args,\n info: null,\n showCloseButton: false,\n title: \"Confirm Action\",\n description: \"Are you sure you want to delete this item?\",\n children: (\n <>\n <p>This action cannot be undone.</p>\n <p>Deleted items cannot be recovered.</p>\n </>\n )\n }\n};\n\nexport const DropdownMenuInDialog: Story = {\n args: {\n ...Default.args,\n children: (\n <>\n <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n <DropdownMenu.Item text={\"Billing\"} />\n <DropdownMenu.Item text={\"Settings\"} />\n <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n </DropdownMenu>\n </>\n )\n }\n};\n\nexport const DropdownIconPickerInDialog: Story = {\n args: {\n ...Default.args\n },\n render: args => {\n const [value, setValue] = useState(\"\");\n return (\n <Dialog {...args}>\n <IconPicker\n icons={[\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n { prefix: \"fas\", name: \"naira-sign\" },\n { prefix: \"fas\", name: \"cart-arrow-down\" },\n { prefix: \"fas\", name: \"walkie-talkie\" },\n { prefix: \"fas\", name: \"file-edit\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"pen-square\" },\n { prefix: \"fas\", name: \"pencil-square\" },\n { prefix: \"fas\", name: \"square-pen\" },\n { prefix: \"fas\", name: \"suitcase-rolling\" },\n { prefix: \"fas\", name: \"person-circle-exclamation\" },\n { prefix: \"fas\", name: \"chevron-down\" },\n { prefix: \"fas\", name: \"battery\" },\n { prefix: \"fas\", name: \"battery-5\" },\n { prefix: \"fas\", name: \"battery-full\" },\n { prefix: \"fas\", name: \"skull-crossbones\" },\n { prefix: \"fas\", name: \"code-compare\" },\n { prefix: \"fas\", name: \"list-dots\" },\n { prefix: \"fas\", name: \"list-ul\" },\n { prefix: \"fas\", name: \"school-lock\" },\n { prefix: \"fas\", name: \"tower-cell\" },\n { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n { prefix: \"fas\", name: \"down-long\" },\n { prefix: \"fas\", name: \"ranking-star\" },\n { prefix: \"fas\", name: \"chess-king\" },\n { prefix: \"fas\", name: \"person-harassing\" },\n { prefix: \"fas\", name: \"brazilian-real-sign\" },\n { prefix: \"fas\", name: \"landmark-alt\" }\n ]}\n value={value}\n onChange={value => {\n console.log(\"Selected icon:\", value);\n setValue(value);\n }}\n />\n </Dialog>\n );\n }\n};\n\nexport const WithIcon: Story = {\n args: {\n ...Default.args,\n icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n }\n};\n\nexport const PreventOutsideDismiss: Story = {\n args: {\n ...Default.args,\n dismissible: false\n }\n};\n\nexport const WithTabs: Story = {\n args: {\n ...Default.args,\n bodyPadding: false,\n children: (\n <>\n <Tabs\n separator={true}\n spacing={\"lg\"}\n tabs={[\n <Tabs.Tab\n key={\"account\"}\n value={\"account\"}\n trigger={\"Account\"}\n content={\"Make changes to your account here.\"}\n />,\n <Tabs.Tab\n key={\"company\"}\n value={\"company\"}\n trigger={\"Company\"}\n content={\"Make changes to your company info here.\"}\n />,\n <Tabs.Tab\n key={\"security\"}\n value={\"security\"}\n trigger={\"Security\"}\n content={\"Make changes to your security settings here.\"}\n />,\n <Tabs.Tab\n key={\"development\"}\n value={\"development\"}\n trigger={\"Development\"}\n content={\"Make changes to your development settings here.\"}\n />\n ]}\n />\n </>\n )\n }\n};\n\nexport const Documentation: Story = {\n render: args => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n </>\n );\n },\n args: {\n title: \"Dialog Title\",\n description: \"A short dialog description.\",\n showCloseButton: true,\n dismissible: true,\n bodyPadding: true,\n info: (\n <>\n Learn more about this <a href={\"#\"}>here</a>.\n </>\n ),\n children: (\n <>\n This is the dialog content area. You can place any content here including forms,\n text, images, or other components.\n </>\n ),\n actions: (\n <>\n <Dialog.CancelAction />\n <Dialog.ConfirmAction />\n </>\n )\n },\n argTypes: {\n title: {\n description: \"Title displayed in the header\",\n control: \"text\"\n },\n description: {\n description: \"Description displayed below the title\",\n control: \"text\"\n },\n size: {\n description: \"Controls the size of the dialog\",\n control: \"select\",\n options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n },\n showCloseButton: {\n description:\n \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n control: \"boolean\",\n defaultValue: true\n },\n dismissible: {\n description:\n \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n control: \"boolean\",\n defaultValue: true\n },\n bodyPadding: {\n description: \"Add padding to the Dialog body.\",\n control: \"boolean\",\n defaultValue: true\n },\n info: {\n description:\n \"Additional info displayed below the description, please refer to the example below for details.\"\n },\n children: {\n description:\n \"Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n },\n actions: {\n description:\n \"Actions displayed in the footer, please refer to the code example for details.\"\n }\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { cn, cva } from "../../utils.js";
|
|
3
3
|
const dialogBodyVariants = cva("flex-1", {
|
|
4
|
-
// Flex grows to fill available space - we need this for the body to expand in case of a "fullscreen" dialog
|
|
4
|
+
// Flex grows to fill available space - we need this for the body to expand in case of a "fullscreen" dialog.
|
|
5
5
|
variants: {
|
|
6
6
|
size: {
|
|
7
7
|
sm: "px-md-extra",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","cn","cva","dialogBodyVariants","variants","size","sm","md","lg","xl","full","bodyPadding","true","false","defaultVariants","DialogBody","children","createElement","className"],"sources":["DialogBody.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { DialogProps } from \"~/Dialog/index.js\";\n\nconst dialogBodyVariants = cva(\"flex-1\", {\n // Flex grows to fill available space - we need this for the body to expand in case of a \"fullscreen\" dialog
|
|
1
|
+
{"version":3,"names":["React","cn","cva","dialogBodyVariants","variants","size","sm","md","lg","xl","full","bodyPadding","true","false","defaultVariants","DialogBody","children","createElement","className"],"sources":["DialogBody.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { DialogProps } from \"~/Dialog/index.js\";\n\nconst dialogBodyVariants = cva(\"flex-1\", {\n // Flex grows to fill available space - we need this for the body to expand in case of a \"fullscreen\" dialog.\n variants: {\n size: {\n sm: \"px-md-extra\",\n md: \"px-md-extra\",\n lg: \"px-lg\",\n xl: \"px-lg\",\n full: \"px-lg\"\n },\n bodyPadding: {\n true: \"\",\n false: \"px-none! py-none!\"\n }\n },\n defaultVariants: {\n size: \"md\",\n bodyPadding: true\n }\n});\n\nexport type DialogBodyProps = Pick<DialogProps, \"children\" | \"bodyPadding\" | \"size\">;\n\nexport const DialogBody = ({ bodyPadding, size, children }: DialogBodyProps) => {\n return <div className={cn(dialogBodyVariants({ size, bodyPadding }))}>{children}</div>;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAGhB,MAAMC,kBAAkB,GAAGD,GAAG,CAAC,QAAQ,EAAE;EACrC;EACAE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,IAAI,EAAE;IACV,CAAC;IACDC,WAAW,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbT,IAAI,EAAE,IAAI;IACVM,WAAW,EAAE;EACjB;AACJ,CAAC,CAAC;AAIF,OAAO,MAAMI,UAAU,GAAGA,CAAC;EAAEJ,WAAW;EAAEN,IAAI;EAAEW;AAA0B,CAAC,KAAK;EAC5E,oBAAOhB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAEjB,EAAE,CAACE,kBAAkB,CAAC;MAAEE,IAAI;MAAEM;IAAY,CAAC,CAAC;EAAE,GAAEK,QAAc,CAAC;AAC1F,CAAC","ignoreList":[]}
|
package/Grid/Grid.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ declare const gridVariants: (props?: ({
|
|
|
31
31
|
gap?: "none" | "small" | "compact" | "micro" | "comfortable" | "spacious" | null | undefined;
|
|
32
32
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
33
33
|
interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
|
|
34
|
-
children: React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
|
|
34
|
+
children: null | React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
|
|
35
35
|
}
|
|
36
36
|
declare const Grid: (({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
|
|
37
37
|
original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
|
package/Grid/Grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","cn","cva","withStaticProps","makeDecoratable","columnVariants","variants","span","auto","offset","align","top","middle","bottom","defaultVariants","ColumnBase","children","className","props","createElement","Object","assign","Column","gridVariants","gap","none","micro","small","compact","comfortable","spacious","GridBase","DecoratableGrid","Grid"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n variants: {\n span: {\n auto: \"col-auto\",\n 1: \"col-span-1\",\n 2: \"col-span-2\",\n 3: \"col-span-3\",\n 4: \"col-span-4\",\n 5: \"col-span-5\",\n 6: \"col-span-6\",\n 7: \"col-span-7\",\n 8: \"col-span-8\",\n 9: \"col-span-9\",\n 10: \"col-span-10\",\n 11: \"col-span-11\",\n 12: \"col-span-12\"\n },\n offset: {\n 1: \"col-start-2\",\n 2: \"col-start-3\",\n 3: \"col-start-4\",\n 4: \"col-start-5\",\n 5: \"col-start-6\",\n 6: \"col-start-7\",\n 7: \"col-start-8\",\n 8: \"col-start-9\",\n 9: \"col-start-10\",\n 10: \"col-start-11\",\n 11: \"col-start-12\"\n },\n align: {\n top: \"self-start\",\n middle: \"self-center\",\n bottom: \"self-end\"\n }\n },\n defaultVariants: {\n span: \"auto\"\n }\n});\n\ninterface ColumnProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof columnVariants> {\n children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n return (\n <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n {children}\n </div>\n );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n variants: {\n gap: {\n none: \"gap-0\",\n micro: \"gap-xs\",\n small: \"gap-sm\",\n compact: \"gap-md\",\n comfortable: \"gap-lg\",\n spacious: \"gap-xl\"\n }\n },\n defaultVariants: {\n gap: \"comfortable\"\n }\n});\n\ninterface GridProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof gridVariants> {\n children:\n | React.ReactElement<ColumnProps, typeof Column>\n | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n return (\n <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n {children}\n </div>\n );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAElD,MAAMC,cAAc,GAAGH,GAAG,CAAC,EAAE,EAAE;EAC3BI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,UAAU;MAChB,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE;IACR,CAAC;IACDC,MAAM,EAAE;MACJ,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,cAAc;MACjB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,GAAG,EAAE,YAAY;MACjBC,MAAM,EAAE,aAAa;MACrBC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAQF,MAAMQ,UAAU,GAAGA,CAAC;EAAER,IAAI;EAAEG,KAAK;EAAEM,QAAQ;EAAEC,SAAS;EAAER,MAAM;EAAE,GAAGS;AAAmB,CAAC,KAAK;EACxF,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAACI,cAAc,CAAC;MAAEE,IAAI;MAAEE,MAAM;MAAEC;IAAM,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC7ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,MAAM,GAAGlB,eAAe,CAAC,QAAQ,EAAEW,UAAU,CAAC;AAEpD,MAAMQ,YAAY,GAAGrB,GAAG,CAAC,MAAM,EAAE;EAC7BI,QAAQ,EAAE;IACNkB,GAAG,EAAE;MACDC,IAAI,EAAE,OAAO;MACbC,KAAK,EAAE,QAAQ;MACfC,KAAK,EAAE,QAAQ;MACfC,OAAO,EAAE,QAAQ;MACjBC,WAAW,EAAE,QAAQ;MACrBC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDhB,eAAe,EAAE;IACbU,GAAG,EAAE;EACT;AACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["React","cn","cva","withStaticProps","makeDecoratable","columnVariants","variants","span","auto","offset","align","top","middle","bottom","defaultVariants","ColumnBase","children","className","props","createElement","Object","assign","Column","gridVariants","gap","none","micro","small","compact","comfortable","spacious","GridBase","DecoratableGrid","Grid"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n variants: {\n span: {\n auto: \"col-auto\",\n 1: \"col-span-1\",\n 2: \"col-span-2\",\n 3: \"col-span-3\",\n 4: \"col-span-4\",\n 5: \"col-span-5\",\n 6: \"col-span-6\",\n 7: \"col-span-7\",\n 8: \"col-span-8\",\n 9: \"col-span-9\",\n 10: \"col-span-10\",\n 11: \"col-span-11\",\n 12: \"col-span-12\"\n },\n offset: {\n 1: \"col-start-2\",\n 2: \"col-start-3\",\n 3: \"col-start-4\",\n 4: \"col-start-5\",\n 5: \"col-start-6\",\n 6: \"col-start-7\",\n 7: \"col-start-8\",\n 8: \"col-start-9\",\n 9: \"col-start-10\",\n 10: \"col-start-11\",\n 11: \"col-start-12\"\n },\n align: {\n top: \"self-start\",\n middle: \"self-center\",\n bottom: \"self-end\"\n }\n },\n defaultVariants: {\n span: \"auto\"\n }\n});\n\ninterface ColumnProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof columnVariants> {\n children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n return (\n <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n {children}\n </div>\n );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n variants: {\n gap: {\n none: \"gap-0\",\n micro: \"gap-xs\",\n small: \"gap-sm\",\n compact: \"gap-md\",\n comfortable: \"gap-lg\",\n spacious: \"gap-xl\"\n }\n },\n defaultVariants: {\n gap: \"comfortable\"\n }\n});\n\ninterface GridProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof gridVariants> {\n children:\n | null\n | React.ReactElement<ColumnProps, typeof Column>\n | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n return (\n <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n {children}\n </div>\n );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAElD,MAAMC,cAAc,GAAGH,GAAG,CAAC,EAAE,EAAE;EAC3BI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,UAAU;MAChB,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE;IACR,CAAC;IACDC,MAAM,EAAE;MACJ,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,cAAc;MACjB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,GAAG,EAAE,YAAY;MACjBC,MAAM,EAAE,aAAa;MACrBC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAQF,MAAMQ,UAAU,GAAGA,CAAC;EAAER,IAAI;EAAEG,KAAK;EAAEM,QAAQ;EAAEC,SAAS;EAAER,MAAM;EAAE,GAAGS;AAAmB,CAAC,KAAK;EACxF,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAACI,cAAc,CAAC;MAAEE,IAAI;MAAEE,MAAM;MAAEC;IAAM,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC7ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,MAAM,GAAGlB,eAAe,CAAC,QAAQ,EAAEW,UAAU,CAAC;AAEpD,MAAMQ,YAAY,GAAGrB,GAAG,CAAC,MAAM,EAAE;EAC7BI,QAAQ,EAAE;IACNkB,GAAG,EAAE;MACDC,IAAI,EAAE,OAAO;MACbC,KAAK,EAAE,QAAQ;MACfC,KAAK,EAAE,QAAQ;MACfC,OAAO,EAAE,QAAQ;MACjBC,WAAW,EAAE,QAAQ;MACrBC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDhB,eAAe,EAAE;IACbU,GAAG,EAAE;EACT;AACJ,CAAC,CAAC;AAWF,MAAMO,QAAQ,GAAGA,CAAC;EAAEP,GAAG;EAAER,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACpE,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAAC,cAAc,EAAEsB,YAAY,CAAC;MAAEC;IAAI,CAAC,CAAC,EAAEP,SAAS;EAAE,IAC3ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMgB,eAAe,GAAG5B,eAAe,CAAC,MAAM,EAAE2B,QAAQ,CAAC;AAEzD,MAAME,IAAI,GAAG9B,eAAe,CAAC6B,eAAe,EAAE;EAAEV;AAAO,CAAC,CAAC;AAEzD,SAASW,IAAI","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","library","fas","IconPicker","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","add","Default","icons","prefix","name","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleChange","newValue","undefined"],"sources":["IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n title: \"Components/Form/IconPicker\",\n component: IconPicker,\n argTypes: {\n onChange: { action: \"onChange\" },\n disabled: {\n control: \"boolean\",\n defaultValue: false\n }\n },\n parameters: {\n layout: \"padded\"\n },\n render: args => {\n const [value, setValue] = useState(args.value);\n return <IconPicker {...args} value={value} onChange={setValue} />;\n }\n};\n\n// @ts-expect-error\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n args: {\n icons: [\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n { prefix: \"fas\", name: \"naira-sign\" },\n { prefix: \"fas\", name: \"cart-arrow-down\" },\n { prefix: \"fas\", name: \"walkie-talkie\" },\n { prefix: \"fas\", name: \"file-edit\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"pen-square\" },\n { prefix: \"fas\", name: \"pencil-square\" },\n { prefix: \"fas\", name: \"square-pen\" },\n { prefix: \"fas\", name: \"suitcase-rolling\" },\n { prefix: \"fas\", name: \"person-circle-exclamation\" },\n { prefix: \"fas\", name: \"chevron-down\" },\n { prefix: \"fas\", name: \"battery\" },\n { prefix: \"fas\", name: \"battery-5\" },\n { prefix: \"fas\", name: \"battery-full\" },\n { prefix: \"fas\", name: \"skull-crossbones\" },\n { prefix: \"fas\", name: \"code-compare\" },\n { prefix: \"fas\", name: \"list-dots\" },\n { prefix: \"fas\", name: \"list-ul\" },\n { prefix: \"fas\", name: \"school-lock\" },\n { prefix: \"fas\", name: \"tower-cell\" },\n { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n { prefix: \"fas\", name: \"down-long\" },\n { prefix: \"fas\", name: \"ranking-star\" },\n { prefix: \"fas\", name: \"chess-king\" },\n { prefix: \"fas\", name: \"person-harassing\" },\n { prefix: \"fas\", name: \"brazilian-real-sign\" },\n { prefix: \"fas\", name: \"landmark-alt\" },\n { prefix: \"fas\", name: \"landmark-dome\" },\n { prefix: \"fas\", name: \"arrow-up\" },\n { prefix: \"fas\", name: \"television\" },\n { prefix: \"fas\", name: \"tv-alt\" },\n { prefix: \"fas\", name: \"tv\" },\n { prefix: \"fas\", name: \"shrimp\" },\n { prefix: \"fas\", name: \"tasks\" },\n { prefix: \"fas\", name: \"list-check\" },\n { prefix: \"fas\", name: \"jug-detergent\" },\n { prefix: \"fas\", name: \"user-circle\" },\n { prefix: \"fas\", name: \"circle-user\" },\n { prefix: \"fas\", name: \"user-shield\" },\n { prefix: \"fas\", name: \"wind\" },\n { prefix: \"fas\", name: \"car-crash\" },\n { prefix: \"fas\", name: \"car-burst\" },\n { prefix: \"fas\", name: \"y\" },\n { prefix: \"fas\", name: \"snowboarding\" },\n { prefix: \"fas\", name: \"person-snowboarding\" },\n { prefix: \"fas\", name: \"shipping-fast\" },\n { prefix: \"fas\", name: \"truck-fast\" }\n ]\n }\n};\n\nexport const WithLabel: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\"\n }\n};\n\nexport const WithLabelRequired: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n required: true\n }\n};\n\nexport const WithDescription: Story = {\n args: {\n ...Default.args,\n description: \"Provide the required information for processing your request.\"\n }\n};\n\nexport const WithNotes: Story = {\n args: {\n ...Default.args,\n note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n }\n};\n\nexport const WithErrors: Story = {\n args: {\n ...Default.args,\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const Disabled: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n disabled: true\n }\n};\n\nexport const FullExample: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n required: true,\n description: \"Provide the required information for processing your request.\",\n note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const Documentation: Story = {\n render: args => {\n const [value, setValue] = useState(args.value || null);\n const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n // Update value when args.value changes\n useEffect(() => {\n setValue(args.value || null);\n }, [args.value]);\n\n const handleChange = (newValue: any) => {\n setValue(newValue);\n\n // Simple required validation\n if (args.required && !newValue) {\n setValidation({ isValid: false, message: \"Please select an icon\" });\n } else {\n setValidation({ isValid: true, message: \"\" });\n }\n };\n\n // Validate on required change or value change\n useEffect(() => {\n if (args.required && !value) {\n setValidation({ isValid: false, message: \"Please select an icon\" });\n } else {\n setValidation({ isValid: true, message: \"\" });\n }\n }, [args.required, value]);\n\n return (\n <IconPicker\n {...args}\n value={value}\n onChange={handleChange}\n validation={validation}\n required={args.required}\n />\n );\n },\n args: {\n label: \"Select an Icon\",\n required: true,\n disabled: false,\n description: \"Choose an icon for your button\",\n note: \"Note: The selected icon will be displayed on your button\",\n icons: [\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"user-circle\" },\n { prefix: \"fas\", name: \"circle-user\" }\n ],\n value: null,\n validation: undefined\n },\n argTypes: {\n label: {\n description: \"Label text for the icon picker\",\n control: \"text\"\n },\n required: {\n description: \"Makes the field required when set to true\",\n control: \"boolean\"\n },\n disabled: {\n description: \"Disables the icon picker when set to true\",\n control: \"boolean\"\n },\n description: {\n description: \"Additional description text below the field\",\n control: \"text\"\n },\n note: {\n description: \"Additional note text below the field\",\n control: \"text\"\n },\n icons: {\n description: \"Array of available icons with prefix and name properties\",\n control: \"object\"\n },\n value: {\n description: \"The selected icon value (in format 'prefix/name')\"\n },\n validation: {\n description:\n \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n },\n onChange: {\n description: \"Function called when an icon is selected\"\n }\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","library","fas","IconPicker","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","add","Default","icons","prefix","name","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleChange","newValue","undefined"],"sources":["IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n title: \"Components/Form/IconPicker\",\n component: IconPicker,\n argTypes: {\n onChange: { action: \"onChange\" },\n disabled: {\n control: \"boolean\",\n defaultValue: false\n }\n },\n parameters: {\n layout: \"padded\"\n },\n render: args => {\n const [value, setValue] = useState(args.value);\n return <IconPicker {...args} value={value} onChange={setValue} />;\n }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n args: {\n icons: [\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n { prefix: \"fas\", name: \"naira-sign\" },\n { prefix: \"fas\", name: \"cart-arrow-down\" },\n { prefix: \"fas\", name: \"walkie-talkie\" },\n { prefix: \"fas\", name: \"file-edit\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"pen-square\" },\n { prefix: \"fas\", name: \"pencil-square\" },\n { prefix: \"fas\", name: \"square-pen\" },\n { prefix: \"fas\", name: \"suitcase-rolling\" },\n { prefix: \"fas\", name: \"person-circle-exclamation\" },\n { prefix: \"fas\", name: \"chevron-down\" },\n { prefix: \"fas\", name: \"battery\" },\n { prefix: \"fas\", name: \"battery-5\" },\n { prefix: \"fas\", name: \"battery-full\" },\n { prefix: \"fas\", name: \"skull-crossbones\" },\n { prefix: \"fas\", name: \"code-compare\" },\n { prefix: \"fas\", name: \"list-dots\" },\n { prefix: \"fas\", name: \"list-ul\" },\n { prefix: \"fas\", name: \"school-lock\" },\n { prefix: \"fas\", name: \"tower-cell\" },\n { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n { prefix: \"fas\", name: \"down-long\" },\n { prefix: \"fas\", name: \"ranking-star\" },\n { prefix: \"fas\", name: \"chess-king\" },\n { prefix: \"fas\", name: \"person-harassing\" },\n { prefix: \"fas\", name: \"brazilian-real-sign\" },\n { prefix: \"fas\", name: \"landmark-alt\" },\n { prefix: \"fas\", name: \"landmark-dome\" },\n { prefix: \"fas\", name: \"arrow-up\" },\n { prefix: \"fas\", name: \"television\" },\n { prefix: \"fas\", name: \"tv-alt\" },\n { prefix: \"fas\", name: \"tv\" },\n { prefix: \"fas\", name: \"shrimp\" },\n { prefix: \"fas\", name: \"tasks\" },\n { prefix: \"fas\", name: \"list-check\" },\n { prefix: \"fas\", name: \"jug-detergent\" },\n { prefix: \"fas\", name: \"user-circle\" },\n { prefix: \"fas\", name: \"circle-user\" },\n { prefix: \"fas\", name: \"user-shield\" },\n { prefix: \"fas\", name: \"wind\" },\n { prefix: \"fas\", name: \"car-crash\" },\n { prefix: \"fas\", name: \"car-burst\" },\n { prefix: \"fas\", name: \"y\" },\n { prefix: \"fas\", name: \"snowboarding\" },\n { prefix: \"fas\", name: \"person-snowboarding\" },\n { prefix: \"fas\", name: \"shipping-fast\" },\n { prefix: \"fas\", name: \"truck-fast\" }\n ]\n }\n};\n\nexport const WithLabel: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\"\n }\n};\n\nexport const WithLabelRequired: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n required: true\n }\n};\n\nexport const WithDescription: Story = {\n args: {\n ...Default.args,\n description: \"Provide the required information for processing your request.\"\n }\n};\n\nexport const WithNotes: Story = {\n args: {\n ...Default.args,\n note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n }\n};\n\nexport const WithErrors: Story = {\n args: {\n ...Default.args,\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const Disabled: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n disabled: true\n }\n};\n\nexport const FullExample: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n required: true,\n description: \"Provide the required information for processing your request.\",\n note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const Documentation: Story = {\n render: args => {\n const [value, setValue] = useState(args.value || null);\n const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n // Update value when args.value changes\n useEffect(() => {\n setValue(args.value || null);\n }, [args.value]);\n\n const handleChange = (newValue: any) => {\n setValue(newValue);\n\n // Simple required validation\n if (args.required && !newValue) {\n setValidation({ isValid: false, message: \"Please select an icon\" });\n } else {\n setValidation({ isValid: true, message: \"\" });\n }\n };\n\n // Validate on required change or value change\n useEffect(() => {\n if (args.required && !value) {\n setValidation({ isValid: false, message: \"Please select an icon\" });\n } else {\n setValidation({ isValid: true, message: \"\" });\n }\n }, [args.required, value]);\n\n return (\n <IconPicker\n {...args}\n value={value}\n onChange={handleChange}\n validation={validation}\n required={args.required}\n />\n );\n },\n args: {\n label: \"Select an Icon\",\n required: true,\n disabled: false,\n description: \"Choose an icon for your button\",\n note: \"Note: The selected icon will be displayed on your button\",\n icons: [\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"user-circle\" },\n { prefix: \"fas\", name: \"circle-user\" }\n ],\n value: null,\n validation: undefined\n },\n argTypes: {\n label: {\n description: \"Label text for the icon picker\",\n control: \"text\"\n },\n required: {\n description: \"Makes the field required when set to true\",\n control: \"boolean\"\n },\n disabled: {\n description: \"Disables the icon picker when set to true\",\n control: \"boolean\"\n },\n description: {\n description: \"Additional description text below the field\",\n control: \"text\"\n },\n note: {\n description: \"Additional note text below the field\",\n control: \"text\"\n },\n icons: {\n description: \"Array of available icons with prefix and name properties\",\n control: \"object\"\n },\n value: {\n description: \"The selected icon value (in format 'prefix/name')\"\n },\n validation: {\n description:\n \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n },\n onChange: {\n description: \"Function called when an icon is selected\"\n }\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","inputVariants","PopoverPrimitive","cn","cva","IconPickerGrid","IconPickerInput","IconPickerTrigger","useIconPicker","iconPickerVariants","variants","size","md","lg","xl","disabled","true","defaultVariants","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","inputRef","setTimeout","open","current","focus","createElement","onOpenChange","Trigger","asChild","className","variant","invalid","value","Content","align","onWheel","e","stopPropagation","searchQuery","onChange","icons","iconsLength","onIconSelect"],"sources":["IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n variants: {\n size: {\n md: \"w-16\",\n lg: \"w-16\",\n xl: \"w-20\"\n },\n disabled: {\n true: \"pointer-events-none\"\n }\n },\n defaultVariants: {\n size: \"lg\"\n }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n /**\n * Indicates if the field is disabled.\n */\n disabled?: boolean;\n /**\n * Callback triggered when the value changes.\n */\n onChange?: (value: string) => void;\n /**\n * List of icons to be displayed in the icon picker.\n */\n icons: IconPickerIconDto[];\n /**\n * Indicates if the input field is invalid.\n * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n */\n invalid?: InputPrimitiveProps[\"invalid\"];\n /**\n * Optional selected icon.\n */\n value?: string;\n /**\n * Variant of the input field.\n * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n */\n variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setTimeout(() => {\n if (vm.open && inputRef.current) {\n inputRef.current.focus();\n }\n }, 50);\n }, [vm.open]);\n\n return (\n <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n <PopoverPrimitive.Trigger asChild>\n <button\n data-disabled={props.disabled}\n className={cn(\n inputVariants({\n size: props.size,\n variant: props.variant,\n invalid: props.invalid\n }),\n iconPickerVariants({ size: props.size, disabled: props.disabled })\n )}\n >\n <IconPickerTrigger value={props.value} size={props.size} />\n </button>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content\n align={\"start\"}\n className={\"min-w-96\"}\n onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n >\n <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n <IconPickerGrid\n icons={vm.icons}\n iconsLength={vm.iconsLength}\n onIconSelect={setSelectedIcon}\n />\n </PopoverPrimitive.Content>\n </PopoverPrimitive>\n );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,aAAa;AACtB,SAASC,gBAAgB;AACzB,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,cAAc,EAAEC,eAAe,EAAEC,iBAAiB;AAE3D,SAASC,aAAa;AAEtB,MAAMC,kBAAkB,GAAGL,GAAG,CAAC,oCAAoC,EAAE;EACjEM,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE;IACR,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AA+BF,MAAMO,mBAAmB,GAAIC,KAA+B,IAAK;EAC7D,MAAM;IAAEC,EAAE;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAgB,CAAC,GAAGf,aAAa,CAACW,KAAK,CAAC;EAClF,MAAMK,QAAQ,GAAGxB,MAAM,CAAmB,
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","inputVariants","PopoverPrimitive","cn","cva","IconPickerGrid","IconPickerInput","IconPickerTrigger","useIconPicker","iconPickerVariants","variants","size","md","lg","xl","disabled","true","defaultVariants","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","inputRef","setTimeout","open","current","focus","createElement","onOpenChange","Trigger","asChild","className","variant","invalid","value","Content","align","onWheel","e","stopPropagation","searchQuery","onChange","icons","iconsLength","onIconSelect"],"sources":["IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n variants: {\n size: {\n md: \"w-16\",\n lg: \"w-16\",\n xl: \"w-20\"\n },\n disabled: {\n true: \"pointer-events-none\"\n }\n },\n defaultVariants: {\n size: \"lg\"\n }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n /**\n * Indicates if the field is disabled.\n */\n disabled?: boolean;\n /**\n * Callback triggered when the value changes.\n */\n onChange?: (value: string) => void;\n /**\n * List of icons to be displayed in the icon picker.\n */\n icons: IconPickerIconDto[];\n /**\n * Indicates if the input field is invalid.\n * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n */\n invalid?: InputPrimitiveProps[\"invalid\"];\n /**\n * Optional selected icon.\n */\n value?: string;\n /**\n * Variant of the input field.\n * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n */\n variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n // TODO figure out a better way to type this ref, without using `as unknown as`\n const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n useEffect(() => {\n setTimeout(() => {\n if (vm.open && inputRef.current) {\n inputRef.current.focus();\n }\n }, 50);\n }, [vm.open]);\n\n return (\n <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n <PopoverPrimitive.Trigger asChild>\n <button\n data-disabled={props.disabled}\n className={cn(\n inputVariants({\n size: props.size,\n variant: props.variant,\n invalid: props.invalid\n }),\n iconPickerVariants({ size: props.size, disabled: props.disabled })\n )}\n >\n <IconPickerTrigger value={props.value} size={props.size} />\n </button>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content\n align={\"start\"}\n className={\"min-w-96\"}\n onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n >\n <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n <IconPickerGrid\n icons={vm.icons}\n iconsLength={vm.iconsLength}\n onIconSelect={setSelectedIcon}\n />\n </PopoverPrimitive.Content>\n </PopoverPrimitive>\n );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,aAAa;AACtB,SAASC,gBAAgB;AACzB,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,cAAc,EAAEC,eAAe,EAAEC,iBAAiB;AAE3D,SAASC,aAAa;AAEtB,MAAMC,kBAAkB,GAAGL,GAAG,CAAC,oCAAoC,EAAE;EACjEM,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE;IACR,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AA+BF,MAAMO,mBAAmB,GAAIC,KAA+B,IAAK;EAC7D,MAAM;IAAEC,EAAE;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAgB,CAAC,GAAGf,aAAa,CAACW,KAAK,CAAC;EAClF;EACA,MAAMK,QAAQ,GAAGxB,MAAM,CAAmB,IAAmC,CAAC;EAE9ED,SAAS,CAAC,MAAM;IACZ0B,UAAU,CAAC,MAAM;MACb,IAAIL,EAAE,CAACM,IAAI,IAAIF,QAAQ,CAACG,OAAO,EAAE;QAC7BH,QAAQ,CAACG,OAAO,CAACC,KAAK,CAAC,CAAC;MAC5B;IACJ,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAACR,EAAE,CAACM,IAAI,CAAC,CAAC;EAEb,oBACI5B,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;IAACwB,IAAI,EAAEN,EAAE,CAACM,IAAK;IAACI,YAAY,EAAET;EAAiB,gBAC5DvB,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB,CAAC6B,OAAO;IAACC,OAAO;EAAA,gBAC7BlC,KAAA,CAAA+B,aAAA;IACI,iBAAeV,KAAK,CAACJ,QAAS;IAC9BkB,SAAS,EAAE9B,EAAE,CACTF,aAAa,CAAC;MACVU,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAChBuB,OAAO,EAAEf,KAAK,CAACe,OAAO;MACtBC,OAAO,EAAEhB,KAAK,CAACgB;IACnB,CAAC,CAAC,EACF1B,kBAAkB,CAAC;MAAEE,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAAEI,QAAQ,EAAEI,KAAK,CAACJ;IAAS,CAAC,CACrE;EAAE,gBAEFjB,KAAA,CAAA+B,aAAA,CAACtB,iBAAiB;IAAC6B,KAAK,EAAEjB,KAAK,CAACiB,KAAM;IAACzB,IAAI,EAAEQ,KAAK,CAACR;EAAK,CAAE,CACtD,CACc,CAAC,eAC3Bb,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB,CAACmC,OAAO;IACrBC,KAAK,EAAE,OAAQ;IACfL,SAAS,EAAE,UAAW;IACtBM,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,eAAe,CAAC,CAAE,CAAC;EAAA,gBAEnC3C,KAAA,CAAA+B,aAAA,CAACvB,eAAe;IAAC8B,KAAK,EAAEhB,EAAE,CAACsB,WAAY;IAACC,QAAQ,EAAErB,UAAW;IAACE,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpF1B,KAAA,CAAA+B,aAAA,CAACxB,cAAc;IACXuC,KAAK,EAAExB,EAAE,CAACwB,KAAM;IAChBC,WAAW,EAAEzB,EAAE,CAACyB,WAAY;IAC5BC,YAAY,EAAEvB;EAAgB,CACjC,CACqB,CACZ,CAAC;AAE3B,CAAC;AAED,SAASL,mBAAmB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","library","fas","IconPickerPrimitive","meta","title","component","argTypes","onChange","action","render","args","value","setValue","createElement","className","Object","assign","parameters","layout","add","Default","icons","prefix","name","WithDefaultValue","MediumSize","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid"],"sources":["IconPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPickerPrimitive } from \"./IconPickerPrimitive.js\";\n\nconst meta: Meta<typeof IconPickerPrimitive> = {\n title: \"Components/Form Primitives/IconPicker\",\n component: IconPickerPrimitive,\n argTypes: {\n onChange: { action: \"onChange\" }\n },\n render: args => {\n const [value, setValue] = useState(args.value);\n return (\n <div className={\"w-full\"}>\n <IconPickerPrimitive {...args} value={value} onChange={setValue} />\n <div className={\"mt-4 text-center\"}>\n Current selected value: <pre>{value}</pre>\n </div>\n </div>\n );\n },\n parameters: {\n layout: \"padded\"\n }\n};\n\n// @ts-expect-error\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPickerPrimitive>;\n\nexport const Default: Story = {\n args: {\n icons: [\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n { prefix: \"fas\", name: \"naira-sign\" },\n { prefix: \"fas\", name: \"cart-arrow-down\" },\n { prefix: \"fas\", name: \"walkie-talkie\" },\n { prefix: \"fas\", name: \"file-edit\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"pen-square\" },\n { prefix: \"fas\", name: \"pencil-square\" },\n { prefix: \"fas\", name: \"square-pen\" },\n { prefix: \"fas\", name: \"suitcase-rolling\" },\n { prefix: \"fas\", name: \"person-circle-exclamation\" },\n { prefix: \"fas\", name: \"chevron-down\" },\n { prefix: \"fas\", name: \"battery\" },\n { prefix: \"fas\", name: \"battery-5\" },\n { prefix: \"fas\", name: \"battery-full\" },\n { prefix: \"fas\", name: \"skull-crossbones\" },\n { prefix: \"fas\", name: \"code-compare\" },\n { prefix: \"fas\", name: \"list-dots\" },\n { prefix: \"fas\", name: \"list-ul\" },\n { prefix: \"fas\", name: \"school-lock\" },\n { prefix: \"fas\", name: \"tower-cell\" },\n { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n { prefix: \"fas\", name: \"down-long\" },\n { prefix: \"fas\", name: \"ranking-star\" },\n { prefix: \"fas\", name: \"chess-king\" },\n { prefix: \"fas\", name: \"person-harassing\" },\n { prefix: \"fas\", name: \"brazilian-real-sign\" },\n { prefix: \"fas\", name: \"landmark-alt\" },\n { prefix: \"fas\", name: \"landmark-dome\" },\n { prefix: \"fas\", name: \"arrow-up\" },\n { prefix: \"fas\", name: \"television\" },\n { prefix: \"fas\", name: \"tv-alt\" },\n { prefix: \"fas\", name: \"tv\" },\n { prefix: \"fas\", name: \"shrimp\" },\n { prefix: \"fas\", name: \"tasks\" },\n { prefix: \"fas\", name: \"list-check\" },\n { prefix: \"fas\", name: \"jug-detergent\" },\n { prefix: \"fas\", name: \"user-circle\" },\n { prefix: \"fas\", name: \"circle-user\" },\n { prefix: \"fas\", name: \"user-shield\" },\n { prefix: \"fas\", name: \"wind\" },\n { prefix: \"fas\", name: \"car-crash\" },\n { prefix: \"fas\", name: \"car-burst\" },\n { prefix: \"fas\", name: \"y\" },\n { prefix: \"fas\", name: \"snowboarding\" },\n { prefix: \"fas\", name: \"person-snowboarding\" },\n { prefix: \"fas\", name: \"shipping-fast\" },\n { prefix: \"fas\", name: \"truck-fast\" }\n ]\n }\n};\n\nexport const WithDefaultValue: Story = {\n args: {\n ...Default.args,\n value: \"fas/panorama\"\n }\n};\n\nexport const MediumSize: Story = {\n args: {\n ...Default.args,\n size: \"md\"\n }\n};\n\nexport const LargeSize: Story = {\n args: {\n ...Default.args,\n size: \"lg\"\n }\n};\n\nexport const ExtraLargeSize: Story = {\n args: {\n ...Default.args,\n size: \"xl\"\n }\n};\n\nexport const PrimaryVariant: Story = {\n args: {\n ...Default.args,\n variant: \"primary\"\n }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n args: {\n ...PrimaryVariant.args,\n disabled: true\n }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n args: {\n ...PrimaryVariant.args,\n invalid: true\n }\n};\n\nexport const SecondaryVariant: Story = {\n args: {\n ...Default.args,\n variant: \"secondary\"\n }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n args: {\n ...SecondaryVariant.args,\n disabled: true\n }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n args: {\n ...SecondaryVariant.args,\n invalid: true\n }\n};\n\nexport const GhostVariant: Story = {\n args: {\n ...Default.args,\n variant: \"ghost\"\n }\n};\n\nexport const GhostVariantDisabled: Story = {\n args: {\n ...GhostVariant.args,\n disabled: true\n }\n};\n\nexport const GhostVariantInvalid: Story = {\n args: {\n ...GhostVariant.args,\n invalid: true\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","useState","library","fas","IconPickerPrimitive","meta","title","component","argTypes","onChange","action","render","args","value","setValue","createElement","className","Object","assign","parameters","layout","add","Default","icons","prefix","name","WithDefaultValue","MediumSize","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid"],"sources":["IconPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPickerPrimitive } from \"./IconPickerPrimitive.js\";\n\nconst meta: Meta<typeof IconPickerPrimitive> = {\n title: \"Components/Form Primitives/IconPicker\",\n component: IconPickerPrimitive,\n argTypes: {\n onChange: { action: \"onChange\" }\n },\n render: args => {\n const [value, setValue] = useState(args.value);\n return (\n <div className={\"w-full\"}>\n <IconPickerPrimitive {...args} value={value} onChange={setValue} />\n <div className={\"mt-4 text-center\"}>\n Current selected value: <pre>{value}</pre>\n </div>\n </div>\n );\n },\n parameters: {\n layout: \"padded\"\n }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPickerPrimitive>;\n\nexport const Default: Story = {\n args: {\n icons: [\n { prefix: \"fas\", name: \"trash-restore-alt\" },\n { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n { prefix: \"fas\", name: \"naira-sign\" },\n { prefix: \"fas\", name: \"cart-arrow-down\" },\n { prefix: \"fas\", name: \"walkie-talkie\" },\n { prefix: \"fas\", name: \"file-edit\" },\n { prefix: \"fas\", name: \"file-pen\" },\n { prefix: \"fas\", name: \"receipt\" },\n { prefix: \"fas\", name: \"pen-square\" },\n { prefix: \"fas\", name: \"pencil-square\" },\n { prefix: \"fas\", name: \"square-pen\" },\n { prefix: \"fas\", name: \"suitcase-rolling\" },\n { prefix: \"fas\", name: \"person-circle-exclamation\" },\n { prefix: \"fas\", name: \"chevron-down\" },\n { prefix: \"fas\", name: \"battery\" },\n { prefix: \"fas\", name: \"battery-5\" },\n { prefix: \"fas\", name: \"battery-full\" },\n { prefix: \"fas\", name: \"skull-crossbones\" },\n { prefix: \"fas\", name: \"code-compare\" },\n { prefix: \"fas\", name: \"list-dots\" },\n { prefix: \"fas\", name: \"list-ul\" },\n { prefix: \"fas\", name: \"school-lock\" },\n { prefix: \"fas\", name: \"tower-cell\" },\n { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n { prefix: \"fas\", name: \"down-long\" },\n { prefix: \"fas\", name: \"ranking-star\" },\n { prefix: \"fas\", name: \"chess-king\" },\n { prefix: \"fas\", name: \"person-harassing\" },\n { prefix: \"fas\", name: \"brazilian-real-sign\" },\n { prefix: \"fas\", name: \"landmark-alt\" },\n { prefix: \"fas\", name: \"landmark-dome\" },\n { prefix: \"fas\", name: \"arrow-up\" },\n { prefix: \"fas\", name: \"television\" },\n { prefix: \"fas\", name: \"tv-alt\" },\n { prefix: \"fas\", name: \"tv\" },\n { prefix: \"fas\", name: \"shrimp\" },\n { prefix: \"fas\", name: \"tasks\" },\n { prefix: \"fas\", name: \"list-check\" },\n { prefix: \"fas\", name: \"jug-detergent\" },\n { prefix: \"fas\", name: \"user-circle\" },\n { prefix: \"fas\", name: \"circle-user\" },\n { prefix: \"fas\", name: \"user-shield\" },\n { prefix: \"fas\", name: \"wind\" },\n { prefix: \"fas\", name: \"car-crash\" },\n { prefix: \"fas\", name: \"car-burst\" },\n { prefix: \"fas\", name: \"y\" },\n { prefix: \"fas\", name: \"snowboarding\" },\n { prefix: \"fas\", name: \"person-snowboarding\" },\n { prefix: \"fas\", name: \"shipping-fast\" },\n { prefix: \"fas\", name: \"truck-fast\" }\n ]\n }\n};\n\nexport const WithDefaultValue: Story = {\n args: {\n ...Default.args,\n value: \"fas/panorama\"\n }\n};\n\nexport const MediumSize: Story = {\n args: {\n ...Default.args,\n size: \"md\"\n }\n};\n\nexport const LargeSize: Story = {\n args: {\n ...Default.args,\n size: \"lg\"\n }\n};\n\nexport const ExtraLargeSize: Story = {\n args: {\n ...Default.args,\n size: \"xl\"\n }\n};\n\nexport const PrimaryVariant: Story = {\n args: {\n ...Default.args,\n variant: \"primary\"\n }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n args: {\n ...PrimaryVariant.args,\n disabled: true\n }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n args: {\n ...PrimaryVariant.args,\n invalid: true\n }\n};\n\nexport const SecondaryVariant: Story = {\n args: {\n ...Default.args,\n variant: \"secondary\"\n }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n args: {\n ...SecondaryVariant.args,\n disabled: true\n }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n args: {\n ...SecondaryVariant.args,\n invalid: true\n }\n};\n\nexport const GhostVariant: Story = {\n args: {\n ...Default.args,\n variant: \"ghost\"\n }\n};\n\nexport const GhostVariantDisabled: Story = {\n args: {\n ...GhostVariant.args,\n disabled: true\n }\n};\n\nexport const GhostVariantInvalid: Story = {\n args: {\n ...GhostVariant.args,\n invalid: true\n }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,SAASC,GAAG,QAAQ,mCAAmC;AACvD,SAASC,mBAAmB;AAE5B,MAAMC,IAAsC,GAAG;EAC3CC,KAAK,EAAE,uCAAuC;EAC9CC,SAAS,EAAEH,mBAAmB;EAC9BI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW;EACnC,CAAC;EACDC,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGb,QAAQ,CAACW,IAAI,CAACC,KAAK,CAAC;IAC9C,oBACIb,KAAA,CAAAe,aAAA;MAAKC,SAAS,EAAE;IAAS,gBACrBhB,KAAA,CAAAe,aAAA,CAACX,mBAAmB,EAAAa,MAAA,CAAAC,MAAA,KAAKN,IAAI;MAAEC,KAAK,EAAEA,KAAM;MAACJ,QAAQ,EAAEK;IAAS,EAAE,CAAC,eACnEd,KAAA,CAAAe,aAAA;MAAKC,SAAS,EAAE;IAAmB,GAAC,0BACR,eAAAhB,KAAA,CAAAe,aAAA,cAAMF,KAAW,CACxC,CACJ,CAAC;EAEd,CAAC;EACDM,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAEDlB,OAAO,CAACmB,GAAG,CAAClB,GAAG,CAAC;AAEhB,eAAeE,IAAI;AAGnB,OAAO,MAAMiB,OAAc,GAAG;EAC1BV,IAAI,EAAE;IACFW,KAAK,EAAE,CACH;MAAEC,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAoB,CAAC,EAC5C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAqB,CAAC,EAC7C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC,EACrC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAkB,CAAC,EAC1C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAgB,CAAC,EACxC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAY,CAAC,EACpC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAW,CAAC,EACnC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAU,CAAC,EAClC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC,EACrC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAgB,CAAC,EACxC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC,EACrC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAmB,CAAC,EAC3C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAA4B,CAAC,EACpD;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAe,CAAC,EACvC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAU,CAAC,EAClC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAY,CAAC,EACpC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAe,CAAC,EACvC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAmB,CAAC,EAC3C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAe,CAAC,EACvC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAY,CAAC,EACpC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAU,CAAC,EAClC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAc,CAAC,EACtC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC,EACrC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAsB,CAAC,EAC9C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAY,CAAC,EACpC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAe,CAAC,EACvC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC,EACrC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAmB,CAAC,EAC3C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAsB,CAAC,EAC9C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAe,CAAC,EACvC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAgB,CAAC,EACxC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAW,CAAC,EACnC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC,EACrC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAS,CAAC,EACjC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAK,CAAC,EAC7B;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAS,CAAC,EACjC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAQ,CAAC,EAChC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC,EACrC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAgB,CAAC,EACxC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAc,CAAC,EACtC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAc,CAAC,EACtC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAc,CAAC,EACtC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAO,CAAC,EAC/B;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAY,CAAC,EACpC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAY,CAAC,EACpC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAI,CAAC,EAC5B;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAe,CAAC,EACvC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAsB,CAAC,EAC9C;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAgB,CAAC,EACxC;MAAED,MAAM,EAAE,KAAK;MAAEC,IAAI,EAAE;IAAa,CAAC;EAE7C;AACJ,CAAC;AAED,OAAO,MAAMC,gBAAuB,GAAG;EACnCd,IAAI,EAAE;IACF,GAAGU,OAAO,CAACV,IAAI;IACfC,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMc,UAAiB,GAAG;EAC7Bf,IAAI,EAAE;IACF,GAAGU,OAAO,CAACV,IAAI;IACfgB,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5BjB,IAAI,EAAE;IACF,GAAGU,OAAO,CAACV,IAAI;IACfgB,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAME,cAAqB,GAAG;EACjClB,IAAI,EAAE;IACF,GAAGU,OAAO,CAACV,IAAI;IACfgB,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMG,cAAqB,GAAG;EACjCnB,IAAI,EAAE;IACF,GAAGU,OAAO,CAACV,IAAI;IACfoB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,sBAA6B,GAAG;EACzCrB,IAAI,EAAE;IACF,GAAGmB,cAAc,CAACnB,IAAI;IACtBsB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,qBAA4B,GAAG;EACxCvB,IAAI,EAAE;IACF,GAAGmB,cAAc,CAACnB,IAAI;IACtBwB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,gBAAuB,GAAG;EACnCzB,IAAI,EAAE;IACF,GAAGU,OAAO,CAACV,IAAI;IACfoB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMM,wBAA+B,GAAG;EAC3C1B,IAAI,EAAE;IACF,GAAGyB,gBAAgB,CAACzB,IAAI;IACxBsB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMK,uBAA8B,GAAG;EAC1C3B,IAAI,EAAE;IACF,GAAGyB,gBAAgB,CAACzB,IAAI;IACxBwB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMI,YAAmB,GAAG;EAC/B5B,IAAI,EAAE;IACF,GAAGU,OAAO,CAACV,IAAI;IACfoB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMS,oBAA2B,GAAG;EACvC7B,IAAI,EAAE;IACF,GAAG4B,YAAY,CAAC5B,IAAI;IACpBsB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMQ,mBAA0B,GAAG;EACtC9B,IAAI,EAAE;IACF,GAAG4B,YAAY,CAAC5B,IAAI;IACpBwB,OAAO,EAAE;EACb;AACJ,CAAC","ignoreList":[]}
|
|
@@ -30,7 +30,9 @@ const MultiAutoCompleteInput = ({
|
|
|
30
30
|
...props
|
|
31
31
|
}) => {
|
|
32
32
|
const [focused, setFocused] = React.useState(false);
|
|
33
|
-
const inputRef = React.useMemo(() =>
|
|
33
|
+
const inputRef = React.useMemo(() => {
|
|
34
|
+
return parentInputRef && typeof parentInputRef !== "function" ? parentInputRef : /*#__PURE__*/React.createRef();
|
|
35
|
+
}, [parentInputRef]);
|
|
34
36
|
const renderSelectedOptions = React.useCallback(options => {
|
|
35
37
|
return options.map((option, index) => {
|
|
36
38
|
if (selectedOptionRenderer) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","InputIcon","inputVariants","Command","Tag","cn","cva","multiAutoCompleteInputVariants","variants","disabled","true","MultiAutoCompleteInput","changeValue","closeList","endIcon","invalid","openList","placeholder","removeSelectedOption","selectedOptionRenderer","selectedOptions","size","startIcon","value","variant","className","inputRef","parentInputRef","props","focused","setFocused","useState","useMemo","createRef","renderSelectedOptions","useCallback","options","map","option","index","item","call","createElement","key","content","label","onDismiss","Object","assign","onClick","current","focus","icon","inputSize","Input","onValueChange","onBlur","onFocus","inputElement","type","ref"],"sources":["MultiAutoCompleteInput.tsx"],"sourcesContent":["import React from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { InputIcon, inputVariants } from \"~/Input/index.js\";\nimport type { CommandOptionFormatted } from \"~/Command/index.js\";\nimport { Command } from \"~/Command/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst multiAutoCompleteInputVariants = cva(\"relative placeholder:text-neutral-dimmed\", {\n variants: {\n disabled: {\n true: \"cursor-not-allowed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n }\n }\n});\n\ntype MultiAutoCompleteInputProps = VariantProps<typeof multiAutoCompleteInputVariants> &\n InputPrimitiveProps & {\n changeValue: (value: string) => void;\n closeList: () => void;\n openList: () => void;\n placeholder: string;\n removeSelectedOption: (value: string) => void;\n selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n selectedOptions: CommandOptionFormatted[];\n value: string;\n };\n\nconst MultiAutoCompleteInput = ({\n changeValue,\n closeList,\n disabled,\n endIcon,\n invalid,\n openList,\n placeholder,\n removeSelectedOption,\n selectedOptionRenderer,\n selectedOptions,\n size,\n startIcon,\n value,\n variant,\n className,\n inputRef: parentInputRef,\n ...props\n}: MultiAutoCompleteInputProps) => {\n const [focused, setFocused] = React.useState<boolean>(false);\n const inputRef = React.useMemo<React.RefObject<HTMLInputElement>>(\n
|
|
1
|
+
{"version":3,"names":["React","InputIcon","inputVariants","Command","Tag","cn","cva","multiAutoCompleteInputVariants","variants","disabled","true","MultiAutoCompleteInput","changeValue","closeList","endIcon","invalid","openList","placeholder","removeSelectedOption","selectedOptionRenderer","selectedOptions","size","startIcon","value","variant","className","inputRef","parentInputRef","props","focused","setFocused","useState","useMemo","createRef","renderSelectedOptions","useCallback","options","map","option","index","item","call","createElement","key","content","label","onDismiss","Object","assign","onClick","current","focus","icon","inputSize","Input","onValueChange","onBlur","onFocus","inputElement","type","ref"],"sources":["MultiAutoCompleteInput.tsx"],"sourcesContent":["import React, { type RefObject } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { InputIcon, inputVariants } from \"~/Input/index.js\";\nimport type { CommandOptionFormatted } from \"~/Command/index.js\";\nimport { Command } from \"~/Command/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst multiAutoCompleteInputVariants = cva(\"relative placeholder:text-neutral-dimmed\", {\n variants: {\n disabled: {\n true: \"cursor-not-allowed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n }\n }\n});\n\ntype MultiAutoCompleteInputProps = VariantProps<typeof multiAutoCompleteInputVariants> &\n InputPrimitiveProps & {\n changeValue: (value: string) => void;\n closeList: () => void;\n openList: () => void;\n placeholder: string;\n removeSelectedOption: (value: string) => void;\n selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n selectedOptions: CommandOptionFormatted[];\n value: string;\n };\n\nconst MultiAutoCompleteInput = ({\n changeValue,\n closeList,\n disabled,\n endIcon,\n invalid,\n openList,\n placeholder,\n removeSelectedOption,\n selectedOptionRenderer,\n selectedOptions,\n size,\n startIcon,\n value,\n variant,\n className,\n inputRef: parentInputRef,\n ...props\n}: MultiAutoCompleteInputProps) => {\n const [focused, setFocused] = React.useState<boolean>(false);\n const inputRef = React.useMemo<React.RefObject<HTMLInputElement | null>>(() => {\n return parentInputRef && typeof parentInputRef !== \"function\"\n ? parentInputRef\n : React.createRef<HTMLInputElement>();\n }, [parentInputRef]);\n\n const renderSelectedOptions = React.useCallback(\n (options: CommandOptionFormatted[]) => {\n return options.map((option, index) => {\n if (selectedOptionRenderer) {\n if (!option.item) {\n return null;\n }\n return selectedOptionRenderer.call(this, option.item, index);\n }\n\n return (\n <Tag\n key={`tag-${option.value}-${index}`}\n variant={variant === \"ghost-negative\" ? \"neutral-xstrong\" : \"neutral-muted\"}\n content={option.label}\n onDismiss={() => removeSelectedOption(option.value)}\n />\n );\n });\n },\n [selectedOptionRenderer, removeSelectedOption, variant]\n );\n\n return (\n <div\n {...props}\n className={cn(\n inputVariants({\n variant,\n size,\n invalid\n }),\n multiAutoCompleteInputVariants({ disabled }),\n className\n )}\n aria-disabled={disabled}\n onClick={() => {\n if (disabled) {\n return;\n }\n inputRef?.current?.focus();\n setFocused(true);\n }}\n data-disabled={disabled}\n data-focused={focused}\n >\n {startIcon && <InputIcon icon={startIcon} inputSize={size} />}\n <div className=\"relative flex flex-wrap flex-1 gap-xs\">\n {renderSelectedOptions(selectedOptions)}\n <Command.Input\n className={\"bg-transparent border-none outline-none\"}\n value={value}\n onValueChange={changeValue}\n placeholder={placeholder}\n disabled={disabled}\n onBlur={() => {\n setFocused(false);\n closeList();\n }}\n onFocus={() => {\n setFocused(true);\n openList();\n }}\n inputElement={\n <input\n type=\"text\"\n ref={inputRef as RefObject<HTMLInputElement>}\n className={cn(multiAutoCompleteInputVariants({ disabled }))}\n />\n }\n />\n </div>\n {endIcon && <InputIcon icon={endIcon} inputSize={size} />}\n </div>\n );\n};\n\nexport { MultiAutoCompleteInput, type MultiAutoCompleteInputProps };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["SwitchItemDto.ts"],"sourcesContent":["import type React from \"react\";\n\nexport interface SwitchItemDto {\n id?: string;\n label: React.ReactNode;\n value?: number | string;\n checked?: boolean;\n disabled?: boolean;\n}\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["SwitchItemDto.ts"],"sourcesContent":["import type React from \"react\";\n\nexport interface SwitchItemDto {\n id?: string;\n label: React.ReactNode;\n value?: number | string | boolean;\n checked?: boolean;\n disabled?: boolean;\n}\n"],"mappings":"","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/admin-ui",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.1.0-beta.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"repository": {
|
|
@@ -10,15 +10,15 @@
|
|
|
10
10
|
"description": "The UI component library for Webiny's Admin app.",
|
|
11
11
|
"license": "MIT",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@fortawesome/fontawesome-svg-core": "
|
|
14
|
-
"@fortawesome/react-fontawesome": "
|
|
13
|
+
"@fortawesome/fontawesome-svg-core": "7.2.0",
|
|
14
|
+
"@fortawesome/react-fontawesome": "3.3.0",
|
|
15
15
|
"@minoru/react-dnd-treeview": "3.5.3",
|
|
16
16
|
"@monaco-editor/react": "4.7.0",
|
|
17
17
|
"@radix-ui/react-scroll-area": "1.2.10",
|
|
18
18
|
"@tanstack/react-table": "8.21.3",
|
|
19
|
-
"@webiny/icons": "6.
|
|
20
|
-
"@webiny/react-composition": "6.
|
|
21
|
-
"@webiny/utils": "6.
|
|
19
|
+
"@webiny/icons": "6.1.0-beta.0",
|
|
20
|
+
"@webiny/react-composition": "6.1.0-beta.0",
|
|
21
|
+
"@webiny/utils": "6.1.0-beta.0",
|
|
22
22
|
"bytes": "3.1.2",
|
|
23
23
|
"class-variance-authority": "0.7.1",
|
|
24
24
|
"clsx": "2.1.1",
|
|
@@ -35,36 +35,36 @@
|
|
|
35
35
|
"react-virtualized": "9.22.6",
|
|
36
36
|
"sonner": "2.0.7",
|
|
37
37
|
"tailwind-merge": "2.6.1",
|
|
38
|
-
"tailwindcss": "4.2.
|
|
38
|
+
"tailwindcss": "4.2.2",
|
|
39
39
|
"timeago-react": "3.0.7",
|
|
40
40
|
"tw-animate-css": "1.4.0",
|
|
41
|
-
"type-fest": "5.
|
|
41
|
+
"type-fest": "5.5.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@fortawesome/free-solid-svg-icons": "
|
|
44
|
+
"@fortawesome/free-solid-svg-icons": "7.2.0",
|
|
45
45
|
"@storybook/addon-a11y": "9.1.20",
|
|
46
46
|
"@storybook/addon-docs": "9.1.20",
|
|
47
47
|
"@storybook/addon-webpack5-compiler-babel": "3.0.6",
|
|
48
48
|
"@storybook/react-webpack5": "9.1.20",
|
|
49
|
-
"@svgr/webpack": "
|
|
50
|
-
"@tailwindcss/postcss": "4.2.
|
|
49
|
+
"@svgr/webpack": "8.1.0",
|
|
50
|
+
"@tailwindcss/postcss": "4.2.2",
|
|
51
51
|
"@types/react": "18.2.79",
|
|
52
|
-
"@types/react-color": "
|
|
52
|
+
"@types/react-color": "3.0.13",
|
|
53
53
|
"@types/react-custom-scrollbars": "4.0.13",
|
|
54
54
|
"@types/react-virtualized": "9.22.3",
|
|
55
|
-
"@webiny/build-tools": "6.
|
|
56
|
-
"@webiny/project": "6.
|
|
57
|
-
"chalk": "
|
|
55
|
+
"@webiny/build-tools": "6.1.0-beta.0",
|
|
56
|
+
"@webiny/project": "6.1.0-beta.0",
|
|
57
|
+
"chalk": "5.6.2",
|
|
58
58
|
"css-loader": "7.1.4",
|
|
59
|
-
"eslint-plugin-storybook": "10.
|
|
59
|
+
"eslint-plugin-storybook": "10.3.3",
|
|
60
60
|
"file-loader": "6.2.0",
|
|
61
61
|
"postcss-loader": "8.2.1",
|
|
62
62
|
"prettier": "3.6.2",
|
|
63
63
|
"rimraf": "6.1.3",
|
|
64
|
-
"sass": "1.
|
|
64
|
+
"sass": "1.98.0",
|
|
65
65
|
"storybook": "9.1.20",
|
|
66
66
|
"typescript": "5.9.3",
|
|
67
|
-
"vitest": "4.
|
|
67
|
+
"vitest": "4.1.2"
|
|
68
68
|
},
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
]
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "a3bd3695c66c79238e380d7360d9731b5fcf9c87"
|
|
88
88
|
}
|
package/theme.css
CHANGED
|
@@ -346,6 +346,12 @@
|
|
|
346
346
|
@apply pr-xxl pl-xxl mx-auto w-full;
|
|
347
347
|
}
|
|
348
348
|
|
|
349
|
+
@utility fill-grid {
|
|
350
|
+
background-image: radial-gradient(var(--color-neutral-strong) 1px, transparent 0px);
|
|
351
|
+
background-size: 15px 15px;
|
|
352
|
+
@apply bg-neutral-light;
|
|
353
|
+
}
|
|
354
|
+
|
|
349
355
|
@layer base {
|
|
350
356
|
a {
|
|
351
357
|
@apply text-accent-primary hover:underline focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed rounded-xs;
|