@iziui/react 0.0.99-rc → 0.0.101-rc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.types/actions/ButtonIcon/ButtonIcon.d.ts +2 -2
- package/dist/.types/actions/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/dist/.types/fields/Autocomplete/Autocomplete.d.ts +23 -0
- package/dist/.types/fields/Autocomplete/Autocomplete.d.ts.map +1 -0
- package/dist/.types/fields/Autocomplete/Autocomplete.spec.d.ts +2 -0
- package/dist/.types/fields/Autocomplete/Autocomplete.spec.d.ts.map +1 -0
- package/dist/.types/fields/Autocomplete/Autocomplete.stories.d.ts +10 -0
- package/dist/.types/fields/Autocomplete/Autocomplete.stories.d.ts.map +1 -0
- package/dist/.types/fields/Autocomplete/AutocompleteButton.d.ts +3 -0
- package/dist/.types/fields/Autocomplete/AutocompleteButton.d.ts.map +1 -0
- package/dist/.types/fields/Autocomplete/index.d.ts +3 -0
- package/dist/.types/fields/Autocomplete/index.d.ts.map +1 -0
- package/dist/.types/fields/Select/Select.d.ts +0 -1
- package/dist/.types/fields/Select/Select.d.ts.map +1 -1
- package/dist/.types/fields/Select/Select.stories.d.ts +0 -1
- package/dist/.types/fields/Select/Select.stories.d.ts.map +1 -1
- package/dist/.types/layout/Stack/Stack.stories.d.ts +0 -1
- package/dist/.types/layout/Stack/Stack.stories.d.ts.map +1 -1
- package/dist/.types/navigation/Menu/Menu.d.ts +0 -1
- package/dist/.types/navigation/Menu/Menu.d.ts.map +1 -1
- package/dist/chunks/ButtonIcon-Ccq88QaY.cjs.map +1 -1
- package/dist/chunks/ButtonIcon-DMetcfYt.js.map +1 -1
- package/dist/chunks/Option-BU_FWsap.js +2 -0
- package/dist/chunks/Option-BU_FWsap.js.map +1 -0
- package/dist/chunks/Option-BrwvLgKT.cjs +2 -0
- package/dist/chunks/Option-BrwvLgKT.cjs.map +1 -0
- package/dist/chunks/Select-CBfG5CDU.cjs +2 -0
- package/dist/chunks/Select-CBfG5CDU.cjs.map +1 -0
- package/dist/chunks/Select-D9o7DyOl.js +2 -0
- package/dist/chunks/Select-D9o7DyOl.js.map +1 -0
- package/dist/chunks/useMenu-B49hOh6R.js.map +1 -1
- package/dist/chunks/useMenu-BfWmrq4L.cjs.map +1 -1
- package/dist/components/Autocomplete/index.cjs +2 -0
- package/dist/components/Autocomplete/index.cjs.map +1 -0
- package/dist/components/Autocomplete/index.d.ts +2 -0
- package/dist/components/Autocomplete/index.js +2 -0
- package/dist/components/Autocomplete/index.js.map +1 -0
- package/dist/components/Select/index.cjs +1 -1
- package/dist/components/Select/index.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/style.css +14 -11
- package/package.json +1 -1
- package/dist/chunks/Option-COyiqmg0.cjs +0 -2
- package/dist/chunks/Option-COyiqmg0.cjs.map +0 -1
- package/dist/chunks/Option-CzDngSSk.js +0 -2
- package/dist/chunks/Option-CzDngSSk.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes,
|
|
1
|
+
import { ButtonHTMLAttributes, ReactElement } from 'react';
|
|
2
2
|
import { Colors } from '../../_internal/core/theme';
|
|
3
3
|
import { IconProps } from '../../display/Icon';
|
|
4
|
-
export interface ButtonIconProps extends
|
|
4
|
+
export interface ButtonIconProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
5
|
color?: Colors;
|
|
6
6
|
size?: number;
|
|
7
7
|
children: ReactElement<IconProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../../src/actions/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,oBAAoB,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../../src/actions/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,oBAAoB,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAInF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;CACnC;;AA8BD,wBAA2C"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { Sx } from '../../_internal/core/system';
|
|
3
|
+
import { MenuProps } from '../../navigation/Menu';
|
|
4
|
+
export interface AutocompleteProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
|
|
5
|
+
label?: string;
|
|
6
|
+
error?: boolean;
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
helperText?: string;
|
|
9
|
+
value?: T;
|
|
10
|
+
options: T[];
|
|
11
|
+
position?: MenuProps['position'];
|
|
12
|
+
startIcon?: React.JSX.Element | boolean;
|
|
13
|
+
debounceTime?: number;
|
|
14
|
+
onOpen?: () => void;
|
|
15
|
+
onChange: (data?: T) => void;
|
|
16
|
+
onSearch?: (term: string) => void;
|
|
17
|
+
renderOption: (option: T) => React.JSX.Element;
|
|
18
|
+
filterOptions?: (option: T, value?: string) => boolean;
|
|
19
|
+
emptyContent?: React.JSX.Element;
|
|
20
|
+
}
|
|
21
|
+
declare const _default: <T>(props: Sx<AutocompleteProps<T>>) => React.JSX.Element;
|
|
22
|
+
export default _default;
|
|
23
|
+
//# sourceMappingURL=Autocomplete.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/fields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,mBAAmB,EAEzB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAW7C,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,4CAA4C,CAAC;AAEpD,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAClC,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IAExC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAEvD,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CAClC;wBA+O+C,CAAC,CAAC,EAChD,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAC5B,KAAK,CAAC,GAAG,CAAC,OAAO;AAFtB,wBAEuB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Autocomplete.spec.d.ts","sourceRoot":"","sources":["../../../../src/fields/Autocomplete/Autocomplete.spec.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { default as Autocomplete } from './Autocomplete';
|
|
3
|
+
export declare const Default: StoryObj<typeof Autocomplete>;
|
|
4
|
+
export declare const WithRequest: StoryObj<typeof Autocomplete>;
|
|
5
|
+
export declare const WithSearch: StoryObj<typeof Autocomplete>;
|
|
6
|
+
export declare const WithValue: StoryObj<typeof Autocomplete>;
|
|
7
|
+
export declare const Playground: StoryObj<typeof Autocomplete>;
|
|
8
|
+
declare const meta: Meta<typeof Autocomplete>;
|
|
9
|
+
export default meta;
|
|
10
|
+
//# sourceMappingURL=Autocomplete.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../src/fields/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AA8B1C,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,YAAY,CA2BjD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,YAAY,CAwCrD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,YAAY,CAmDpD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,YAAY,CA2BnD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,YAAY,CAEpD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAiBnC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AutocompleteButton.d.ts","sourceRoot":"","sources":["../../../../src/fields/Autocomplete/AutocompleteButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -3,7 +3,6 @@ import { Colors } from '../../_internal/core/theme';
|
|
|
3
3
|
import { MenuProps } from '../../navigation/Menu';
|
|
4
4
|
export interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {
|
|
5
5
|
error?: boolean;
|
|
6
|
-
autoClose?: boolean;
|
|
7
6
|
label?: string;
|
|
8
7
|
helperText?: string;
|
|
9
8
|
color?: Colors;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/fields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EAEzB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,mBAAmB,CAAC;AAKlE,OAAO,sCAAsC,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/fields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EAEzB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,mBAAmB,CAAC;AAKlE,OAAO,sCAAsC,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;CACnD;;AAwGD,wBAAuC"}
|
|
@@ -5,7 +5,6 @@ export declare const helperText: StoryObj<typeof Select>;
|
|
|
5
5
|
export declare const validation: StoryObj<typeof Select>;
|
|
6
6
|
export declare const Disabled: StoryObj<typeof Select>;
|
|
7
7
|
export declare const DisabledOption: StoryObj<typeof Select>;
|
|
8
|
-
export declare const autoclose: StoryObj<typeof Select>;
|
|
9
8
|
export declare const withIcon: StoryObj<typeof Select>;
|
|
10
9
|
export declare const optionWithIcon: StoryObj<typeof Select>;
|
|
11
10
|
export declare const Playground: StoryObj<typeof Select>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../src/fields/Select/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,MAA4B,MAAM,UAAU,CAAC;AAGpD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,MAAM,CAiB1C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,MAAM,CAkB9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,MAAM,CAmB9C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAqB5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,MAAM,CAoBlD,CAAC;AAEF,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../src/fields/Select/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,MAA4B,MAAM,UAAU,CAAC;AAGpD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,MAAM,CAiB1C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,MAAM,CAkB9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,MAAM,CAmB9C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAqB5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,MAAM,CAoBlD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAoB5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,MAAM,CA+BlD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE9C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -2,7 +2,6 @@ import { Meta, StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { default as Stack } from './Stack';
|
|
3
3
|
export declare const _Row: StoryObj<typeof Stack>;
|
|
4
4
|
export declare const _Column: StoryObj<typeof Stack>;
|
|
5
|
-
export declare const WithBreakPoint: StoryObj<typeof Stack>;
|
|
6
5
|
export declare const Playground: StoryObj<typeof Stack>;
|
|
7
6
|
declare const meta: Meta<typeof Stack>;
|
|
8
7
|
export default meta;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/layout/Stack/Stack.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,KAAK,MAAM,SAAS,CAAC;AAe5B,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,KAAK,CAUvC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,KAAK,CAU1C,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/layout/Stack/Stack.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,KAAK,MAAM,SAAS,CAAC;AAe5B,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,KAAK,CAUvC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,KAAK,CAU1C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,KAAK,CAE7C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA0G5B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -9,7 +9,6 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
9
9
|
position?: Position;
|
|
10
10
|
anchorEl: HTMLElement | null;
|
|
11
11
|
width?: CSSProperties['width'];
|
|
12
|
-
children: React.JSX.Element | React.JSX.Element[];
|
|
13
12
|
onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;
|
|
14
13
|
}
|
|
15
14
|
declare const _default: import('react').FC<import('../../_internal/core/system').Sx<MenuProps & import('react').RefAttributes<HTMLDivElement>>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/navigation/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAcf,OAAO,oCAAoC,CAAC;AAE5C,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7C,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAMjC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/navigation/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAcf,OAAO,oCAAoC,CAAC;AAE5C,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7C,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAMjC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;;AA0ID,wBAAqC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon-Ccq88QaY.cjs","sources":["../../src/actions/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import { cloneElement, type ButtonHTMLAttributes, type
|
|
1
|
+
{"version":3,"file":"ButtonIcon-Ccq88QaY.cjs","sources":["../../src/actions/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import { cloneElement, type ButtonHTMLAttributes, type ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport type { IconProps } from '@/display/Icon';\nimport Ripple from '@/actions/Ripple';\nimport createComponent from '@/core/createComponent';\n\nimport '@iziui/styles/components/ButtonIcon.scss';\n\nexport interface ButtonIconProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n color?: Colors;\n size?: number;\n children: ReactElement<IconProps>;\n};\nfunction ButtonIcon({ children, size = 40, color = 'primary', ...props }: ButtonIconProps) {\n const [width, height] = [size, size];\n\n const classess = joinClass(\n `${prefix}-button-icon`,\n color && `${prefix}-button-icon--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<IconProps>) => {\n return cloneElement(icon, {\n size: width / 1.5,\n ...icon.props,\n style: { color: 'currentColor' }\n });\n };\n\n return (\n <button\n {...props}\n className={classess}\n style={{ ...props.style, width, height }}\n >\n {renderIcon(children)}\n <Ripple />\n </button>\n );\n}\n\nexport default createComponent(ButtonIcon);"],"names":["ButtonIcon","children","size","color","props","width","height","classess","joinClass","prefix","renderIcon","icon","cloneElement","jsxs","Ripple","createComponent"],"mappings":"4NAkBA,SAASA,EAAW,CAAE,SAAAC,EAAU,KAAAC,EAAO,GAAI,MAAAC,EAAQ,UAAW,GAAGC,GAA0B,CACzF,KAAM,CAACC,EAAOC,CAAM,EAAI,CAACJ,EAAMA,CAAI,EAE7BK,EAAWC,EAAAA,UACf,GAAGC,EAAAA,MAAM,eACTN,GAAS,GAAGM,EAAAA,MAAM,iBAAiBN,CAAK,GACxCC,EAAM,SAAA,EAGFM,EAAcC,GACXC,EAAAA,aAAaD,EAAM,CACxB,KAAMN,EAAQ,IACd,GAAGM,EAAK,MACR,MAAO,CAAE,MAAO,cAAA,CAAe,CAChC,EAGH,OACEE,EAAAA,KAAC,SAAA,CACE,GAAGT,EACJ,UAAWG,EACX,MAAO,CAAE,GAAGH,EAAM,MAAO,MAAAC,EAAO,OAAAC,CAAA,EAE/B,SAAA,CAAAI,EAAWT,CAAQ,QACnBa,EAAAA,OAAA,CAAA,CAAO,CAAA,CAAA,CAAA,CAGd,CAEA,MAAAd,EAAee,EAAAA,gBAAgBf,CAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon-DMetcfYt.js","sources":["../../src/actions/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import { cloneElement, type ButtonHTMLAttributes, type
|
|
1
|
+
{"version":3,"file":"ButtonIcon-DMetcfYt.js","sources":["../../src/actions/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import { cloneElement, type ButtonHTMLAttributes, type ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport type { IconProps } from '@/display/Icon';\nimport Ripple from '@/actions/Ripple';\nimport createComponent from '@/core/createComponent';\n\nimport '@iziui/styles/components/ButtonIcon.scss';\n\nexport interface ButtonIconProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n color?: Colors;\n size?: number;\n children: ReactElement<IconProps>;\n};\nfunction ButtonIcon({ children, size = 40, color = 'primary', ...props }: ButtonIconProps) {\n const [width, height] = [size, size];\n\n const classess = joinClass(\n `${prefix}-button-icon`,\n color && `${prefix}-button-icon--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<IconProps>) => {\n return cloneElement(icon, {\n size: width / 1.5,\n ...icon.props,\n style: { color: 'currentColor' }\n });\n };\n\n return (\n <button\n {...props}\n className={classess}\n style={{ ...props.style, width, height }}\n >\n {renderIcon(children)}\n <Ripple />\n </button>\n );\n}\n\nexport default createComponent(ButtonIcon);"],"names":["ButtonIcon","children","size","color","props","width","height","classess","joinClass","prefix","renderIcon","icon","cloneElement","jsxs","Ripple","ButtonIcon$1","createComponent"],"mappings":"sQAkBA,SAASA,EAAW,CAAE,SAAAC,EAAU,KAAAC,EAAO,GAAI,MAAAC,EAAQ,UAAW,GAAGC,GAA0B,CACzF,KAAM,CAACC,EAAOC,CAAM,EAAI,CAACJ,EAAMA,CAAI,EAE7BK,EAAWC,EACf,GAAGC,CAAM,eACTN,GAAS,GAAGM,CAAM,iBAAiBN,CAAK,GACxCC,EAAM,SAAA,EAGFM,EAAcC,GACXC,EAAaD,EAAM,CACxB,KAAMN,EAAQ,IACd,GAAGM,EAAK,MACR,MAAO,CAAE,MAAO,cAAA,CAAe,CAChC,EAGH,OACEE,EAAC,SAAA,CACE,GAAGT,EACJ,UAAWG,EACX,MAAO,CAAE,GAAGH,EAAM,MAAO,MAAAC,EAAO,OAAAC,CAAA,EAE/B,SAAA,CAAAI,EAAWT,CAAQ,IACnBa,EAAA,CAAA,CAAO,CAAA,CAAA,CAAA,CAGd,CAEA,MAAAC,EAAeC,EAAgBhB,CAAU"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as m}from"react/jsx-runtime";import{cloneElement as a}from"react";import{p as e}from"./index-CZ41y9Hn.js";import{j as r}from"./joinClass-anSpaauN.js";function $({children:i,color:t,startIcon:o,disabled:p,...n}){const c=r(`${e}-select__option`,p&&`${e}-select__option--disabled`,t&&`${e}-select__option--${t}`,n.className);return m("button",{type:"button",...n,className:c,children:[o&&(s=>a(s,{type:"button",className:r(s.props.className,`${e}-select__option__icon`)}))(o),i]})}export{$ as O};
|
|
2
|
+
//# sourceMappingURL=Option-BU_FWsap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Option-BU_FWsap.js","sources":["../../src/fields/Select/Option.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Option","children","color","startIcon","disabled","props","className","joinClass","prefix","icon","cloneElement"],"mappings":"kKAaA,SAAwBA,EAAO,CAAE,SAAAC,EAAU,MAAAC,EAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,GAAsB,CAC9F,MAAMC,EAAYC,EAChB,GAAGC,CAAM,kBACTJ,GAAY,GAAGI,CAAM,4BACrBN,GAAS,GAAGM,CAAM,oBAAoBN,CAAK,GAC3CG,EAAM,SAAA,EAaR,SACG,SAAA,CAAO,KAAK,SAAU,GAAGA,EAAO,UAAAC,EAC9B,SAAA,CAAAH,IAZeM,GACXC,EAAaD,EAAM,CACxB,KAAM,SACN,UAAWF,EACTE,EAAK,MAAM,UACX,GAAGD,CAAM,uBAAA,CACX,CACD,GAK0BL,CAA8B,EACtDF,CAAA,EACH,CAEJ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const p=require("react/jsx-runtime"),u=require("react"),e=require("./index-DYxwT4uW.cjs"),o=require("./joinClass-Jk3EszKD.cjs");function _({children:r,color:t,startIcon:s,disabled:c,...n}){const l=o.joinClass(`${e.prefix}-select__option`,c&&`${e.prefix}-select__option--disabled`,t&&`${e.prefix}-select__option--${t}`,n.className),a=i=>u.cloneElement(i,{type:"button",className:o.joinClass(i.props.className,`${e.prefix}-select__option__icon`)});return p.jsxs("button",{type:"button",...n,className:l,children:[s&&a(s),r]})}exports.Option=_;
|
|
2
|
+
//# sourceMappingURL=Option-BrwvLgKT.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Option-BrwvLgKT.cjs","sources":["../../src/fields/Select/Option.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Option","children","color","startIcon","disabled","props","className","joinClass","prefix","renderIcon","icon","cloneElement"],"mappings":"6IAaA,SAAwBA,EAAO,CAAE,SAAAC,EAAU,MAAAC,EAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,GAAsB,CAC9F,MAAMC,EAAYC,EAAAA,UAChB,GAAGC,EAAAA,MAAM,kBACTJ,GAAY,GAAGI,EAAAA,MAAM,4BACrBN,GAAS,GAAGM,EAAAA,MAAM,oBAAoBN,CAAK,GAC3CG,EAAM,SAAA,EAGFI,EAAcC,GACXC,EAAAA,aAAaD,EAAM,CACxB,KAAM,SACN,UAAWH,EAAAA,UACTG,EAAK,MAAM,UACX,GAAGF,EAAAA,MAAM,uBAAA,CACX,CACD,EAGH,cACG,SAAA,CAAO,KAAK,SAAU,GAAGH,EAAO,UAAAC,EAC9B,SAAA,CAAAH,GAAaM,EAAWN,CAA8B,EACtDF,CAAA,EACH,CAEJ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const t=require("react/jsx-runtime"),o=require("react"),s=require("./index-DYxwT4uW.cjs"),l=require("./joinClass-Jk3EszKD.cjs"),M=require("./Icon-BN4Kp4Aq.cjs"),d=require("./useMenu-BfWmrq4L.cjs"),E=require("./createComponent-Bls5N6x8.cjs");function S({error:i,color:a="grey",position:j="bottom",label:u,helperText:p,startIcon:x,children:_,disabled:r,onChange:m,...n}){const C=o.Children.toArray(_),$=o.useMemo(()=>C.find(e=>e.props.value===n.value)?.props.children||"",[n.value]),[h,N,f]=d.useMenu(),v=l.joinClass(`${s.prefix}-select-container`),q=l.joinClass(`${s.prefix}-select-label`,i&&`${s.prefix}-select-label--error`),y=l.joinClass(`${s.prefix}-select`,r&&`${s.prefix}-select--disabled`,i&&`${s.prefix}-select--error`,n.className),b=l.joinClass(`${s.prefix}-select__helper-text`,p&&`${s.prefix}-select__helper-text--visible`,i&&`${s.prefix}-select__helper-text--error`),g=e=>o.cloneElement(e,{className:l.joinClass(e.props.className,`${s.prefix}-select__icon--left`),type:"button",style:{color:a},onClick:c=>{c.stopPropagation(),e.props.onClick&&!r&&e.props.onClick(c)}}),k=()=>C.map(e=>o.cloneElement(e,{color:a,className:l.joinClass(e.props.className,e.props.value===n.value&&`${s.prefix}-select__option--selected`),onClick:c=>{!e.props.disabled&&m&&m(c)}}));return t.jsxs("div",{className:v,children:[u&&t.jsxs("label",{className:q,children:[u," ",n.required&&"*"]}),t.jsxs("button",{type:"button",className:y,onClick:f,disabled:r,children:[t.jsx("div",{children:x&&g(x)}),t.jsx("input",{...n,readOnly:!0,type:"text",value:$,disabled:r}),t.jsx(M.Icon,{name:"angle-down",sx:{color:({grey:e})=>e.main},className:`${s.prefix}-select__icon--right`})]}),t.jsx(d.Menu,{autoClose:!0,position:j,direction:"center",open:h,anchorEl:N,onClose:f,children:k()}),t.jsx("span",{className:b,children:p})]})}const w=E.createComponent(S);exports.Select_default=w;
|
|
2
|
+
//# sourceMappingURL=Select-CBfG5CDU.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-CBfG5CDU.cjs","sources":["../../src/fields/Select/Select.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, type MenuProps, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n position = 'bottom',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n"],"names":["Select","error","color","position","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent"],"mappings":"8PAgCA,SAASA,EAAO,CACd,MAAAC,EACA,MAAAC,EAAQ,OACR,SAAAC,EAAW,SACX,MAAAC,EACA,WAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAgBC,EAAAA,SAAS,QAAQL,CAAQ,EAEzCM,EAAWC,EAAAA,QAAQ,IAChBH,EAAc,KAAMI,GACzBA,EAAM,MAAM,QAAUL,EAAM,KAAK,GAAG,MAAM,UAAY,GACvD,CAACA,EAAM,KAAK,CAAC,EAEV,CAACM,EAAMC,EAAIC,CAAM,EAAIC,EAAAA,QAAA,EAErBC,EAAgBC,EAAAA,UACpB,GAAGC,EAAAA,MAAM,mBAAA,EAGLC,EAAYF,EAAAA,UAChB,GAAGC,EAAAA,MAAM,gBACTrB,GAAS,GAAGqB,EAAAA,MAAM,sBAAA,EAGdE,EAAOH,EAAAA,UACX,GAAGC,EAAAA,MAAM,UACTd,GAAY,GAAGc,EAAAA,MAAM,oBACrBrB,GAAS,GAAGqB,EAAAA,MAAM,iBAClBZ,EAAM,SAAA,EAGFe,EAAiBJ,EAAAA,UACrB,GAAGC,EAAAA,MAAM,uBACTjB,GAAc,GAAGiB,EAAAA,MAAM,gCACvBrB,GAAS,GAAGqB,EAAAA,MAAM,6BAAA,EAGdI,EAAcC,GACXC,EAAAA,aAAaD,EAAM,CACxB,UAAWN,EAAAA,UACTM,EAAK,MAAM,UACX,GAAGL,EAAAA,MAAM,qBAAA,EAEX,KAAM,SACN,MAAO,CAAE,MAAApB,CAAA,EACT,QAAU2B,GAAM,CACdA,EAAE,gBAAA,EACEF,EAAK,MAAM,SAAW,CAACnB,GAAYmB,EAAK,MAAM,QAAQE,CAAC,CAC7D,CAAA,CACD,EAGGC,EAAe,IACZnB,EAAc,IAAKI,GACjBa,EAAAA,aAAab,EAAO,CACzB,MAAAb,EACA,UAAWmB,EAAAA,UACTN,EAAM,MAAM,UACZA,EAAM,MAAM,QAAUL,EAAM,OAAS,GAAGY,EAAAA,MAAM,2BAAA,EAEhD,QAAUO,GAAM,CACV,CAACd,EAAM,MAAM,UAAYN,GAAYA,EAASoB,CAAQ,CAC5D,CAAA,CACD,CACF,EAGH,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWX,EACb,SAAA,CAAAhB,GAAS2B,EAAAA,KAAC,QAAA,CAAM,UAAWR,EAAY,SAAA,CAAAnB,EAAM,IAAEM,EAAM,UAAY,GAAA,EAAI,EACtEqB,EAAAA,KAAC,UAAO,KAAK,SAAS,UAAWP,EAAM,QAASN,EAAQ,SAAAV,EACtD,SAAA,CAAAwB,EAAAA,IAAC,MAAA,CACE,SAAA1B,GAAaoB,EAAWpB,CAA8B,EACzD,EACA0B,EAAAA,IAAC,QAAA,CAAO,GAAGtB,EAAO,SAAQ,GAAC,KAAK,OAAO,MAAOG,EAAU,SAAAL,CAAA,CAAoB,EAC5EwB,EAAAA,IAACC,EAAAA,KAAA,CACC,KAAK,aACL,GAAI,CAAE,MAAO,CAAC,CAAE,KAAAC,CAAA,IAAWA,EAAK,IAAA,EAChC,UAAW,GAAGZ,EAAAA,MAAM,sBAAA,CAAA,CACtB,EACF,EACAU,EAAAA,IAACG,EAAAA,KAAA,CACC,UAAS,GACT,SAAAhC,EACA,UAAU,SACV,KAAAa,EACA,SAAUC,EACV,QAASC,EAER,SAAAY,EAAA,CAAa,CAAA,EAEhBE,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAiB,SAAApB,CAAA,CAAW,CAAA,EAC/C,CAEJ,CAEA,MAAA+B,EAAeC,EAAAA,gBAAgBrC,CAAM"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as a,jsx as r}from"react/jsx-runtime";import{Children as S,useMemo as w,cloneElement as _}from"react";import{p as t}from"./index-CZ41y9Hn.js";import{j as l}from"./joinClass-anSpaauN.js";import{I as E}from"./Icon-DTU52KQE.js";import{u as I,M as O}from"./useMenu-B49hOh6R.js";import{c as q}from"./createComponent-BmdhWozT.js";function A({error:c,color:i="grey",position:$="bottom",label:m,helperText:p,startIcon:u,children:h,disabled:n,onChange:d,...s}){const f=S.toArray(h),N=w(()=>f.find(e=>e.props.value===s.value)?.props.children||"",[s.value]),[v,x,C]=I(),y=l(`${t}-select-container`),b=l(`${t}-select-label`,c&&`${t}-select-label--error`),g=l(`${t}-select`,n&&`${t}-select--disabled`,c&&`${t}-select--error`,s.className),k=l(`${t}-select__helper-text`,p&&`${t}-select__helper-text--visible`,c&&`${t}-select__helper-text--error`),j=e=>_(e,{className:l(e.props.className,`${t}-select__icon--left`),type:"button",style:{color:i},onClick:o=>{o.stopPropagation(),e.props.onClick&&!n&&e.props.onClick(o)}}),M=()=>f.map(e=>_(e,{color:i,className:l(e.props.className,e.props.value===s.value&&`${t}-select__option--selected`),onClick:o=>{!e.props.disabled&&d&&d(o)}}));return a("div",{className:y,children:[m&&a("label",{className:b,children:[m," ",s.required&&"*"]}),a("button",{type:"button",className:g,onClick:C,disabled:n,children:[r("div",{children:u&&j(u)}),r("input",{...s,readOnly:!0,type:"text",value:N,disabled:n}),r(E,{name:"angle-down",sx:{color:({grey:e})=>e.main},className:`${t}-select__icon--right`})]}),r(O,{autoClose:!0,position:$,direction:"center",open:v,anchorEl:x,onClose:C,children:M()}),r("span",{className:k,children:p})]})}const H=q(A);export{H as S};
|
|
2
|
+
//# sourceMappingURL=Select-D9o7DyOl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-D9o7DyOl.js","sources":["../../src/fields/Select/Select.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, type MenuProps, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n position = 'bottom',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n"],"names":["Select","error","color","position","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent"],"mappings":"gVAgCA,SAASA,EAAO,CACd,MAAAC,EACA,MAAAC,EAAQ,OACR,SAAAC,EAAW,SACX,MAAAC,EACA,WAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAgBC,EAAS,QAAQL,CAAQ,EAEzCM,EAAWC,EAAQ,IAChBH,EAAc,KAAMI,GACzBA,EAAM,MAAM,QAAUL,EAAM,KAAK,GAAG,MAAM,UAAY,GACvD,CAACA,EAAM,KAAK,CAAC,EAEV,CAACM,EAAMC,EAAIC,CAAM,EAAIC,EAAA,EAErBC,EAAgBC,EACpB,GAAGC,CAAM,mBAAA,EAGLC,EAAYF,EAChB,GAAGC,CAAM,gBACTrB,GAAS,GAAGqB,CAAM,sBAAA,EAGdE,EAAOH,EACX,GAAGC,CAAM,UACTd,GAAY,GAAGc,CAAM,oBACrBrB,GAAS,GAAGqB,CAAM,iBAClBZ,EAAM,SAAA,EAGFe,EAAiBJ,EACrB,GAAGC,CAAM,uBACTjB,GAAc,GAAGiB,CAAM,gCACvBrB,GAAS,GAAGqB,CAAM,6BAAA,EAGdI,EAAcC,GACXC,EAAaD,EAAM,CACxB,UAAWN,EACTM,EAAK,MAAM,UACX,GAAGL,CAAM,qBAAA,EAEX,KAAM,SACN,MAAO,CAAE,MAAApB,CAAA,EACT,QAAU2B,GAAM,CACdA,EAAE,gBAAA,EACEF,EAAK,MAAM,SAAW,CAACnB,GAAYmB,EAAK,MAAM,QAAQE,CAAC,CAC7D,CAAA,CACD,EAGGC,EAAe,IACZnB,EAAc,IAAKI,GACjBa,EAAab,EAAO,CACzB,MAAAb,EACA,UAAWmB,EACTN,EAAM,MAAM,UACZA,EAAM,MAAM,QAAUL,EAAM,OAAS,GAAGY,CAAM,2BAAA,EAEhD,QAAUO,GAAM,CACV,CAACd,EAAM,MAAM,UAAYN,GAAYA,EAASoB,CAAQ,CAC5D,CAAA,CACD,CACF,EAGH,OACEE,EAAC,MAAA,CAAI,UAAWX,EACb,SAAA,CAAAhB,GAAS2B,EAAC,QAAA,CAAM,UAAWR,EAAY,SAAA,CAAAnB,EAAM,IAAEM,EAAM,UAAY,GAAA,EAAI,EACtEqB,EAAC,UAAO,KAAK,SAAS,UAAWP,EAAM,QAASN,EAAQ,SAAAV,EACtD,SAAA,CAAAwB,EAAC,MAAA,CACE,SAAA1B,GAAaoB,EAAWpB,CAA8B,EACzD,EACA0B,EAAC,QAAA,CAAO,GAAGtB,EAAO,SAAQ,GAAC,KAAK,OAAO,MAAOG,EAAU,SAAAL,CAAA,CAAoB,EAC5EwB,EAACC,EAAA,CACC,KAAK,aACL,GAAI,CAAE,MAAO,CAAC,CAAE,KAAAC,CAAA,IAAWA,EAAK,IAAA,EAChC,UAAW,GAAGZ,CAAM,sBAAA,CAAA,CACtB,EACF,EACAU,EAACG,EAAA,CACC,UAAS,GACT,SAAAhC,EACA,UAAU,SACV,KAAAa,EACA,SAAUC,EACV,QAASC,EAER,SAAAY,EAAA,CAAa,CAAA,EAEhBE,EAAC,OAAA,CAAK,UAAWP,EAAiB,SAAApB,CAAA,CAAW,CAAA,EAC/C,CAEJ,CAEA,MAAA+B,EAAeC,EAAgBrC,CAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenu-B49hOh6R.js","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype Position = 'top' | 'bottom';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n position?: Position;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n
|
|
1
|
+
{"version":3,"file":"useMenu-B49hOh6R.js","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype Position = 'top' | 'bottom';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n position?: Position;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({\n open,\n width,\n children,\n anchorEl,\n direction = 'left',\n position = 'bottom',\n maxHeight = 150,\n autoClose,\n onClose,\n ...props\n}: MenuProps, ref) {\n const [coordinate, setCoordinate] = useState<Coordinates>();\n const [config, setConfig] = useState<Config>({ state: 'invisible', animation: 'close', width: 'auto' });\n\n const GAP = 16;\n const ANIMATION_DURATION = 150;\n\n const arrayChildren = Children.toArray(children) as ReactElement<any>[];\n\n const id = useMemo(() => uuid(), []);\n\n const classes = joinClass(\n `${prefix}-menu`,\n `${prefix}-menu--${config?.animation}`,\n `${prefix}-menu--${position}`,\n props.className\n );\n\n useListenerResized(() => changePosition(), [anchorEl]);\n\n useEffect(() => { changePosition(); }, [anchorEl]);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useEffect(() => { open ? handleOpen() : handleClose(); }, [open]);\n\n const changePosition = () => {\n if (!anchorEl) { return; }\n\n setTimeout(() => {\n let coordinates: Coordinates = {};\n\n const { width: anchorWidth, height: anchorHeight, left, top: anchorTop } = anchorEl.getBoundingClientRect();\n\n setConfig(prev => ({ ...prev, width: anchorWidth }));\n\n const el = document.getElementById(id) as HTMLElement;\n\n const top = position === 'bottom'\n ? anchorTop + anchorHeight + (GAP / 2)\n : anchorTop - el.offsetHeight - (GAP / 2);\n\n if (direction === 'center') { coordinates = { top, right: anchorWidth }; }\n\n if (direction === 'left') { coordinates = { top, left }; }\n\n if (direction === 'right') { coordinates = { top, left: left - (el.offsetWidth - anchorWidth) }; }\n\n setCoordinate(coordinates);\n }, 0);\n };\n\n const handleOpen = () => {\n setConfig(prev => ({ ...prev, state: 'visible' }));\n\n changePosition();\n\n setTimeout(() => { setConfig(prev => ({ ...prev, animation: 'open' })); }, 10);\n };\n\n const handleClose = () => {\n setConfig(prev => ({ ...prev, animation: 'close' }));\n\n setTimeout(() => {\n setConfig(prev => ({ ...prev, state: 'invisible' }));\n onClose();\n }, ANIMATION_DURATION);\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n return cloneElement(child, {\n 'tabIndex': index + 1,\n key: `button-${index}`,\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n debounce.delay(() => {\n\n if (autoClose) { handleClose(); }\n\n if (child.props.onClick) { child.props.onClick(e); }\n }, 0);\n },\n });\n });\n };\n\n return (\n <>\n <div\n id={id}\n ref={ref}\n {...props}\n style={{\n width: width || config.width,\n top: coordinate?.top,\n left: coordinate?.left,\n display: config?.state === 'visible' ? 'block' : 'none',\n transition: `all ${ANIMATION_DURATION}ms ease-in`,\n zIndex: 50,\n ...props.style\n }}\n className={classes}\n >\n {\n open && (\n <Card className={`${prefix}-menu__card`}>\n <CardContent\n className={`${prefix}-menu__card__content`}\n sx={{ py: 1 }}\n style={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight\n }}\n >\n {renderChildren()}\n </CardContent>\n </Card>\n )\n }\n </div>\n {open && <div className={`${prefix}-menu__overlay`} onClick={handleClose} />}\n </>\n );\n});\n\nexport default createComponent(Menu);\n","import { useState } from 'react';\n\ntype UseMenu = [\n boolean,\n HTMLElement | null,\n (event?: React.MouseEvent<HTMLButtonElement>) => void,\n];\n\nexport default function useMenu(): UseMenu {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n const open = Boolean(anchorEl);\n\n const handleOpen = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n setAnchorEl(event ? event.currentTarget : null);\n };\n\n const handleClose = () => { setAnchorEl(null); };\n\n const handleToggle = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (open) {\n handleClose();\n return;\n }\n\n handleOpen(event);\n };\n\n return [open, anchorEl, handleToggle];\n}\n"],"names":["Debounce","func","milliseconds","debounce","Menu","forwardRef","open","width","children","anchorEl","direction","position","maxHeight","autoClose","onClose","props","ref","coordinate","setCoordinate","useState","config","setConfig","GAP","ANIMATION_DURATION","arrayChildren","Children","id","useMemo","uuid","classes","joinClass","prefix","useListenerResized","changePosition","useEffect","handleOpen","handleClose","coordinates","anchorWidth","anchorHeight","left","anchorTop","prev","el","top","renderChildren","child","index","cloneElement","e","jsxs","Fragment","jsx","Card","CardContent","Menu$1","createComponent","useMenu","setAnchorEl","event"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenu-BfWmrq4L.cjs","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype Position = 'top' | 'bottom';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n position?: Position;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n children: React.JSX.Element | React.JSX.Element[];\n onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({\n open,\n width,\n children,\n anchorEl,\n direction = 'left',\n position = 'bottom',\n maxHeight = 150,\n autoClose,\n onClose,\n ...props\n}: MenuProps, ref) {\n const [coordinate, setCoordinate] = useState<Coordinates>();\n const [config, setConfig] = useState<Config>({ state: 'invisible', animation: 'close', width: 'auto' });\n\n const GAP = 16;\n const ANIMATION_DURATION = 150;\n\n const arrayChildren = Children.toArray(children) as ReactElement<any>[];\n\n const id = useMemo(() => uuid(), []);\n\n const classes = joinClass(\n `${prefix}-menu`,\n `${prefix}-menu--${config?.animation}`,\n `${prefix}-menu--${position}`,\n props.className\n );\n\n useListenerResized(() => changePosition(), [anchorEl]);\n\n useEffect(() => { changePosition(); }, [anchorEl]);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useEffect(() => { open ? handleOpen() : handleClose(); }, [open]);\n\n const changePosition = () => {\n if (!anchorEl) { return; }\n\n setTimeout(() => {\n let coordinates: Coordinates = {};\n\n const { width: anchorWidth, height: anchorHeight, left, top: anchorTop } = anchorEl.getBoundingClientRect();\n\n setConfig(prev => ({ ...prev, width: anchorWidth }));\n\n const el = document.getElementById(id) as HTMLElement;\n\n const top = position === 'bottom'\n ? anchorTop + anchorHeight + (GAP / 2)\n : anchorTop - el.offsetHeight - (GAP / 2);\n\n if (direction === 'center') { coordinates = { top, right: anchorWidth }; }\n\n if (direction === 'left') { coordinates = { top, left }; }\n\n if (direction === 'right') { coordinates = { top, left: left - (el.offsetWidth - anchorWidth) }; }\n\n setCoordinate(coordinates);\n }, 0);\n };\n\n const handleOpen = () => {\n setConfig(prev => ({ ...prev, state: 'visible' }));\n\n changePosition();\n\n setTimeout(() => { setConfig(prev => ({ ...prev, animation: 'open' })); }, 10);\n };\n\n const handleClose = () => {\n setConfig(prev => ({ ...prev, animation: 'close' }));\n\n setTimeout(() => {\n setConfig(prev => ({ ...prev, state: 'invisible' }));\n onClose();\n }, ANIMATION_DURATION);\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n return cloneElement(child, {\n 'tabIndex': index + 1,\n key: `button-${index}`,\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n debounce.delay(() => {\n\n if (autoClose) { handleClose(); }\n\n if (child.props.onClick) { child.props.onClick(e); }\n }, 0);\n },\n });\n });\n };\n\n return (\n <>\n <div\n id={id}\n ref={ref}\n {...props}\n style={{\n width: width || config.width,\n top: coordinate?.top,\n left: coordinate?.left,\n display: config?.state === 'visible' ? 'block' : 'none',\n transition: `all ${ANIMATION_DURATION}ms ease-in`,\n zIndex: 50,\n ...props.style\n }}\n className={classes}\n >\n {\n open && (\n <Card className={`${prefix}-menu__card`}>\n <CardContent\n className={`${prefix}-menu__card__content`}\n sx={{ py: 1 }}\n style={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight\n }}\n >\n {renderChildren()}\n </CardContent>\n </Card>\n )\n }\n </div>\n {open && <div className={`${prefix}-menu__overlay`} onClick={handleClose} />}\n </>\n );\n});\n\nexport default createComponent(Menu);\n","import { useState } from 'react';\n\ntype UseMenu = [\n boolean,\n HTMLElement | null,\n (event?: React.MouseEvent<HTMLButtonElement>) => void,\n];\n\nexport default function useMenu(): UseMenu {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n const open = Boolean(anchorEl);\n\n const handleOpen = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n setAnchorEl(event ? event.currentTarget : null);\n };\n\n const handleClose = () => { setAnchorEl(null); };\n\n const handleToggle = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (open) {\n handleClose();\n return;\n }\n\n handleOpen(event);\n };\n\n return [open, anchorEl, handleToggle];\n}\n"],"names":["Debounce","func","milliseconds","debounce","Menu","forwardRef","open","width","children","anchorEl","direction","position","maxHeight","autoClose","onClose","props","ref","coordinate","setCoordinate","useState","config","setConfig","GAP","ANIMATION_DURATION","arrayChildren","Children","id","useMemo","uuid","classes","joinClass","prefix","useListenerResized","changePosition","useEffect","handleOpen","handleClose","coordinates","anchorWidth","anchorHeight","left","anchorTop","prev","el","top","renderChildren","child","index","cloneElement","e","jsxs","Fragment","jsx","Card","CardContent","createComponent","useMenu","setAnchorEl","event"],"mappings":"kVAAA,MAAMA,CAAS,CAEN,MAAMC,EAAyBC,EAAe,IAAK,CACxD,GAAI,CAACA,EAAc,CACjBD,EAAA,EACA,MACF,CAEA,aAAa,KAAK,OAAO,EACzB,KAAK,QAAU,WAAW,IAAM,CAAEA,EAAA,CAAQ,EAAGC,CAAY,CAC3D,CACF,CAEO,MAAMC,EAAW,IAAIH,ECgCtBI,EAAOC,EAAAA,WAAsC,SAAc,CAC/D,KAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EAAW,SACX,UAAAC,EAAY,IACZ,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAAcC,EAAK,CACjB,KAAM,CAACC,EAAYC,CAAa,EAAIC,WAAA,EAC9B,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAiB,CAAE,MAAO,YAAa,UAAW,QAAS,MAAO,MAAA,CAAQ,EAEhGG,EAAM,GACNC,EAAqB,IAErBC,EAAgBC,EAAAA,SAAS,QAAQjB,CAAQ,EAEzCkB,EAAKC,EAAAA,QAAQ,IAAMC,EAAAA,KAAA,EAAQ,CAAA,CAAE,EAE7BC,EAAUC,EAAAA,UACd,GAAGC,EAAAA,MAAM,QACT,GAAGA,EAAAA,MAAM,UAAUX,GAAQ,SAAS,GACpC,GAAGW,EAAAA,MAAM,UAAUpB,CAAQ,GAC3BI,EAAM,SAAA,EAGRiB,EAAAA,mBAAmB,IAAMC,IAAkB,CAACxB,CAAQ,CAAC,EAErDyB,EAAAA,UAAU,IAAM,CAAED,EAAA,CAAkB,EAAG,CAACxB,CAAQ,CAAC,EAGjDyB,EAAAA,UAAU,IAAM,CAAE5B,EAAO6B,EAAA,EAAeC,EAAA,CAAe,EAAG,CAAC9B,CAAI,CAAC,EAEhE,MAAM2B,EAAiB,IAAM,CACtBxB,GAEL,WAAW,IAAM,CACf,IAAI4B,EAA2B,CAAA,EAE/B,KAAM,CAAE,MAAOC,EAAa,OAAQC,EAAc,KAAAC,EAAM,IAAKC,CAAA,EAAchC,EAAS,sBAAA,EAEpFY,MAAmB,CAAE,GAAGqB,EAAM,MAAOJ,GAAc,EAEnD,MAAMK,EAAK,SAAS,eAAejB,CAAE,EAE/BkB,EAAMjC,IAAa,SACrB8B,EAAYF,EAAgBjB,EAAM,EAClCmB,EAAYE,EAAG,aAAgBrB,EAAM,EAErCZ,IAAc,WAAY2B,EAAc,CAAE,IAAAO,EAAK,MAAON,CAAA,GAEtD5B,IAAc,SAAU2B,EAAc,CAAE,IAAAO,EAAK,KAAAJ,CAAA,GAE7C9B,IAAc,UAAW2B,EAAc,CAAE,IAAAO,EAAK,KAAMJ,GAAQG,EAAG,YAAcL,EAAA,GAEjFpB,EAAcmB,CAAW,CAC3B,EAAG,CAAC,CACN,EAEMF,EAAa,IAAM,CACvBd,MAAmB,CAAE,GAAGqB,EAAM,MAAO,WAAY,EAEjDT,EAAA,EAEA,WAAW,IAAM,CAAEZ,MAAmB,CAAE,GAAGqB,EAAM,UAAW,QAAS,CAAG,EAAG,EAAE,CAC/E,EAEMN,EAAc,IAAM,CACxBf,MAAmB,CAAE,GAAGqB,EAAM,UAAW,SAAU,EAEnD,WAAW,IAAM,CACfrB,MAAmB,CAAE,GAAGqB,EAAM,MAAO,aAAc,EACnD5B,EAAA,CACF,EAAGS,CAAkB,CACvB,EAEMsB,EAAiB,IACdrB,EAAc,IAAI,CAACsB,EAAOC,IACxBC,EAAAA,aAAaF,EAAO,CACzB,SAAYC,EAAQ,EACpB,IAAK,UAAUA,CAAK,GACpB,QAAUE,GAA2C,CACnD9C,EAAS,MAAM,IAAM,CAEfU,GAAauB,EAAA,EAEbU,EAAM,MAAM,SAAWA,EAAM,MAAM,QAAQG,CAAC,CAClD,EAAG,CAAC,CACN,CAAA,CACD,CACF,EAGH,OACEC,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACC,GAAA1B,EACA,IAAAV,EACC,GAAGD,EACJ,MAAO,CACL,MAAOR,GAASa,EAAO,MACvB,IAAKH,GAAY,IACjB,KAAMA,GAAY,KAClB,QAASG,GAAQ,QAAU,UAAY,QAAU,OACjD,WAAY,OAAOG,CAAkB,aACrC,OAAQ,GACR,GAAGR,EAAM,KAAA,EAEX,UAAWc,EAGT,YACEuB,MAACC,EAAAA,KAAA,CAAK,UAAW,GAAGtB,QAAM,cACxB,SAAAqB,EAAAA,IAACE,EAAAA,YAAA,CACC,UAAW,GAAGvB,EAAAA,MAAM,uBACpB,GAAI,CAAE,GAAI,CAAA,EACV,MAAO,CACL,QAAS,OACT,cAAe,SACf,UAAAnB,CAAA,EAGD,SAAAiC,EAAA,CAAe,CAAA,CAClB,CACF,CAAA,CAAA,EAILvC,SAAS,MAAA,CAAI,UAAW,GAAGyB,EAAAA,MAAM,iBAAkB,QAASK,CAAA,CAAa,CAAA,EAC5E,CAEJ,CAAC,EAEDhC,EAAemD,EAAAA,gBAAgBnD,CAAI,EC7KnC,SAAwBoD,GAAmB,CACzC,KAAM,CAAC/C,EAAUgD,CAAW,EAAItC,EAAAA,SAA6B,IAAI,EAE3Db,EAAO,EAAQG,EAEf0B,EAAcuB,GAAsD,CACxED,EAAYC,EAAQA,EAAM,cAAgB,IAAI,CAChD,EAEMtB,EAAc,IAAM,CAAEqB,EAAY,IAAI,CAAG,EAW/C,MAAO,CAACnD,EAAMG,EATQiD,GAAsD,CAC1E,GAAIpD,EAAM,CACR8B,EAAA,EACA,MACF,CAEAD,EAAWuB,CAAK,CAClB,CAEoC,CACtC"}
|
|
1
|
+
{"version":3,"file":"useMenu-BfWmrq4L.cjs","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype Position = 'top' | 'bottom';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n position?: Position;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({\n open,\n width,\n children,\n anchorEl,\n direction = 'left',\n position = 'bottom',\n maxHeight = 150,\n autoClose,\n onClose,\n ...props\n}: MenuProps, ref) {\n const [coordinate, setCoordinate] = useState<Coordinates>();\n const [config, setConfig] = useState<Config>({ state: 'invisible', animation: 'close', width: 'auto' });\n\n const GAP = 16;\n const ANIMATION_DURATION = 150;\n\n const arrayChildren = Children.toArray(children) as ReactElement<any>[];\n\n const id = useMemo(() => uuid(), []);\n\n const classes = joinClass(\n `${prefix}-menu`,\n `${prefix}-menu--${config?.animation}`,\n `${prefix}-menu--${position}`,\n props.className\n );\n\n useListenerResized(() => changePosition(), [anchorEl]);\n\n useEffect(() => { changePosition(); }, [anchorEl]);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useEffect(() => { open ? handleOpen() : handleClose(); }, [open]);\n\n const changePosition = () => {\n if (!anchorEl) { return; }\n\n setTimeout(() => {\n let coordinates: Coordinates = {};\n\n const { width: anchorWidth, height: anchorHeight, left, top: anchorTop } = anchorEl.getBoundingClientRect();\n\n setConfig(prev => ({ ...prev, width: anchorWidth }));\n\n const el = document.getElementById(id) as HTMLElement;\n\n const top = position === 'bottom'\n ? anchorTop + anchorHeight + (GAP / 2)\n : anchorTop - el.offsetHeight - (GAP / 2);\n\n if (direction === 'center') { coordinates = { top, right: anchorWidth }; }\n\n if (direction === 'left') { coordinates = { top, left }; }\n\n if (direction === 'right') { coordinates = { top, left: left - (el.offsetWidth - anchorWidth) }; }\n\n setCoordinate(coordinates);\n }, 0);\n };\n\n const handleOpen = () => {\n setConfig(prev => ({ ...prev, state: 'visible' }));\n\n changePosition();\n\n setTimeout(() => { setConfig(prev => ({ ...prev, animation: 'open' })); }, 10);\n };\n\n const handleClose = () => {\n setConfig(prev => ({ ...prev, animation: 'close' }));\n\n setTimeout(() => {\n setConfig(prev => ({ ...prev, state: 'invisible' }));\n onClose();\n }, ANIMATION_DURATION);\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n return cloneElement(child, {\n 'tabIndex': index + 1,\n key: `button-${index}`,\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n debounce.delay(() => {\n\n if (autoClose) { handleClose(); }\n\n if (child.props.onClick) { child.props.onClick(e); }\n }, 0);\n },\n });\n });\n };\n\n return (\n <>\n <div\n id={id}\n ref={ref}\n {...props}\n style={{\n width: width || config.width,\n top: coordinate?.top,\n left: coordinate?.left,\n display: config?.state === 'visible' ? 'block' : 'none',\n transition: `all ${ANIMATION_DURATION}ms ease-in`,\n zIndex: 50,\n ...props.style\n }}\n className={classes}\n >\n {\n open && (\n <Card className={`${prefix}-menu__card`}>\n <CardContent\n className={`${prefix}-menu__card__content`}\n sx={{ py: 1 }}\n style={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight\n }}\n >\n {renderChildren()}\n </CardContent>\n </Card>\n )\n }\n </div>\n {open && <div className={`${prefix}-menu__overlay`} onClick={handleClose} />}\n </>\n );\n});\n\nexport default createComponent(Menu);\n","import { useState } from 'react';\n\ntype UseMenu = [\n boolean,\n HTMLElement | null,\n (event?: React.MouseEvent<HTMLButtonElement>) => void,\n];\n\nexport default function useMenu(): UseMenu {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n const open = Boolean(anchorEl);\n\n const handleOpen = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n setAnchorEl(event ? event.currentTarget : null);\n };\n\n const handleClose = () => { setAnchorEl(null); };\n\n const handleToggle = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (open) {\n handleClose();\n return;\n }\n\n handleOpen(event);\n };\n\n return [open, anchorEl, handleToggle];\n}\n"],"names":["Debounce","func","milliseconds","debounce","Menu","forwardRef","open","width","children","anchorEl","direction","position","maxHeight","autoClose","onClose","props","ref","coordinate","setCoordinate","useState","config","setConfig","GAP","ANIMATION_DURATION","arrayChildren","Children","id","useMemo","uuid","classes","joinClass","prefix","useListenerResized","changePosition","useEffect","handleOpen","handleClose","coordinates","anchorWidth","anchorHeight","left","anchorTop","prev","el","top","renderChildren","child","index","cloneElement","e","jsxs","Fragment","jsx","Card","CardContent","createComponent","useMenu","setAnchorEl","event"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("react"),r=require("../../chunks/index-DYxwT4uW.cjs"),c=require("../../chunks/joinClass-Jk3EszKD.cjs"),V=require("../../chunks/uuid-omnJ9TjZ.cjs"),W=require("../../chunks/createComponent-Bls5N6x8.cjs"),X=require("../../chunks/Icon-BN4Kp4Aq.cjs"),Y=require("../../chunks/Stack-CF3Wyma9.cjs"),Z=require("../../chunks/Loading-DVK2G3KT.cjs"),ee=require("../../chunks/ButtonIcon-Ccq88QaY.cjs"),te=require("../../chunks/Typography-Ch-BLqCH.cjs"),w=require("../../chunks/useMenu-BfWmrq4L.cjs"),oe=require("../../chunks/Option-BrwvLgKT.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/convertPathToColor-D8eBpd_D.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");function re({label:$,error:x,position:B,disabled:i,startIcon:k,helperText:M,value:l,options:h=[],loading:j,debounceTime:L=300,onOpen:N,onChange:I,onSearch:p,renderOption:q,filterOptions:C,emptyContent:P=o.jsx(te.Typography,{variant:"body2",color:"text.secondary",textAlign:"center",children:"No data"}),...y}){const[s,R,v]=w.useMenu(),[b,a]=n.useState(""),[m,u]=n.useState(-1),g=n.useRef(void 0),d=n.useMemo(()=>V.uuid(),[]),S=c.joinClass(`${r.prefix}-autocomplete`,i&&`${r.prefix}-autocomplete--disabled`,x&&`${r.prefix}-autocomplete--error`,y.className),K=c.joinClass(`${r.prefix}-autocomplete-container`),O=c.joinClass(`${r.prefix}-autocomplete-label`,x&&`${r.prefix}-autocomplete-label--error`),z=c.joinClass(`${r.prefix}-autocomplete__helper-text`,M&&`${r.prefix}-autocomplete__helper-text--visible`,x&&`${r.prefix}-autocomplete__helper-text--error`);n.useLayoutEffect(()=>{if(l==null){a("");return}const e=q(l);a(e.props.children)},[l]),n.useEffect(()=>{s||u(-1)},[s]);const F=e=>n.cloneElement(e,{className:c.joinClass(e.props.className,`${r.prefix}-autocomplete__icon--left`),type:"button",onClick:t=>{t.stopPropagation(),e.props.onClick&&!i&&e.props.onClick(t)}}),f=n.useMemo(()=>p||!C?h:h.filter(e=>C(e,b)),[h,b,p,C]),A=()=>{s&&v()},D=e=>{I(e),a(q(e).props.children)},U=()=>f.map((e,t)=>{const E=q(e),T=e===l,Q=t===m;return n.cloneElement(E,{id:`${d}-option-${t}`,role:"option","aria-selected":T,className:c.joinClass(E.props.className,(T||Q)&&`${r.prefix}-select__option--selected`),onMouseEnter:()=>u(t),onClick:()=>D(e)})}),G=e=>{a(e),u(-1),p&&(clearTimeout(g.current),g.current=setTimeout(()=>{p(e)},L))},_=e=>{i||s||(N&&N(),v(e))},H=e=>{if(!i)switch(e.key){case"ArrowDown":if(e.preventDefault(),!s){_(e);return}u(t=>Math.min(t+1,f.length-1));break;case"ArrowUp":e.preventDefault(),u(t=>Math.max(t-1,0));break;case"Enter":{const t=f[m];s&&t&&(e.preventDefault(),D(t),A());break}case"Escape":A();break}},J=e=>{e.stopPropagation(),clearTimeout(g.current),I(),a("")};return o.jsxs("div",{className:K,children:[$&&o.jsxs("label",{className:O,children:[$," ",y.required&&"*"]}),o.jsxs("div",{className:S,onClick:_,onFocus:_,children:[o.jsx("div",{children:k&&F(k)}),o.jsx("input",{...y,value:b,type:"text",role:"combobox","aria-expanded":s,"aria-controls":d,"aria-autocomplete":"list","aria-activedescendant":m>=0?`${d}-option-${m}`:void 0,onInput:e=>G(e.target.value),onKeyDown:H,disabled:i}),o.jsx(ee.ButtonIcon,{color:"grey",size:32,onMouseDown:e=>e.preventDefault(),onClick:J,className:`${r.prefix}-autocomplete__reset-button`,children:o.jsx(X.Icon,{name:"times"})})]}),o.jsxs(w.Menu,{id:d,role:"listbox",autoClose:!0,position:B,direction:"center",open:s,anchorEl:R,onClose:v,children:[j&&o.jsx(Y.Stack,{justifyContent:"center",alignItems:"center",children:o.jsx(Z.Loading,{})}),!j&&U(),!j&&!f.length&&P]}),o.jsx("span",{className:z,children:M})]})}const ne=W.createComponent(re);exports.AutocompleteButton=oe.Option;exports.Autocomplete=ne;
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/fields/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import {\n useRef,\n useMemo,\n useState,\n useEffect,\n cloneElement,\n useLayoutEffect,\n type FocusEvent,\n type MouseEvent,\n type ReactElement,\n type KeyboardEvent,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Sx } from '@iziui/core/system';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport { uuid } from '@iziui/toolkit/uuid';\n\nimport createComponent from '@/core';\nimport Icon from '@/display/Icon';\nimport Stack from '@/layout/Stack';\nimport Loading from '@/feedback/Loading';\nimport ButtonIcon from '@/actions/ButtonIcon';\nimport Typography from '@/display/Typography';\nimport { Menu, useMenu, type MenuProps } from '@/navigation/Menu';\n\nimport '@iziui/styles/components/Autocomplete.scss';\n\nexport interface AutocompleteProps<T>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {\n label?: string;\n error?: boolean;\n loading?: boolean;\n helperText?: string;\n value?: T;\n options: T[];\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n\n debounceTime?: number;\n\n onOpen?: () => void;\n onChange: (data?: T) => void;\n onSearch?: (term: string) => void;\n\n renderOption: (option: T) => React.JSX.Element;\n filterOptions?: (option: T, value?: string) => boolean;\n\n emptyContent?: React.JSX.Element;\n}\n\nfunction Autocomplete<T>({\n label,\n error,\n position,\n disabled,\n startIcon,\n helperText,\n\n value,\n options = [],\n loading,\n\n debounceTime = 300,\n\n onOpen,\n onChange,\n onSearch,\n\n renderOption,\n filterOptions,\n\n emptyContent = (\n <Typography variant=\"body2\" color=\"text.secondary\" textAlign=\"center\">\n No data\n </Typography>\n ),\n\n ...props\n}: AutocompleteProps<T>) {\n const [open, el, toggle] = useMenu();\n\n const [term, setTerm] = useState<string>('');\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const id = useMemo(() => uuid(), []);\n\n const cls = joinClass(\n `${prefix}-autocomplete`,\n disabled && `${prefix}-autocomplete--disabled`,\n error && `${prefix}-autocomplete--error`,\n props.className\n );\n\n const containerClss = joinClass(\n `${prefix}-autocomplete-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-autocomplete-label`,\n error && `${prefix}-autocomplete-label--error`,\n );\n\n const helperTextClss = joinClass(\n `${prefix}-autocomplete__helper-text`,\n helperText && `${prefix}-autocomplete__helper-text--visible`,\n error && `${prefix}-autocomplete__helper-text--error`\n );\n\n useLayoutEffect(() => {\n if (value === undefined || value === null) {\n setTerm('');\n return;\n }\n\n const child = renderOption(value);\n setTerm(child.props.children);\n }, [value]);\n\n useEffect(() => {\n if (open) { return; }\n setActiveIndex(-1);\n }, [open]);\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-autocomplete__icon--left`\n ),\n type: 'button',\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const visibleOptions = useMemo(() => {\n if (onSearch || !filterOptions) { return options; }\n\n return options.filter((option) => filterOptions(option, term));\n }, [options, term, onSearch, filterOptions]);\n\n const closeMenu = () => {\n if (!open) { return; }\n toggle();\n };\n\n const selectOption = (option: T) => {\n onChange(option);\n setTerm(renderOption(option).props.children);\n };\n\n const _renderOptions = () => {\n return visibleOptions.map((o, index) => {\n const child = renderOption(o);\n const selected = o === value;\n const active = index === activeIndex;\n return cloneElement(child, {\n id: `${id}-option-${index}`,\n role: 'option',\n 'aria-selected': selected,\n className: joinClass(\n child.props.className,\n (selected || active) && `${prefix}-select__option--selected`,\n ),\n onMouseEnter: () => setActiveIndex(index),\n onClick: () => selectOption(o),\n });\n });\n };\n\n const handleInput = (value: string) => {\n setTerm(value);\n setActiveIndex(-1);\n\n if (!onSearch) { return; }\n\n clearTimeout(searchTimer.current);\n searchTimer.current = setTimeout(() => { onSearch(value); }, debounceTime);\n };\n\n const handleOpen = (\n e: MouseEvent<HTMLElement> | FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement>\n ) => {\n if (disabled || open) { return; }\n if (onOpen) { onOpen(); }\n\n toggle(e as any);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) { return; }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!open) { handleOpen(e); return; }\n setActiveIndex((prev) => Math.min(prev + 1, visibleOptions.length - 1));\n break;\n case 'ArrowUp':\n e.preventDefault();\n setActiveIndex((prev) => Math.max(prev - 1, 0));\n break;\n case 'Enter': {\n const target = visibleOptions[activeIndex];\n if (open && target) {\n e.preventDefault();\n selectOption(target);\n closeMenu();\n }\n break;\n }\n case 'Escape':\n closeMenu();\n break;\n }\n };\n\n const handleReset = (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {\n e.stopPropagation();\n clearTimeout(searchTimer.current);\n onChange();\n setTerm('');\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <div\n className={cls}\n onClick={handleOpen}\n onFocus={handleOpen}\n >\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input\n {...props}\n value={term}\n type=\"text\"\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={id}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeIndex >= 0 ? `${id}-option-${activeIndex}` : undefined}\n onInput={(e: any) => handleInput(e.target.value)}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n />\n <ButtonIcon\n color=\"grey\"\n size={32}\n onMouseDown={(e) => e.preventDefault()}\n onClick={handleReset}\n className={`${prefix}-autocomplete__reset-button`}\n >\n <Icon name=\"times\" />\n </ButtonIcon>\n </div>\n <Menu\n id={id}\n role=\"listbox\"\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {\n loading && (\n <Stack justifyContent=\"center\" alignItems=\"center\">\n <Loading />\n </Stack>\n )\n }\n {!loading && _renderOptions()}\n {!loading && !visibleOptions.length && emptyContent}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Autocomplete) as <T>(\n props: Sx<AutocompleteProps<T>>\n) => React.JSX.Element;\n"],"names":["Autocomplete","label","error","position","disabled","startIcon","helperText","value","options","loading","debounceTime","onOpen","onChange","onSearch","renderOption","filterOptions","emptyContent","Typography","props","open","el","toggle","useMenu","term","setTerm","useState","activeIndex","setActiveIndex","searchTimer","useRef","id","useMemo","uuid","cls","joinClass","prefix","containerClss","labelClss","helperTextClss","useLayoutEffect","child","useEffect","renderIcon","icon","cloneElement","e","visibleOptions","option","closeMenu","selectOption","_renderOptions","o","index","selected","active","handleInput","handleOpen","handleKeyDown","prev","target","handleReset","jsxs","jsx","ButtonIcon","Icon","Menu","Stack","Loading","Autocomplete_default","createComponent"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as d,jsx as n}from"react/jsx-runtime";import{useState as B,useRef as X,useMemo as L,useLayoutEffect as Y,useEffect as Z,cloneElement as K}from"react";import{p as o}from"../../chunks/index-CZ41y9Hn.js";import{j as c}from"../../chunks/joinClass-anSpaauN.js";import{u as ee}from"../../chunks/uuid-dGvr9vBZ.js";import{c as te}from"../../chunks/createComponent-BmdhWozT.js";import{I as oe}from"../../chunks/Icon-DTU52KQE.js";import{S as re}from"../../chunks/Stack-CHR_pZC4.js";import{L as ne}from"../../chunks/Loading-BjCfYdLa.js";import{B as ce}from"../../chunks/ButtonIcon-DMetcfYt.js";import{T as se}from"../../chunks/Typography-B_WR62ip.js";import{u as ae,M as le}from"../../chunks/useMenu-B49hOh6R.js";import{O as Te}from"../../chunks/Option-BU_FWsap.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/convertPathToColor-DtOjH4ZP.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/CardContent-CViecz1a.js";function ie({label:g,error:h,position:P,disabled:s,startIcon:M,helperText:A,value:a,options:$=[],loading:x,debounceTime:R=300,onOpen:D,onChange:I,onSearch:m,renderOption:v,filterOptions:_,emptyContent:q=n(se,{variant:"body2",color:"text.secondary",textAlign:"center",children:"No data"}),...C}){const[r,z,b]=ae(),[k,l]=B(""),[p,i]=B(-1),y=X(void 0),u=L(()=>ee(),[]),F=c(`${o}-autocomplete`,s&&`${o}-autocomplete--disabled`,h&&`${o}-autocomplete--error`,C.className),U=c(`${o}-autocomplete-container`),G=c(`${o}-autocomplete-label`,h&&`${o}-autocomplete-label--error`),H=c(`${o}-autocomplete__helper-text`,A&&`${o}-autocomplete__helper-text--visible`,h&&`${o}-autocomplete__helper-text--error`);Y(()=>{if(a==null){l("");return}const e=v(a);l(e.props.children)},[a]),Z(()=>{r||i(-1)},[r]);const J=e=>K(e,{className:c(e.props.className,`${o}-autocomplete__icon--left`),type:"button",onClick:t=>{t.stopPropagation(),e.props.onClick&&!s&&e.props.onClick(t)}}),f=L(()=>m||!_?$:$.filter(e=>_(e,k)),[$,k,m,_]),w=()=>{r&&b()},E=e=>{I(e),l(v(e).props.children)},O=()=>f.map((e,t)=>{const T=v(e),j=e===a,W=t===p;return K(T,{id:`${u}-option-${t}`,role:"option","aria-selected":j,className:c(T.props.className,(j||W)&&`${o}-select__option--selected`),onMouseEnter:()=>i(t),onClick:()=>E(e)})}),Q=e=>{l(e),i(-1),m&&(clearTimeout(y.current),y.current=setTimeout(()=>{m(e)},R))},N=e=>{s||r||(D&&D(),b(e))},S=e=>{if(!s)switch(e.key){case"ArrowDown":if(e.preventDefault(),!r){N(e);return}i(t=>Math.min(t+1,f.length-1));break;case"ArrowUp":e.preventDefault(),i(t=>Math.max(t-1,0));break;case"Enter":{const t=f[p];r&&t&&(e.preventDefault(),E(t),w());break}case"Escape":w();break}},V=e=>{e.stopPropagation(),clearTimeout(y.current),I(),l("")};return d("div",{className:U,children:[g&&d("label",{className:G,children:[g," ",C.required&&"*"]}),d("div",{className:F,onClick:N,onFocus:N,children:[n("div",{children:M&&J(M)}),n("input",{...C,value:k,type:"text",role:"combobox","aria-expanded":r,"aria-controls":u,"aria-autocomplete":"list","aria-activedescendant":p>=0?`${u}-option-${p}`:void 0,onInput:e=>Q(e.target.value),onKeyDown:S,disabled:s}),n(ce,{color:"grey",size:32,onMouseDown:e=>e.preventDefault(),onClick:V,className:`${o}-autocomplete__reset-button`,children:n(oe,{name:"times"})})]}),d(le,{id:u,role:"listbox",autoClose:!0,position:P,direction:"center",open:r,anchorEl:z,onClose:b,children:[x&&n(re,{justifyContent:"center",alignItems:"center",children:n(ne,{})}),!x&&O(),!x&&!f.length&&q]}),n("span",{className:H,children:A})]})}const Ie=te(ie);export{Ie as Autocomplete,Te as AutocompleteButton};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/fields/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import {\n useRef,\n useMemo,\n useState,\n useEffect,\n cloneElement,\n useLayoutEffect,\n type FocusEvent,\n type MouseEvent,\n type ReactElement,\n type KeyboardEvent,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Sx } from '@iziui/core/system';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport { uuid } from '@iziui/toolkit/uuid';\n\nimport createComponent from '@/core';\nimport Icon from '@/display/Icon';\nimport Stack from '@/layout/Stack';\nimport Loading from '@/feedback/Loading';\nimport ButtonIcon from '@/actions/ButtonIcon';\nimport Typography from '@/display/Typography';\nimport { Menu, useMenu, type MenuProps } from '@/navigation/Menu';\n\nimport '@iziui/styles/components/Autocomplete.scss';\n\nexport interface AutocompleteProps<T>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {\n label?: string;\n error?: boolean;\n loading?: boolean;\n helperText?: string;\n value?: T;\n options: T[];\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n\n debounceTime?: number;\n\n onOpen?: () => void;\n onChange: (data?: T) => void;\n onSearch?: (term: string) => void;\n\n renderOption: (option: T) => React.JSX.Element;\n filterOptions?: (option: T, value?: string) => boolean;\n\n emptyContent?: React.JSX.Element;\n}\n\nfunction Autocomplete<T>({\n label,\n error,\n position,\n disabled,\n startIcon,\n helperText,\n\n value,\n options = [],\n loading,\n\n debounceTime = 300,\n\n onOpen,\n onChange,\n onSearch,\n\n renderOption,\n filterOptions,\n\n emptyContent = (\n <Typography variant=\"body2\" color=\"text.secondary\" textAlign=\"center\">\n No data\n </Typography>\n ),\n\n ...props\n}: AutocompleteProps<T>) {\n const [open, el, toggle] = useMenu();\n\n const [term, setTerm] = useState<string>('');\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const id = useMemo(() => uuid(), []);\n\n const cls = joinClass(\n `${prefix}-autocomplete`,\n disabled && `${prefix}-autocomplete--disabled`,\n error && `${prefix}-autocomplete--error`,\n props.className\n );\n\n const containerClss = joinClass(\n `${prefix}-autocomplete-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-autocomplete-label`,\n error && `${prefix}-autocomplete-label--error`,\n );\n\n const helperTextClss = joinClass(\n `${prefix}-autocomplete__helper-text`,\n helperText && `${prefix}-autocomplete__helper-text--visible`,\n error && `${prefix}-autocomplete__helper-text--error`\n );\n\n useLayoutEffect(() => {\n if (value === undefined || value === null) {\n setTerm('');\n return;\n }\n\n const child = renderOption(value);\n setTerm(child.props.children);\n }, [value]);\n\n useEffect(() => {\n if (open) { return; }\n setActiveIndex(-1);\n }, [open]);\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-autocomplete__icon--left`\n ),\n type: 'button',\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const visibleOptions = useMemo(() => {\n if (onSearch || !filterOptions) { return options; }\n\n return options.filter((option) => filterOptions(option, term));\n }, [options, term, onSearch, filterOptions]);\n\n const closeMenu = () => {\n if (!open) { return; }\n toggle();\n };\n\n const selectOption = (option: T) => {\n onChange(option);\n setTerm(renderOption(option).props.children);\n };\n\n const _renderOptions = () => {\n return visibleOptions.map((o, index) => {\n const child = renderOption(o);\n const selected = o === value;\n const active = index === activeIndex;\n return cloneElement(child, {\n id: `${id}-option-${index}`,\n role: 'option',\n 'aria-selected': selected,\n className: joinClass(\n child.props.className,\n (selected || active) && `${prefix}-select__option--selected`,\n ),\n onMouseEnter: () => setActiveIndex(index),\n onClick: () => selectOption(o),\n });\n });\n };\n\n const handleInput = (value: string) => {\n setTerm(value);\n setActiveIndex(-1);\n\n if (!onSearch) { return; }\n\n clearTimeout(searchTimer.current);\n searchTimer.current = setTimeout(() => { onSearch(value); }, debounceTime);\n };\n\n const handleOpen = (\n e: MouseEvent<HTMLElement> | FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement>\n ) => {\n if (disabled || open) { return; }\n if (onOpen) { onOpen(); }\n\n toggle(e as any);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) { return; }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!open) { handleOpen(e); return; }\n setActiveIndex((prev) => Math.min(prev + 1, visibleOptions.length - 1));\n break;\n case 'ArrowUp':\n e.preventDefault();\n setActiveIndex((prev) => Math.max(prev - 1, 0));\n break;\n case 'Enter': {\n const target = visibleOptions[activeIndex];\n if (open && target) {\n e.preventDefault();\n selectOption(target);\n closeMenu();\n }\n break;\n }\n case 'Escape':\n closeMenu();\n break;\n }\n };\n\n const handleReset = (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {\n e.stopPropagation();\n clearTimeout(searchTimer.current);\n onChange();\n setTerm('');\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <div\n className={cls}\n onClick={handleOpen}\n onFocus={handleOpen}\n >\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input\n {...props}\n value={term}\n type=\"text\"\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={id}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeIndex >= 0 ? `${id}-option-${activeIndex}` : undefined}\n onInput={(e: any) => handleInput(e.target.value)}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n />\n <ButtonIcon\n color=\"grey\"\n size={32}\n onMouseDown={(e) => e.preventDefault()}\n onClick={handleReset}\n className={`${prefix}-autocomplete__reset-button`}\n >\n <Icon name=\"times\" />\n </ButtonIcon>\n </div>\n <Menu\n id={id}\n role=\"listbox\"\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {\n loading && (\n <Stack justifyContent=\"center\" alignItems=\"center\">\n <Loading />\n </Stack>\n )\n }\n {!loading && _renderOptions()}\n {!loading && !visibleOptions.length && emptyContent}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Autocomplete) as <T>(\n props: Sx<AutocompleteProps<T>>\n) => React.JSX.Element;\n"],"names":["Autocomplete","label","error","position","disabled","startIcon","helperText","value","options","loading","debounceTime","onOpen","onChange","onSearch","renderOption","filterOptions","emptyContent","Typography","props","open","el","toggle","useMenu","term","setTerm","useState","activeIndex","setActiveIndex","searchTimer","useRef","id","useMemo","uuid","cls","joinClass","prefix","containerClss","labelClss","helperTextClss","useLayoutEffect","child","useEffect","renderIcon","icon","cloneElement","e","visibleOptions","option","closeMenu","selectOption","_renderOptions","o","index","selected","active","handleInput","handleOpen","handleKeyDown","prev","target","handleReset","jsxs","jsx","ButtonIcon","Icon","Menu","Stack","Loading","Autocomplete_default","createComponent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/Option-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/Select-CBfG5CDU.cjs"),r=require("../../chunks/Option-BrwvLgKT.cjs");require("react/jsx-runtime");require("react");require("../../chunks/index-DYxwT4uW.cjs");require("../../chunks/joinClass-Jk3EszKD.cjs");require("../../chunks/Icon-BN4Kp4Aq.cjs");require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/useMenu-BfWmrq4L.cjs");require("../../chunks/uuid-omnJ9TjZ.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");exports.Select=e.Select_default;exports.Option=r.Option;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{S as b}from"../../chunks/Select-D9o7DyOl.js";import{O as g}from"../../chunks/Option-BU_FWsap.js";import"react/jsx-runtime";import"react";import"../../chunks/index-CZ41y9Hn.js";import"../../chunks/joinClass-anSpaauN.js";import"../../chunks/Icon-DTU52KQE.js";import"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/useMenu-B49hOh6R.js";import"../../chunks/uuid-dGvr9vBZ.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/CardContent-CViecz1a.js";export{g as Option,b as Select};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");const t=require("./chunks/useTheme-DsrjDJKC.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");const t=require("./chunks/useTheme-DsrjDJKC.cjs"),s=require("./chunks/Bounce-ByNbJjX0.cjs"),e=require("./chunks/useForm-CD-_L271.cjs"),i=require("./chunks/Fade-DfxUFkY4.cjs"),d=require("./chunks/Option-BrwvLgKT.cjs"),l=require("./chunks/Slide-D4aLHjYS.cjs"),u=require("./chunks/useTabs-DXjPVKGl.cjs"),o=require("./chunks/TableHeader-D0wXM5mO.cjs"),q=require("./chunks/Zoom-BOnqwiDY.cjs"),r=require("./chunks/DrawerContent-BkSL16Os.cjs"),c=require("./chunks/useListenerResized-AwpsZLcP.cjs"),n=require("./chunks/useMenu-BfWmrq4L.cjs"),T=require("./chunks/useResize-Dnf6Ktrn.cjs"),m=require("./chunks/Card-Bqgukgip.cjs"),C=require("./chunks/CardContent-DPL-tBOS.cjs"),a=require("./chunks/GridItem-wwo-SHGR.cjs"),b=require("./chunks/MenuButton-Dpbow8YC.cjs"),F=require("./chunks/Select-CBfG5CDU.cjs"),w=require("./chunks/Typography-Ch-BLqCH.cjs");require("react");require("./chunks/generateSupportColors-CTMoGhDf.cjs");require("./chunks/wait-CgS79FV1.cjs");require("./chunks/index-DYxwT4uW.cjs");require("./chunks/joinClass-Jk3EszKD.cjs");require("./chunks/uuid-omnJ9TjZ.cjs");require("./chunks/createComponent-Bls5N6x8.cjs");require("./chunks/Stack-CF3Wyma9.cjs");require("./chunks/ButtonIcon-Ccq88QaY.cjs");require("./chunks/Ripple-Dy4i91j1.cjs");require("./chunks/Icon-BN4Kp4Aq.cjs");require("./chunks/convertPathToColor-D8eBpd_D.cjs");exports.ThemeProvider=t.ThemeProvider;exports.createTheme=t.createTheme;exports.useTheme=t.useTheme;exports.Bounce=s.Bounce;exports.Control=e.Control;exports.Form=e.Form;exports.FormControl=e.FormControl;exports.FormGroup=e.FormGroup;exports.useControl=e.useControl;exports.useForm=e.useForm;exports.useFormGroup=e.useFormGroup;exports.Fade=i.Fade;exports.Option=d.Option;exports.Slide=l.Slide;exports.TabButton=u.TabButton;exports.TabContent=u.TabContent;exports.Tabs=u.Tabs_default;exports.useTabs=u.useTabs;exports.Table=o.Table_default;exports.TableBody=o.TableBody;exports.TableCell=o.TableCell_default;exports.TableHeader=o.TableHeader;exports.Zoom=q.Zoom;exports.Drawer=r.Drawer_default;exports.DrawerContent=r.DrawerContent_default;exports.DrawerFooter=r.DrawerFooter_default;exports.DrawerHeader=r.DrawerHeader_default;exports.useDrawer=r.useDrawer;exports.useListenerResized=c.useListenerResized;exports.Menu=n.Menu;exports.useMenu=n.useMenu;exports.useResize=T.useResize;exports.Card=m.Card;exports.CardContent=C.CardContent;exports.Grid=a.Grid;exports.GridItem=a.GridItem;exports.MenuButton=b.MenuButton_default;exports.Select=F.Select_default;exports.variants=w.variants;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"react/jsx-runtime";import{T as d,c as C,u as l}from"./chunks/useTheme-BYuNiCiH.js";import{B as c}from"./chunks/Bounce-DP0PU3kr.js";import{C as w,F as B,a as G,b as M,u as S,c as h,d as v}from"./chunks/useForm-CRRXYOep.js";import{F as H}from"./chunks/Fade-CWDTkVB8.js";import{O as R
|
|
1
|
+
import"react/jsx-runtime";import{T as d,c as C,u as l}from"./chunks/useTheme-BYuNiCiH.js";import{B as c}from"./chunks/Bounce-DP0PU3kr.js";import{C as w,F as B,a as G,b as M,u as S,c as h,d as v}from"./chunks/useForm-CRRXYOep.js";import{F as H}from"./chunks/Fade-CWDTkVB8.js";import{O as R}from"./chunks/Option-BU_FWsap.js";import{S as y}from"./chunks/Slide-BxEwoZ70.js";import{T as L,a as P,b as g,u as j}from"./chunks/useTabs-C10MlXVP.js";import{T as q,a as A,b as E,c as J}from"./chunks/TableHeader-CrbbJXyv.js";import{Z as N}from"./chunks/Zoom-DqgU4Wfv.js";import{D as U,a as V,b as W,c as X,u as Y}from"./chunks/DrawerContent-D8NDBDBf.js";import{u as $}from"./chunks/useListenerResized-Bnqxrt7k.js";import{M as or,u as er}from"./chunks/useMenu-B49hOh6R.js";import{u as sr}from"./chunks/useResize-BUftB918.js";import{C as mr}from"./chunks/Card-C2mSdoXV.js";import{C as ur}from"./chunks/CardContent-CViecz1a.js";import{G as fr,a as xr}from"./chunks/GridItem-CaoPZmBu.js";import{M as Tr}from"./chunks/MenuButton-31ZFG3JW.js";import{S as dr}from"./chunks/Select-D9o7DyOl.js";import{v as lr}from"./chunks/Typography-B_WR62ip.js";import"react";import"./chunks/generateSupportColors-BN5t8dA-.js";import"./chunks/wait-BSgGzoPk.js";import"./chunks/index-CZ41y9Hn.js";import"./chunks/joinClass-anSpaauN.js";import"./chunks/uuid-dGvr9vBZ.js";import"./chunks/createComponent-BmdhWozT.js";import"./chunks/Stack-CHR_pZC4.js";import"./chunks/ButtonIcon-DMetcfYt.js";import"./chunks/Ripple-Bq9bxg4k.js";import"./chunks/Icon-DTU52KQE.js";import"./chunks/convertPathToColor-DtOjH4ZP.js";export{c as Bounce,mr as Card,ur as CardContent,w as Control,U as Drawer,V as DrawerContent,W as DrawerFooter,X as DrawerHeader,H as Fade,B as Form,G as FormControl,M as FormGroup,fr as Grid,xr as GridItem,or as Menu,Tr as MenuButton,R as Option,dr as Select,y as Slide,L as TabButton,P as TabContent,q as Table,A as TableBody,E as TableCell,J as TableHeader,g as Tabs,d as ThemeProvider,N as Zoom,C as createTheme,S as useControl,Y as useDrawer,h as useForm,v as useFormGroup,$ as useListenerResized,er as useMenu,sr as useResize,j as useTabs,l as useTheme,lr as variants};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/style.css
CHANGED
|
@@ -17,18 +17,15 @@
|
|
|
17
17
|
/* assets/Alert-De-ql8WM.css */
|
|
18
18
|
.iziui-alert{min-height:48px;width:max-content;border-radius:var(--radius)}.iziui-alert--primary{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--primary-opacity)}.iziui-alert--secondary{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--secondary-opacity)}.iziui-alert--info{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--info-opacity)}.iziui-alert--error{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--error-opacity)}.iziui-alert--warning{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--warning-opacity)}.iziui-alert--success{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--success-opacity)}.iziui-alert--grey{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--grey-opacity)}.iziui-alert--light.iziui-alert--primary{color:var(--primary-dark)}.iziui-alert--light.iziui-alert--secondary{color:var(--secondary-dark)}.iziui-alert--light.iziui-alert--info{color:var(--info-dark)}.iziui-alert--light.iziui-alert--error{color:var(--error-dark)}.iziui-alert--light.iziui-alert--warning{color:var(--warning-dark)}.iziui-alert--light.iziui-alert--success{color:var(--success-dark)}.iziui-alert--light.iziui-alert--grey{color:var(--grey-dark)}.iziui-alert--dark.iziui-alert--primary{color:var(--primary-light)}.iziui-alert--dark.iziui-alert--secondary{color:var(--secondary-light)}.iziui-alert--dark.iziui-alert--info{color:var(--info-light)}.iziui-alert--dark.iziui-alert--error{color:var(--error-light)}.iziui-alert--dark.iziui-alert--warning{color:var(--warning-light)}.iziui-alert--dark.iziui-alert--success{color:var(--success-light)}.iziui-alert--dark.iziui-alert--grey{color:var(--grey-light)}.iziui-alert__content{padding:8px 16px}.iziui-alert__button{margin-right:16px}
|
|
19
19
|
/*$vite$:1*/
|
|
20
|
-
/* assets/index-
|
|
21
|
-
.iziui-switch{position:relative}.iziui-switch__label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-switch__label--error{color:var(--error)}.iziui-switch__checkbox{height:0;width:0;visibility:hidden;position:absolute}.iziui-switch__checkbox:active+.iziui-switch__box .iziui-switch__button{width:36px}.iziui-switch__checkbox:checked+.iziui-switch__box .iziui-switch__button{left:100%;transform:translate(calc(-100% + 2px),-50%)}.iziui-switch__checkbox--primary:checked+.iziui-switch__box{background-color:var(--primary)}.iziui-switch__checkbox--secondary:checked+.iziui-switch__box{background-color:var(--secondary)}.iziui-switch__checkbox--info:checked+.iziui-switch__box{background-color:var(--info)}.iziui-switch__checkbox--error:checked+.iziui-switch__box{background-color:var(--error)}.iziui-switch__checkbox--warning:checked+.iziui-switch__box{background-color:var(--warning)}.iziui-switch__checkbox--success:checked+.iziui-switch__box{background-color:var(--success)}.iziui-switch__checkbox--grey:checked+.iziui-switch__box{background-color:var(--grey)}.iziui-switch__box{display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;cursor:pointer;width:58px;height:24px;background:var(--divider);border-radius:100px;position:relative;transition:background-color .3s cubic-bezier(.4,0,.2,1)}.iziui-switch__button{content:"";position:absolute;top:50%;transform:translateY(-50%);left:-2px;width:28px;height:28px;border-radius:45px;transition:all .3s cubic-bezier(.4,0,.2,1);background:#fff;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.iziui-switch__helper-text{opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-switch__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-switch__helper-text--error{color:var(--error)}
|
|
20
|
+
/* assets/index-O2dE8-hT.css */
|
|
21
|
+
.iziui-switch{position:relative;padding:3px}.iziui-switch__label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-switch__label--error{color:var(--error)}.iziui-switch__checkbox{height:0;width:0;visibility:hidden;position:absolute}.iziui-switch__checkbox:active+.iziui-switch__box .iziui-switch__button{width:36px}.iziui-switch__checkbox:checked+.iziui-switch__box .iziui-switch__button{left:100%;transform:translate(calc(-100% + 2px),-50%)}.iziui-switch__checkbox--primary:checked+.iziui-switch__box{background-color:var(--primary)}.iziui-switch__checkbox--secondary:checked+.iziui-switch__box{background-color:var(--secondary)}.iziui-switch__checkbox--info:checked+.iziui-switch__box{background-color:var(--info)}.iziui-switch__checkbox--error:checked+.iziui-switch__box{background-color:var(--error)}.iziui-switch__checkbox--warning:checked+.iziui-switch__box{background-color:var(--warning)}.iziui-switch__checkbox--success:checked+.iziui-switch__box{background-color:var(--success)}.iziui-switch__checkbox--grey:checked+.iziui-switch__box{background-color:var(--grey)}.iziui-switch__box{display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;cursor:pointer;width:58px;height:24px;background:var(--divider);border-radius:100px;position:relative;transition:background-color .3s cubic-bezier(.4,0,.2,1)}.iziui-switch__button{content:"";position:absolute;top:50%;transform:translateY(-50%);left:-2px;width:28px;height:28px;border-radius:45px;transition:all .3s cubic-bezier(.4,0,.2,1);background:#fff;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.iziui-switch__helper-text{opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-switch__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-switch__helper-text--error{color:var(--error)}
|
|
22
|
+
/*$vite$:1*/
|
|
23
|
+
/* assets/Select-1-YIWqjx.css */
|
|
24
|
+
.iziui-select{position:relative;padding:0;width:100%;border:none;border-radius:var(--radius);border:1px solid var(--divider);background-color:var(--background-default);font-size:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.iziui-select:focus-within{outline:2px solid var(--primary)}.iziui-select--disabled{cursor:not-allowed;background:var(--divider);color:var(--text-disabled)}.iziui-select--error{border-color:var(--error)}.iziui-select input{cursor:pointer;background:transparent;height:100%;width:100%;border:none;outline:none;-webkit-user-select:none;user-select:none;padding:10.8px 14.4px;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px}.iziui-select input:-internal-autofill-selected{-webkit-text-fill-color:var(--divider)}.iziui-select input::placeholder{color:var(--text-secondary);opacity:1}.iziui-select input:disabled{cursor:not-allowed;color:var(--text-disabled)}.iziui-select-container{width:100%;position:relative}.iziui-select-label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-select-label--error{color:var(--error)}.iziui-select__icon--left{margin-left:10.8px;margin-right:-5px}.iziui-select__icon--right{margin-right:10.8px}.iziui-select__icon--disabled{background:var(--text-disabled)}.iziui-select__option{font-size:16px;cursor:pointer;padding:.5rem 1rem;border:none;width:100%;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;display:flex;align-items:center;justify-content:flex-start;background-color:transparent}.iziui-select__option--selected{background-color:var(--primary-opacity)}.iziui-select__option--disabled{cursor:not-allowed;background-color:var(--divider)!important;color:var(--text-disabled)!important}.iziui-select__option--primary{color:var(--primary)}.iziui-select__option--primary:hover{background-color:var(--primary-opacity)}.iziui-select__option--secondary{color:var(--secondary)}.iziui-select__option--secondary:hover{background-color:var(--secondary-opacity)}.iziui-select__option--info{color:var(--info)}.iziui-select__option--info:hover{background-color:var(--info-opacity)}.iziui-select__option--error{color:var(--error)}.iziui-select__option--error:hover{background-color:var(--error-opacity)}.iziui-select__option--warning{color:var(--warning)}.iziui-select__option--warning:hover{background-color:var(--warning-opacity)}.iziui-select__option--success{color:var(--success)}.iziui-select__option--success:hover{background-color:var(--success-opacity)}.iziui-select__option--grey{color:var(--grey)}.iziui-select__option--grey:hover{background-color:var(--grey-opacity)}.iziui-select__option__icon{margin-right:10px}.iziui-select__helper-text{opacity:0;margin:6px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-select__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-select__helper-text--error{color:var(--error)}
|
|
22
25
|
/*$vite$:1*/
|
|
23
26
|
/* assets/index-ZcCW3wVX.css */
|
|
24
27
|
.iziui-input-file{position:relative;width:100%;height:180px;border:3px dashed var(--divider);border-radius:var(--radius);background-color:var(--background-default);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.iziui-input-file--dragging{background-color:var(--primary-opacity);border:3px dashed var(--primary)}.iziui-input-file--success{border:3px dashed var(--success)}.iziui-input-file--error{border:3px dashed var(--error)}.iziui-input-file input{opacity:0;width:100%;height:100%;cursor:pointer;position:absolute}
|
|
25
28
|
/*$vite$:1*/
|
|
26
|
-
/* assets/Loading-BeVKXeEI.css */
|
|
27
|
-
.iziui-loading{display:inline-block;animation:circle-rotate 1.4s linear 0s infinite}.iziui-loading__svg{display:block}.iziui-loading__circle{stroke:currentcolor;stroke-dasharray:80px,200px;stroke-dashoffset:0;animation:circle-animation 1.4s ease-in-out 0s infinite}@keyframes circle-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes circle-animation{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px}to{stroke-dasharray:100px,200px;stroke-dashoffset:-125px}}
|
|
28
|
-
/*$vite$:1*/
|
|
29
|
-
/* assets/Typography-DsZmVVQw.css */
|
|
30
|
-
.iziui-typography{color:currentColor;margin:0;transition:all .3s cubic-bezier(.4,0,.2,1);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.iziui-typography--weight-bold{font-weight:700!important}.iziui-typography--weight-light{font-weight:300!important}.iziui-typography--weight-normal{font-weight:500!important}.iziui-typography--h1{font-size:clamp(2rem,1.65rem + 1.6vw,3rem);line-height:1.12;letter-spacing:-.02em}.iziui-typography--h2{font-size:clamp(1.75rem,1.5rem + 1.2vw,2.5rem);line-height:1.16;letter-spacing:-.015em;font-weight:700}.iziui-typography--h3{font-size:clamp(1.5rem,1.35rem + .9vw,2rem);line-height:1.2;letter-spacing:-.01em}.iziui-typography--h4{font-size:clamp(1.25rem,1.15rem + .6vw,1.5rem);line-height:1.25;letter-spacing:-.005em}.iziui-typography--h5{font-size:clamp(1.125rem,1.05rem + .4vw,1.25rem);line-height:1.3;letter-spacing:0;font-weight:600}.iziui-typography--h6{font-size:clamp(1rem,.98rem + .25vw,1.125rem);line-height:1.35;letter-spacing:.01em}.iziui-typography--subtitle1{font-size:clamp(1.0625rem,1.02rem + .25vw,1.125rem);line-height:1.5;letter-spacing:.005em}.iziui-typography--subtitle2{font-size:clamp(.9375rem,.92rem + .2vw,1rem);line-height:1.45;letter-spacing:.01em}.iziui-typography--body1{font-size:clamp(1rem,.95rem + .2vw,1.0625rem);line-height:1.6;letter-spacing:0}.iziui-typography--body2{font-size:clamp(.875rem,.85rem + .2vw,.9375rem);line-height:1.55;letter-spacing:0}
|
|
31
|
-
/*$vite$:1*/
|
|
32
29
|
/* assets/index-DYPt7lEw.css */
|
|
33
30
|
.iziui-input-container{width:100%;position:relative}.iziui-input-label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-input-label--error{color:var(--error)}.iziui-input{cursor:text;border-radius:var(--radius);border:1px solid var(--divider);position:relative;background-color:var(--background-default);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center}.iziui-input:focus-within{outline:2px solid var(--primary)}.iziui-input--error{border-color:var(--error)}.iziui-input--disabled{cursor:not-allowed;background:var(--divider);color:var(--text-disabled)}.iziui-input input{background:transparent;height:100%;width:100%;border:none;outline:none;-webkit-user-select:none;user-select:none;padding:10.8px 14.4px;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px}.iziui-input input:-internal-autofill-selected{-webkit-text-fill-color:var(--divider)}.iziui-input input::placeholder{color:var(--);opacity:1}.iziui-input input:disabled{cursor:not-allowed}.iziui-input__helper-text{opacity:0;margin:6px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-input__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-input__helper-text--error{color:var(--error)}.iziui-input__icon{color:var(--text-secondary)}.iziui-input__icon--margin-left{margin-right:8px;margin-left:-8px}.iziui-input__icon--margin-right{margin-right:-8px;margin-left:8px}.iziui-input__icon--padding-left{padding-right:8px;padding-left:-8px}.iziui-input__icon--padding-right{padding-right:-8px;padding-left:8px}
|
|
34
31
|
/*$vite$:1*/
|
|
@@ -38,6 +35,15 @@
|
|
|
38
35
|
/* assets/index-dttcdTxl.css */
|
|
39
36
|
.iziui-checkbox{width:100%;padding:10.8px 14.4px;border-radius:var(--radius);color:var(--text-primary);position:relative;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-checkbox--primary input[type=checkbox]{border:2px solid var(--primary)}.iziui-checkbox--primary input[type=checkbox]:checked{background-color:var(--primary)}.iziui-checkbox--primary input[type=checkbox]:before{border:solid var(--primary-opacity);opacity:0}.iziui-checkbox--primary--checked input[type=checkbox]:before{border:solid var(--primary-contrast);opacity:1;transform:rotate(45deg) translate(-50%,-50%) scale(1)!important}.iziui-checkbox--secondary input[type=checkbox]{border:2px solid var(--secondary)}.iziui-checkbox--secondary input[type=checkbox]:checked{background-color:var(--secondary)}.iziui-checkbox--secondary input[type=checkbox]:before{border:solid var(--secondary-opacity);opacity:0}.iziui-checkbox--secondary--checked input[type=checkbox]:before{border:solid var(--secondary-contrast);opacity:1;transform:rotate(45deg) translate(-50%,-50%) scale(1)!important}.iziui-checkbox--info input[type=checkbox]{border:2px solid var(--info)}.iziui-checkbox--info input[type=checkbox]:checked{background-color:var(--info)}.iziui-checkbox--info input[type=checkbox]:before{border:solid var(--info-opacity);opacity:0}.iziui-checkbox--info--checked input[type=checkbox]:before{border:solid var(--info-contrast);opacity:1;transform:rotate(45deg) translate(-50%,-50%) scale(1)!important}.iziui-checkbox--error input[type=checkbox]{border:2px solid var(--error)}.iziui-checkbox--error input[type=checkbox]:checked{background-color:var(--error)}.iziui-checkbox--error input[type=checkbox]:before{border:solid var(--error-opacity);opacity:0}.iziui-checkbox--error--checked input[type=checkbox]:before{border:solid var(--error-contrast);opacity:1;transform:rotate(45deg) translate(-50%,-50%) scale(1)!important}.iziui-checkbox--warning input[type=checkbox]{border:2px solid var(--warning)}.iziui-checkbox--warning input[type=checkbox]:checked{background-color:var(--warning)}.iziui-checkbox--warning input[type=checkbox]:before{border:solid var(--warning-opacity);opacity:0}.iziui-checkbox--warning--checked input[type=checkbox]:before{border:solid var(--warning-contrast);opacity:1;transform:rotate(45deg) translate(-50%,-50%) scale(1)!important}.iziui-checkbox--success input[type=checkbox]{border:2px solid var(--success)}.iziui-checkbox--success input[type=checkbox]:checked{background-color:var(--success)}.iziui-checkbox--success input[type=checkbox]:before{border:solid var(--success-opacity);opacity:0}.iziui-checkbox--success--checked input[type=checkbox]:before{border:solid var(--success-contrast);opacity:1;transform:rotate(45deg) translate(-50%,-50%) scale(1)!important}.iziui-checkbox--grey input[type=checkbox]{border:2px solid var(--grey)}.iziui-checkbox--grey input[type=checkbox]:checked{background-color:var(--grey)}.iziui-checkbox--grey input[type=checkbox]:before{border:solid var(--grey-opacity);opacity:0}.iziui-checkbox--grey--checked input[type=checkbox]:before{border:solid var(--grey-contrast);opacity:1;transform:rotate(45deg) translate(-50%,-50%) scale(1)!important}.iziui-checkbox--disabled{color:var(--text-disabled);cursor:not-allowed;background-color:transparent}.iziui-checkbox--disabled:hover{background-color:transparent}.iziui-checkbox input[type=checkbox]{position:relative;border-radius:var(--radius);background:none;cursor:pointer;line-height:0;margin:0 .6em 0 0;outline:0;padding:0!important;vertical-align:text-top;height:22px;width:22px;-webkit-appearance:none;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:.5}.iziui-checkbox input[type=checkbox]:hover{opacity:1}.iziui-checkbox input[type=checkbox]:checked{opacity:1}.iziui-checkbox input[type=checkbox]:before{content:"";position:absolute;right:50%;top:50%;width:4px;height:10px;border-width:0 2px 2px 0;margin:-1px -1px 0;transform:rotate(45deg) translate(-50%,-50%) scale(0);z-index:2;transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-checkbox input[type=checkbox]:disabled{background-color:var(--divider);border:2px solid var(--divider);opacity:1}.iziui-checkbox__helper-text{opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px);margin-left:14.4px}.iziui-checkbox__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-checkbox__helper-text--error{color:var(--error)}
|
|
40
37
|
/*$vite$:1*/
|
|
38
|
+
/* assets/index-VGPs5UN3.css */
|
|
39
|
+
.iziui-autocomplete{position:relative;padding:0;width:100%;border:none;border-radius:var(--radius);border:1px solid var(--divider);background-color:var(--background-default);font-size:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.iziui-autocomplete:focus-within{outline:2px solid var(--primary)}.iziui-autocomplete--disabled{cursor:not-allowed;background:var(--divider);color:var(--text-disabled)}.iziui-autocomplete--error{border-color:var(--error)}.iziui-autocomplete input{cursor:pointer;background:transparent;height:100%;width:100%;border:none;outline:none;-webkit-user-select:none;user-select:none;padding:10.8px 14.4px;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px}.iziui-autocomplete input:-internal-autofill-selected{-webkit-text-fill-color:var(--divider)}.iziui-autocomplete input::placeholder{color:var(--text-secondary);opacity:1}.iziui-autocomplete input:disabled{cursor:not-allowed;color:var(--text-disabled)}.iziui-autocomplete-container{width:100%;position:relative}.iziui-autocomplete-label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-autocomplete-label--error{color:var(--error)}.iziui-autocomplete__reset-button{margin-right:6px}.iziui-autocomplete__icon--left{margin-left:10.8px;margin-right:-5px}.iziui-autocomplete__icon--disabled{background:var(--text-disabled)}.iziui-autocomplete__helper-text{opacity:0;margin:6px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-autocomplete__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-autocomplete__helper-text--error{color:var(--error)}
|
|
40
|
+
/*$vite$:1*/
|
|
41
|
+
/* assets/Loading-BeVKXeEI.css */
|
|
42
|
+
.iziui-loading{display:inline-block;animation:circle-rotate 1.4s linear 0s infinite}.iziui-loading__svg{display:block}.iziui-loading__circle{stroke:currentcolor;stroke-dasharray:80px,200px;stroke-dashoffset:0;animation:circle-animation 1.4s ease-in-out 0s infinite}@keyframes circle-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes circle-animation{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px}to{stroke-dasharray:100px,200px;stroke-dashoffset:-125px}}
|
|
43
|
+
/*$vite$:1*/
|
|
44
|
+
/* assets/Typography-DsZmVVQw.css */
|
|
45
|
+
.iziui-typography{color:currentColor;margin:0;transition:all .3s cubic-bezier(.4,0,.2,1);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.iziui-typography--weight-bold{font-weight:700!important}.iziui-typography--weight-light{font-weight:300!important}.iziui-typography--weight-normal{font-weight:500!important}.iziui-typography--h1{font-size:clamp(2rem,1.65rem + 1.6vw,3rem);line-height:1.12;letter-spacing:-.02em}.iziui-typography--h2{font-size:clamp(1.75rem,1.5rem + 1.2vw,2.5rem);line-height:1.16;letter-spacing:-.015em;font-weight:700}.iziui-typography--h3{font-size:clamp(1.5rem,1.35rem + .9vw,2rem);line-height:1.2;letter-spacing:-.01em}.iziui-typography--h4{font-size:clamp(1.25rem,1.15rem + .6vw,1.5rem);line-height:1.25;letter-spacing:-.005em}.iziui-typography--h5{font-size:clamp(1.125rem,1.05rem + .4vw,1.25rem);line-height:1.3;letter-spacing:0;font-weight:600}.iziui-typography--h6{font-size:clamp(1rem,.98rem + .25vw,1.125rem);line-height:1.35;letter-spacing:.01em}.iziui-typography--subtitle1{font-size:clamp(1.0625rem,1.02rem + .25vw,1.125rem);line-height:1.5;letter-spacing:.005em}.iziui-typography--subtitle2{font-size:clamp(.9375rem,.92rem + .2vw,1rem);line-height:1.45;letter-spacing:.01em}.iziui-typography--body1{font-size:clamp(1rem,.95rem + .2vw,1.0625rem);line-height:1.6;letter-spacing:0}.iziui-typography--body2{font-size:clamp(.875rem,.85rem + .2vw,.9375rem);line-height:1.55;letter-spacing:0}
|
|
46
|
+
/*$vite$:1*/
|
|
41
47
|
/* assets/index-tn0RQdqM.css */
|
|
42
48
|
/*$vite$:1*/
|
|
43
49
|
/* assets/Card-CsjbyRZq.css */
|
|
@@ -58,9 +64,6 @@
|
|
|
58
64
|
/* assets/index-Bs0qH-ot.css */
|
|
59
65
|
.iziui-avatar{display:flex;position:relative;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem;line-height:1;overflow:hidden;-webkit-user-select:none;user-select:none;border:1px solid var(--divider);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-avatar--rounded{border-radius:var(--radius)}.iziui-avatar--circular{border-radius:50%}.iziui-avatar--clickable{cursor:pointer}.iziui-avatar--primary{color:var(--primary-contrast);background-color:var(--primary)}.iziui-avatar--secondary{color:var(--secondary-contrast);background-color:var(--secondary)}.iziui-avatar--info{color:var(--info-contrast);background-color:var(--info)}.iziui-avatar--error{color:var(--error-contrast);background-color:var(--error)}.iziui-avatar--warning{color:var(--warning-contrast);background-color:var(--warning)}.iziui-avatar--success{color:var(--success-contrast);background-color:var(--success)}.iziui-avatar--grey{color:var(--grey-contrast);background-color:var(--grey)}.iziui-avatar__icon{color:currentColor!important}
|
|
60
66
|
/*$vite$:1*/
|
|
61
|
-
/* assets/Option-1-YIWqjx.css */
|
|
62
|
-
.iziui-select{position:relative;padding:0;width:100%;border:none;border-radius:var(--radius);border:1px solid var(--divider);background-color:var(--background-default);font-size:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.iziui-select:focus-within{outline:2px solid var(--primary)}.iziui-select--disabled{cursor:not-allowed;background:var(--divider);color:var(--text-disabled)}.iziui-select--error{border-color:var(--error)}.iziui-select input{cursor:pointer;background:transparent;height:100%;width:100%;border:none;outline:none;-webkit-user-select:none;user-select:none;padding:10.8px 14.4px;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px}.iziui-select input:-internal-autofill-selected{-webkit-text-fill-color:var(--divider)}.iziui-select input::placeholder{color:var(--text-secondary);opacity:1}.iziui-select input:disabled{cursor:not-allowed;color:var(--text-disabled)}.iziui-select-container{width:100%;position:relative}.iziui-select-label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-select-label--error{color:var(--error)}.iziui-select__icon--left{margin-left:10.8px;margin-right:-5px}.iziui-select__icon--right{margin-right:10.8px}.iziui-select__icon--disabled{background:var(--text-disabled)}.iziui-select__option{font-size:16px;cursor:pointer;padding:.5rem 1rem;border:none;width:100%;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;display:flex;align-items:center;justify-content:flex-start;background-color:transparent}.iziui-select__option--selected{background-color:var(--primary-opacity)}.iziui-select__option--disabled{cursor:not-allowed;background-color:var(--divider)!important;color:var(--text-disabled)!important}.iziui-select__option--primary{color:var(--primary)}.iziui-select__option--primary:hover{background-color:var(--primary-opacity)}.iziui-select__option--secondary{color:var(--secondary)}.iziui-select__option--secondary:hover{background-color:var(--secondary-opacity)}.iziui-select__option--info{color:var(--info)}.iziui-select__option--info:hover{background-color:var(--info-opacity)}.iziui-select__option--error{color:var(--error)}.iziui-select__option--error:hover{background-color:var(--error-opacity)}.iziui-select__option--warning{color:var(--warning)}.iziui-select__option--warning:hover{background-color:var(--warning-opacity)}.iziui-select__option--success{color:var(--success)}.iziui-select__option--success:hover{background-color:var(--success-opacity)}.iziui-select__option--grey{color:var(--grey)}.iziui-select__option--grey:hover{background-color:var(--grey-opacity)}.iziui-select__option__icon{margin-right:10px}.iziui-select__helper-text{opacity:0;margin:6px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-select__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-select__helper-text--error{color:var(--error)}
|
|
63
|
-
/*$vite$:1*/
|
|
64
67
|
/* assets/index-C3yxI1Ai.css */
|
|
65
68
|
.iziui-color-picker{padding:0;min-width:160px;width:100%;cursor:pointer;overflow:hidden;position:relative;border-radius:var(--radius);border:1px solid var(--divider);background-color:var(--background-default);display:flex;align-items:center;justify-content:flex-start}.iziui-color-picker:focus-within{outline:2px solid var(--primary)}.iziui-color-picker--error{border-color:var(--error)}.iziui-color-picker-container{width:fit-content}.iziui-color-picker__preview{width:72px;height:48px;background-color:var(--background-default);border:none;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--divider)}.iziui-color-picker__preview div{width:20px;height:20px;border-radius:var(--radius);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-color-picker__label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-color-picker__label--error{color:var(--error)}.iziui-color-picker__value{width:100%;height:100%;padding-left:16px;color:var(--text-secondary);text-transform:uppercase;display:flex;align-items:center;justify-content:flex-start}.iziui-color-picker__value--error{color:var(--error)}.iziui-color-picker__helper-text{opacity:0;margin-top:5px;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px}.iziui-color-picker__helper-text--visible{opacity:1}.iziui-color-picker__helper-text--error{color:var(--error)}.iziui-color-picker__color{width:30px;height:30px;position:relative;border-radius:var(--radius);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;display:flex;justify-content:center;align-items:center;border:none;cursor:pointer}.iziui-color-picker__color:hover{box-shadow:0 0 0 2px var(--primary)}.iziui-color-picker__color__icon{transform:scale(0);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-color-picker__color__icon--visible{transform:scale(1)}.iziui-color-picker__color input{position:absolute;visibility:hidden}.iziui-color-picker input{height:48px;width:100%;border:none;outline:none;font:inherit;padding-left:16px}
|
|
66
69
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";const t=require("react/jsx-runtime"),a=require("react"),e=require("./index-DYxwT4uW.cjs"),n=require("./joinClass-Jk3EszKD.cjs"),E=require("./Icon-BN4Kp4Aq.cjs"),j=require("./useMenu-BfWmrq4L.cjs"),M=require("./createComponent-Bls5N6x8.cjs");function O({error:o,color:c="grey",position:p="bottom",label:u,helperText:i,startIcon:x,children:f,disabled:l,onChange:_,...r}){const C=a.Children.toArray(f),$=a.useMemo(()=>C.find(s=>s.props.value===r.value)?.props.children||"",[r.value]),[N,b,d]=j.useMenu(),h=n.joinClass(`${e.prefix}-select-container`),y=n.joinClass(`${e.prefix}-select-label`,o&&`${e.prefix}-select-label--error`),v=n.joinClass(`${e.prefix}-select`,l&&`${e.prefix}-select--disabled`,o&&`${e.prefix}-select--error`,r.className),q=n.joinClass(`${e.prefix}-select__helper-text`,i&&`${e.prefix}-select__helper-text--visible`,o&&`${e.prefix}-select__helper-text--error`),g=s=>a.cloneElement(s,{className:n.joinClass(s.props.className,`${e.prefix}-select__icon--left`),type:"button",style:{color:c},onClick:m=>{m.stopPropagation(),s.props.onClick&&!l&&s.props.onClick(m)}}),k=()=>C.map(s=>a.cloneElement(s,{color:c,className:n.joinClass(s.props.className,s.props.value===r.value&&`${e.prefix}-select__option--selected`),onClick:m=>{!s.props.disabled&&_&&_(m)}}));return t.jsxs("div",{className:h,children:[u&&t.jsxs("label",{className:y,children:[u," ",r.required&&"*"]}),t.jsxs("button",{type:"button",className:v,onClick:d,disabled:l,children:[t.jsx("div",{children:x&&g(x)}),t.jsx("input",{...r,readOnly:!0,type:"text",value:$,disabled:l}),t.jsx(E.Icon,{name:"angle-down",sx:{color:({grey:s})=>s.main},className:`${e.prefix}-select__icon--right`})]}),t.jsx(j.Menu,{autoClose:!0,position:p,direction:"center",open:N,anchorEl:b,onClose:d,children:k()}),t.jsx("span",{className:q,children:i})]})}const S=M.createComponent(O);function w({children:o,color:c,startIcon:p,disabled:u,...i}){const x=n.joinClass(`${e.prefix}-select__option`,u&&`${e.prefix}-select__option--disabled`,c&&`${e.prefix}-select__option--${c}`,i.className),f=l=>a.cloneElement(l,{type:"button",className:n.joinClass(l.props.className,`${e.prefix}-select__option__icon`)});return t.jsxs("button",{type:"button",...i,className:x,children:[p&&f(p),o]})}exports.Option=w;exports.Select_default=S;
|
|
2
|
-
//# sourceMappingURL=Option-COyiqmg0.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Option-COyiqmg0.cjs","sources":["../../src/fields/Select/Select.tsx","../../src/fields/Select/Option.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, type MenuProps, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n autoClose?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n position = 'bottom',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n","import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Select","error","color","position","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent","Option","className"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{jsxs as _,jsx as a}from"react/jsx-runtime";import{Children as O,useMemo as I,cloneElement as d}from"react";import{p as e}from"./index-CZ41y9Hn.js";import{j as s}from"./joinClass-anSpaauN.js";import{I as S}from"./Icon-DTU52KQE.js";import{u as w,M as E}from"./useMenu-B49hOh6R.js";import{c as q}from"./createComponent-BmdhWozT.js";function A({error:o,color:r="grey",position:i="bottom",label:p,helperText:c,startIcon:m,children:$,disabled:n,onChange:f,...l}){const N=O.toArray($),b=I(()=>N.find(t=>t.props.value===l.value)?.props.children||"",[l.value]),[h,y,C]=w(),v=s(`${e}-select-container`),x=s(`${e}-select-label`,o&&`${e}-select-label--error`),g=s(`${e}-select`,n&&`${e}-select--disabled`,o&&`${e}-select--error`,l.className),k=s(`${e}-select__helper-text`,c&&`${e}-select__helper-text--visible`,o&&`${e}-select__helper-text--error`),j=t=>d(t,{className:s(t.props.className,`${e}-select__icon--left`),type:"button",style:{color:r},onClick:u=>{u.stopPropagation(),t.props.onClick&&!n&&t.props.onClick(u)}}),M=()=>N.map(t=>d(t,{color:r,className:s(t.props.className,t.props.value===l.value&&`${e}-select__option--selected`),onClick:u=>{!t.props.disabled&&f&&f(u)}}));return _("div",{className:v,children:[p&&_("label",{className:x,children:[p," ",l.required&&"*"]}),_("button",{type:"button",className:g,onClick:C,disabled:n,children:[a("div",{children:m&&j(m)}),a("input",{...l,readOnly:!0,type:"text",value:b,disabled:n}),a(S,{name:"angle-down",sx:{color:({grey:t})=>t.main},className:`${e}-select__icon--right`})]}),a(E,{autoClose:!0,position:i,direction:"center",open:h,anchorEl:y,onClose:C,children:M()}),a("span",{className:k,children:c})]})}const H=q(A);function J({children:o,color:r,startIcon:i,disabled:p,...c}){const m=s(`${e}-select__option`,p&&`${e}-select__option--disabled`,r&&`${e}-select__option--${r}`,c.className);return _("button",{type:"button",...c,className:m,children:[i&&(n=>d(n,{type:"button",className:s(n.props.className,`${e}-select__option__icon`)}))(i),o]})}export{J as O,H as S};
|
|
2
|
-
//# sourceMappingURL=Option-CzDngSSk.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Option-CzDngSSk.js","sources":["../../src/fields/Select/Select.tsx","../../src/fields/Select/Option.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, type MenuProps, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n autoClose?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n position = 'bottom',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n","import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Select","error","color","position","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent","Option","className"],"mappings":"gVAiCA,SAASA,EAAO,CACd,MAAAC,EACA,MAAAC,EAAQ,OACR,SAAAC,EAAW,SACX,MAAAC,EACA,WAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAgBC,EAAS,QAAQL,CAAQ,EAEzCM,EAAWC,EAAQ,IAChBH,EAAc,KAAMI,GACzBA,EAAM,MAAM,QAAUL,EAAM,KAAK,GAAG,MAAM,UAAY,GACvD,CAACA,EAAM,KAAK,CAAC,EAEV,CAACM,EAAMC,EAAIC,CAAM,EAAIC,EAAA,EAErBC,EAAgBC,EACpB,GAAGC,CAAM,mBAAA,EAGLC,EAAYF,EAChB,GAAGC,CAAM,gBACTrB,GAAS,GAAGqB,CAAM,sBAAA,EAGdE,EAAOH,EACX,GAAGC,CAAM,UACTd,GAAY,GAAGc,CAAM,oBACrBrB,GAAS,GAAGqB,CAAM,iBAClBZ,EAAM,SAAA,EAGFe,EAAiBJ,EACrB,GAAGC,CAAM,uBACTjB,GAAc,GAAGiB,CAAM,gCACvBrB,GAAS,GAAGqB,CAAM,6BAAA,EAGdI,EAAcC,GACXC,EAAaD,EAAM,CACxB,UAAWN,EACTM,EAAK,MAAM,UACX,GAAGL,CAAM,qBAAA,EAEX,KAAM,SACN,MAAO,CAAE,MAAApB,CAAA,EACT,QAAU2B,GAAM,CACdA,EAAE,gBAAA,EACEF,EAAK,MAAM,SAAW,CAACnB,GAAYmB,EAAK,MAAM,QAAQE,CAAC,CAC7D,CAAA,CACD,EAGGC,EAAe,IACZnB,EAAc,IAAKI,GACjBa,EAAab,EAAO,CACzB,MAAAb,EACA,UAAWmB,EACTN,EAAM,MAAM,UACZA,EAAM,MAAM,QAAUL,EAAM,OAAS,GAAGY,CAAM,2BAAA,EAEhD,QAAUO,GAAM,CACV,CAACd,EAAM,MAAM,UAAYN,GAAYA,EAASoB,CAAQ,CAC5D,CAAA,CACD,CACF,EAGH,OACEE,EAAC,MAAA,CAAI,UAAWX,EACb,SAAA,CAAAhB,GAAS2B,EAAC,QAAA,CAAM,UAAWR,EAAY,SAAA,CAAAnB,EAAM,IAAEM,EAAM,UAAY,GAAA,EAAI,EACtEqB,EAAC,UAAO,KAAK,SAAS,UAAWP,EAAM,QAASN,EAAQ,SAAAV,EACtD,SAAA,CAAAwB,EAAC,MAAA,CACE,SAAA1B,GAAaoB,EAAWpB,CAA8B,EACzD,EACA0B,EAAC,QAAA,CAAO,GAAGtB,EAAO,SAAQ,GAAC,KAAK,OAAO,MAAOG,EAAU,SAAAL,CAAA,CAAoB,EAC5EwB,EAACC,EAAA,CACC,KAAK,aACL,GAAI,CAAE,MAAO,CAAC,CAAE,KAAAC,CAAA,IAAWA,EAAK,IAAA,EAChC,UAAW,GAAGZ,CAAM,sBAAA,CAAA,CACtB,EACF,EACAU,EAACG,EAAA,CACC,UAAS,GACT,SAAAhC,EACA,UAAU,SACV,KAAAa,EACA,SAAUC,EACV,QAASC,EAER,SAAAY,EAAA,CAAa,CAAA,EAEhBE,EAAC,OAAA,CAAK,UAAWP,EAAiB,SAAApB,CAAA,CAAW,CAAA,EAC/C,CAEJ,CAEA,MAAA+B,EAAeC,EAAgBrC,CAAM,EC1HrC,SAAwBsC,EAAO,CAAE,SAAA/B,EAAU,MAAAL,EAAO,UAAAI,EAAW,SAAAE,EAAU,GAAGE,GAAsB,CAC9F,MAAM6B,EAAYlB,EAChB,GAAGC,CAAM,kBACTd,GAAY,GAAGc,CAAM,4BACrBpB,GAAS,GAAGoB,CAAM,oBAAoBpB,CAAK,GAC3CQ,EAAM,SAAA,EAaR,SACG,SAAA,CAAO,KAAK,SAAU,GAAGA,EAAO,UAAA6B,EAC9B,SAAA,CAAAjC,IAZeqB,GACXC,EAAaD,EAAM,CACxB,KAAM,SACN,UAAWN,EACTM,EAAK,MAAM,UACX,GAAGL,CAAM,uBAAA,CACX,CACD,GAK0BhB,CAA8B,EACtDC,CAAA,EACH,CAEJ"}
|