@raystack/apsara 0.48.2 → 0.48.3
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/components/breadcrumb/breadcrumb-item.cjs +26 -0
- package/dist/components/breadcrumb/breadcrumb-item.cjs.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-item.d.ts +14 -0
- package/dist/components/breadcrumb/breadcrumb-item.d.ts.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-item.js +24 -0
- package/dist/components/breadcrumb/breadcrumb-item.js.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-misc.cjs +20 -0
- package/dist/components/breadcrumb/breadcrumb-misc.cjs.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-misc.d.ts +8 -0
- package/dist/components/breadcrumb/breadcrumb-misc.d.ts.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-misc.js +17 -0
- package/dist/components/breadcrumb/breadcrumb-misc.js.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-root.cjs +25 -0
- package/dist/components/breadcrumb/breadcrumb-root.cjs.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-root.d.ts +10 -0
- package/dist/components/breadcrumb/breadcrumb-root.d.ts.map +1 -0
- package/dist/components/breadcrumb/breadcrumb-root.js +23 -0
- package/dist/components/breadcrumb/breadcrumb-root.js.map +1 -0
- package/dist/components/breadcrumb/breadcrumb.cjs +7 -53
- package/dist/components/breadcrumb/breadcrumb.cjs.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.d.ts +5 -27
- package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +7 -53
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.module.css.cjs +1 -1
- package/dist/components/breadcrumb/breadcrumb.module.css.js +1 -1
- package/dist/components/breadcrumb/index.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-misc.cjs +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-misc.cjs.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-misc.js +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-misc.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-root.cjs +10 -10
- package/dist/components/dropdown-menu/dropdown-menu-root.cjs.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-root.d.ts +8 -5
- package/dist/components/dropdown-menu/dropdown-menu-root.d.ts.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-root.js +11 -11
- package/dist/components/dropdown-menu/dropdown-menu-root.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-trigger.cjs +6 -2
- package/dist/components/dropdown-menu/dropdown-menu-trigger.cjs.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-trigger.d.ts +1 -0
- package/dist/components/dropdown-menu/dropdown-menu-trigger.d.ts.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-trigger.js +6 -2
- package/dist/components/dropdown-menu/dropdown-menu-trigger.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +1 -1
- package/dist/components/filter-chip/filter-chip-operation.cjs +24 -0
- package/dist/components/filter-chip/filter-chip-operation.cjs.map +1 -0
- package/dist/components/filter-chip/filter-chip-operation.d.ts +10 -0
- package/dist/components/filter-chip/filter-chip-operation.d.ts.map +1 -0
- package/dist/components/filter-chip/filter-chip-operation.js +22 -0
- package/dist/components/filter-chip/filter-chip-operation.js.map +1 -0
- package/dist/components/filter-chip/filter-chip.cjs +29 -41
- package/dist/components/filter-chip/filter-chip.cjs.map +1 -1
- package/dist/components/filter-chip/filter-chip.d.ts +6 -5
- package/dist/components/filter-chip/filter-chip.d.ts.map +1 -1
- package/dist/components/filter-chip/filter-chip.js +29 -41
- package/dist/components/filter-chip/filter-chip.js.map +1 -1
- package/dist/components/filter-chip/filter-chip.module.css.cjs +1 -1
- package/dist/components/filter-chip/filter-chip.module.css.js +1 -1
- package/dist/components/select/select-item.cjs +2 -1
- package/dist/components/select/select-item.cjs.map +1 -1
- package/dist/components/select/select-item.d.ts.map +1 -1
- package/dist/components/select/select-item.js +2 -1
- package/dist/components/select/select-item.js.map +1 -1
- package/dist/components/select/select-root.cjs +2 -2
- package/dist/components/select/select-root.cjs.map +1 -1
- package/dist/components/select/select-root.d.ts.map +1 -1
- package/dist/components/select/select-root.js +2 -2
- package/dist/components/select/select-root.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -15,35 +15,35 @@ const useDropdownContext = () => {
|
|
|
15
15
|
if (!context)
|
|
16
16
|
return {};
|
|
17
17
|
const shouldFilter = !!(context?.autocomplete &&
|
|
18
|
-
context?.autocompleteMode ===
|
|
18
|
+
context?.autocompleteMode === 'auto' &&
|
|
19
19
|
context?.searchValue?.length);
|
|
20
20
|
const shouldFilterParent = !!(context?.parent?.autocomplete &&
|
|
21
|
-
context?.parent?.autocompleteMode ===
|
|
21
|
+
context?.parent?.autocompleteMode === 'auto' &&
|
|
22
22
|
context?.parent?.searchValue?.length);
|
|
23
23
|
return {
|
|
24
24
|
...context,
|
|
25
25
|
shouldFilter,
|
|
26
26
|
parent: context?.parent && {
|
|
27
27
|
...context.parent,
|
|
28
|
-
shouldFilter: shouldFilterParent
|
|
29
|
-
}
|
|
28
|
+
shouldFilter: shouldFilterParent
|
|
29
|
+
}
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
|
-
const DropdownMenuRoot = ({ autocomplete, autocompleteMode =
|
|
32
|
+
const DropdownMenuRoot = ({ autocomplete, autocompleteMode = 'auto', searchValue: providedSearchValue, onSearch, focusLoop = true, defaultSearchValue = '', onOpenChange, ...props }) => {
|
|
33
33
|
const [internalSearchValue, setInternalSearchValue] = React.useState(defaultSearchValue);
|
|
34
34
|
const dropdownContext = useDropdownContext();
|
|
35
35
|
const searchValue = providedSearchValue ?? internalSearchValue;
|
|
36
|
-
const setValue = (value) => {
|
|
36
|
+
const setValue = React.useCallback((value) => {
|
|
37
37
|
setInternalSearchValue(value);
|
|
38
38
|
onSearch?.(value);
|
|
39
|
-
};
|
|
40
|
-
const element = jsxRuntime.jsxRuntimeExports.jsx(menuProvider.MenuProvider, { focusLoop: focusLoop, ...props });
|
|
39
|
+
}, [onSearch]);
|
|
40
|
+
const element = (jsxRuntime.jsxRuntimeExports.jsx(menuProvider.MenuProvider, { focusLoop: focusLoop, setOpen: onOpenChange, ...props }));
|
|
41
41
|
return (jsxRuntime.jsxRuntimeExports.jsx(DropdownContext.Provider, { value: {
|
|
42
42
|
autocomplete,
|
|
43
43
|
parent: dropdownContext,
|
|
44
44
|
autocompleteMode,
|
|
45
|
-
searchValue
|
|
46
|
-
}, children: autocomplete ? (jsxRuntime.jsxRuntimeExports.jsx(comboboxProvider.ComboboxProvider, { resetValueOnHide: true, focusLoop: focusLoop, includesBaseElement: false, value: searchValue, setValue: setValue, children: element })) : (element) }));
|
|
45
|
+
searchValue
|
|
46
|
+
}, children: autocomplete ? (jsxRuntime.jsxRuntimeExports.jsx(comboboxProvider.ComboboxProvider, { resetValueOnHide: true, focusLoop: focusLoop, includesBaseElement: false, value: searchValue, setOpen: onOpenChange, setValue: setValue, children: element })) : (element) }));
|
|
47
47
|
};
|
|
48
48
|
|
|
49
49
|
exports.DropdownContext = DropdownContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu-root.cjs","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"sourcesContent":["import {\n ComboboxProvider,\n MenuProvider,\n MenuProviderProps
|
|
1
|
+
{"version":3,"file":"dropdown-menu-root.cjs","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"sourcesContent":["import {\n ComboboxProvider,\n MenuProvider,\n MenuProviderProps\n} from '@ariakit/react';\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ninterface CommonProps {\n autocomplete?: boolean;\n autocompleteMode?: 'auto' | 'manual';\n searchValue?: string;\n}\n\ninterface DropdownContextValue extends CommonProps {\n parent?: CommonProps;\n}\n\ninterface UseDropdownContext extends DropdownContextValue {\n shouldFilter?: boolean;\n parent?: CommonProps & {\n shouldFilter?: boolean;\n };\n}\n\n/**\n Root context to manage the Dropdown control\n @remarks Only for internal usage.\n */\n\nexport const DropdownContext = createContext<DropdownContextValue | undefined>(\n undefined\n);\n\nexport const useDropdownContext = (): UseDropdownContext => {\n const context = useContext(DropdownContext);\n if (!context) return {};\n\n const shouldFilter = !!(\n context?.autocomplete &&\n context?.autocompleteMode === 'auto' &&\n context?.searchValue?.length\n );\n\n const shouldFilterParent = !!(\n context?.parent?.autocomplete &&\n context?.parent?.autocompleteMode === 'auto' &&\n context?.parent?.searchValue?.length\n );\n\n return {\n ...context,\n shouldFilter,\n parent: context?.parent && {\n ...context.parent,\n shouldFilter: shouldFilterParent\n }\n };\n};\n\nexport interface BaseMenuProviderProps\n extends Omit<MenuProviderProps, 'setOpen'> {\n onOpenChange?: MenuProviderProps['setOpen'];\n}\n\nexport interface NormalDropdownMenuRootProps extends BaseMenuProviderProps {\n autocomplete?: false;\n autocompleteMode?: never;\n searchValue?: never;\n onSearch?: never;\n defaultSearchValue?: never;\n}\n\nexport interface AutocompleteDropdownMenuRootProps\n extends BaseMenuProviderProps,\n CommonProps {\n autocomplete: true;\n onSearch?: (value: string) => void;\n defaultSearchValue?: string;\n}\n\nexport type DropdownMenuRootProps =\n | NormalDropdownMenuRootProps\n | AutocompleteDropdownMenuRootProps;\n\nexport const DropdownMenuRoot = ({\n autocomplete,\n autocompleteMode = 'auto',\n searchValue: providedSearchValue,\n onSearch,\n focusLoop = true,\n defaultSearchValue = '',\n onOpenChange,\n ...props\n}: DropdownMenuRootProps) => {\n const [internalSearchValue, setInternalSearchValue] =\n useState(defaultSearchValue);\n const dropdownContext = useDropdownContext();\n\n const searchValue = providedSearchValue ?? internalSearchValue;\n\n const setValue = useCallback(\n (value: string) => {\n setInternalSearchValue(value);\n onSearch?.(value);\n },\n [onSearch]\n );\n\n const element = (\n <MenuProvider focusLoop={focusLoop} setOpen={onOpenChange} {...props} />\n );\n\n return (\n <DropdownContext.Provider\n value={{\n autocomplete,\n parent: dropdownContext,\n autocompleteMode,\n searchValue\n }}\n >\n {autocomplete ? (\n <ComboboxProvider\n resetValueOnHide\n focusLoop={focusLoop}\n includesBaseElement={false}\n value={searchValue}\n setOpen={onOpenChange}\n setValue={setValue}\n >\n {element}\n </ComboboxProvider>\n ) : (\n element\n )}\n </DropdownContext.Provider>\n );\n};\n"],"names":["createContext","useContext","useState","useCallback","_jsx","MenuProvider","ComboboxProvider"],"mappings":";;;;;;;AAwBA;;;AAGG;MAEU,eAAe,GAAGA,mBAAa,CAC1C,SAAS,EACT;AAEK,MAAM,kBAAkB,GAAG,MAAyB;AACzD,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,eAAe,CAAC,CAAC;AAC5C,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,EAAE,CAAC;AAExB,IAAA,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,gBAAgB,KAAK,MAAM;AACpC,QAAA,OAAO,EAAE,WAAW,EAAE,MAAM,CAC7B,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,YAAY;AAC7B,QAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM;AAC5C,QAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CACrC,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,OAAO;QACV,YAAY;AACZ,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI;YACzB,GAAG,OAAO,CAAC,MAAM;AACjB,YAAA,YAAY,EAAE,kBAAkB;AACjC,SAAA;KACF,CAAC;AACJ,EAAE;AA2BK,MAAM,gBAAgB,GAAG,CAAC,EAC/B,YAAY,EACZ,gBAAgB,GAAG,MAAM,EACzB,WAAW,EAAE,mBAAmB,EAChC,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,kBAAkB,GAAG,EAAE,EACvB,YAAY,EACZ,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjDC,cAAQ,CAAC,kBAAkB,CAAC,CAAC;AAC/B,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;AAE7C,IAAA,MAAM,WAAW,GAAG,mBAAmB,IAAI,mBAAmB,CAAC;AAE/D,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAC1B,CAAC,KAAa,KAAI;QAChB,sBAAsB,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;AAEF,IAAA,MAAM,OAAO,IACXC,gCAAC,CAAAC,yBAAY,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,KAAM,KAAK,EAAA,CAAI,CACzE,CAAC;AAEF,IAAA,QACED,gCAAC,CAAA,eAAe,CAAC,QAAQ,EAAA,EACvB,KAAK,EAAE;YACL,YAAY;AACZ,YAAA,MAAM,EAAE,eAAe;YACvB,gBAAgB;YAChB,WAAW;AACZ,SAAA,EAAA,QAAA,EAEA,YAAY,IACXA,gCAAA,CAACE,iCAAgB,EACf,EAAA,gBAAgB,EAChB,IAAA,EAAA,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,EAEjB,QAAA,EAAA,OAAO,GACS,KAEnB,OAAO,CACR,EAAA,CACwB,EAC3B;AACJ;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { MenuProviderProps } from
|
|
1
|
+
import { MenuProviderProps } from '@ariakit/react';
|
|
2
2
|
interface CommonProps {
|
|
3
3
|
autocomplete?: boolean;
|
|
4
|
-
autocompleteMode?:
|
|
4
|
+
autocompleteMode?: 'auto' | 'manual';
|
|
5
5
|
searchValue?: string;
|
|
6
6
|
}
|
|
7
7
|
interface DropdownContextValue extends CommonProps {
|
|
@@ -19,19 +19,22 @@ interface UseDropdownContext extends DropdownContextValue {
|
|
|
19
19
|
*/
|
|
20
20
|
export declare const DropdownContext: import("react").Context<DropdownContextValue | undefined>;
|
|
21
21
|
export declare const useDropdownContext: () => UseDropdownContext;
|
|
22
|
-
export interface
|
|
22
|
+
export interface BaseMenuProviderProps extends Omit<MenuProviderProps, 'setOpen'> {
|
|
23
|
+
onOpenChange?: MenuProviderProps['setOpen'];
|
|
24
|
+
}
|
|
25
|
+
export interface NormalDropdownMenuRootProps extends BaseMenuProviderProps {
|
|
23
26
|
autocomplete?: false;
|
|
24
27
|
autocompleteMode?: never;
|
|
25
28
|
searchValue?: never;
|
|
26
29
|
onSearch?: never;
|
|
27
30
|
defaultSearchValue?: never;
|
|
28
31
|
}
|
|
29
|
-
export interface AutocompleteDropdownMenuRootProps extends
|
|
32
|
+
export interface AutocompleteDropdownMenuRootProps extends BaseMenuProviderProps, CommonProps {
|
|
30
33
|
autocomplete: true;
|
|
31
34
|
onSearch?: (value: string) => void;
|
|
32
35
|
defaultSearchValue?: string;
|
|
33
36
|
}
|
|
34
37
|
export type DropdownMenuRootProps = NormalDropdownMenuRootProps | AutocompleteDropdownMenuRootProps;
|
|
35
|
-
export declare const DropdownMenuRoot: ({ autocomplete, autocompleteMode, searchValue: providedSearchValue, onSearch, focusLoop, defaultSearchValue, ...props }: DropdownMenuRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare const DropdownMenuRoot: ({ autocomplete, autocompleteMode, searchValue: providedSearchValue, onSearch, focusLoop, defaultSearchValue, onOpenChange, ...props }: DropdownMenuRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
39
|
export {};
|
|
37
40
|
//# sourceMappingURL=dropdown-menu-root.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu-root.d.ts","sourceRoot":"","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAGxB,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,oBAAqB,SAAQ,WAAW;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,UAAU,kBAAmB,SAAQ,oBAAoB;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,WAAW,GAAG;QACrB,YAAY,CAAC,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED;;;GAGG;AAEH,eAAO,MAAM,eAAe,2DAE3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,kBAwBrC,CAAC;AAEF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"dropdown-menu-root.d.ts","sourceRoot":"","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAGxB,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,oBAAqB,SAAQ,WAAW;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,UAAU,kBAAmB,SAAQ,oBAAoB;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,WAAW,GAAG;QACrB,YAAY,CAAC,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED;;;GAGG;AAEH,eAAO,MAAM,eAAe,2DAE3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,kBAwBrC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IAC1C,YAAY,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,2BAA4B,SAAQ,qBAAqB;IACxE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,iCACf,SAAQ,qBAAqB,EAC3B,WAAW;IACb,YAAY,EAAE,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,qBAAqB,GAC7B,2BAA2B,GAC3B,iCAAiC,CAAC;AAEtC,eAAO,MAAM,gBAAgB,0IAS1B,qBAAqB,4CA4CvB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
2
|
import { MenuProvider } from '../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/menu/menu-provider.js';
|
|
3
3
|
import { ComboboxProvider } from '../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/combobox/combobox-provider.js';
|
|
4
|
-
import { createContext, useContext, useState } from 'react';
|
|
4
|
+
import { createContext, useContext, useState, useCallback } from 'react';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
Root context to manage the Dropdown control
|
|
@@ -13,35 +13,35 @@ const useDropdownContext = () => {
|
|
|
13
13
|
if (!context)
|
|
14
14
|
return {};
|
|
15
15
|
const shouldFilter = !!(context?.autocomplete &&
|
|
16
|
-
context?.autocompleteMode ===
|
|
16
|
+
context?.autocompleteMode === 'auto' &&
|
|
17
17
|
context?.searchValue?.length);
|
|
18
18
|
const shouldFilterParent = !!(context?.parent?.autocomplete &&
|
|
19
|
-
context?.parent?.autocompleteMode ===
|
|
19
|
+
context?.parent?.autocompleteMode === 'auto' &&
|
|
20
20
|
context?.parent?.searchValue?.length);
|
|
21
21
|
return {
|
|
22
22
|
...context,
|
|
23
23
|
shouldFilter,
|
|
24
24
|
parent: context?.parent && {
|
|
25
25
|
...context.parent,
|
|
26
|
-
shouldFilter: shouldFilterParent
|
|
27
|
-
}
|
|
26
|
+
shouldFilter: shouldFilterParent
|
|
27
|
+
}
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
|
-
const DropdownMenuRoot = ({ autocomplete, autocompleteMode =
|
|
30
|
+
const DropdownMenuRoot = ({ autocomplete, autocompleteMode = 'auto', searchValue: providedSearchValue, onSearch, focusLoop = true, defaultSearchValue = '', onOpenChange, ...props }) => {
|
|
31
31
|
const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
|
|
32
32
|
const dropdownContext = useDropdownContext();
|
|
33
33
|
const searchValue = providedSearchValue ?? internalSearchValue;
|
|
34
|
-
const setValue = (value) => {
|
|
34
|
+
const setValue = useCallback((value) => {
|
|
35
35
|
setInternalSearchValue(value);
|
|
36
36
|
onSearch?.(value);
|
|
37
|
-
};
|
|
38
|
-
const element = jsxRuntimeExports.jsx(MenuProvider, { focusLoop: focusLoop, ...props });
|
|
37
|
+
}, [onSearch]);
|
|
38
|
+
const element = (jsxRuntimeExports.jsx(MenuProvider, { focusLoop: focusLoop, setOpen: onOpenChange, ...props }));
|
|
39
39
|
return (jsxRuntimeExports.jsx(DropdownContext.Provider, { value: {
|
|
40
40
|
autocomplete,
|
|
41
41
|
parent: dropdownContext,
|
|
42
42
|
autocompleteMode,
|
|
43
|
-
searchValue
|
|
44
|
-
}, children: autocomplete ? (jsxRuntimeExports.jsx(ComboboxProvider, { resetValueOnHide: true, focusLoop: focusLoop, includesBaseElement: false, value: searchValue, setValue: setValue, children: element })) : (element) }));
|
|
43
|
+
searchValue
|
|
44
|
+
}, children: autocomplete ? (jsxRuntimeExports.jsx(ComboboxProvider, { resetValueOnHide: true, focusLoop: focusLoop, includesBaseElement: false, value: searchValue, setOpen: onOpenChange, setValue: setValue, children: element })) : (element) }));
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
export { DropdownContext, DropdownMenuRoot, useDropdownContext };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu-root.js","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"sourcesContent":["import {\n ComboboxProvider,\n MenuProvider,\n MenuProviderProps
|
|
1
|
+
{"version":3,"file":"dropdown-menu-root.js","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"sourcesContent":["import {\n ComboboxProvider,\n MenuProvider,\n MenuProviderProps\n} from '@ariakit/react';\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ninterface CommonProps {\n autocomplete?: boolean;\n autocompleteMode?: 'auto' | 'manual';\n searchValue?: string;\n}\n\ninterface DropdownContextValue extends CommonProps {\n parent?: CommonProps;\n}\n\ninterface UseDropdownContext extends DropdownContextValue {\n shouldFilter?: boolean;\n parent?: CommonProps & {\n shouldFilter?: boolean;\n };\n}\n\n/**\n Root context to manage the Dropdown control\n @remarks Only for internal usage.\n */\n\nexport const DropdownContext = createContext<DropdownContextValue | undefined>(\n undefined\n);\n\nexport const useDropdownContext = (): UseDropdownContext => {\n const context = useContext(DropdownContext);\n if (!context) return {};\n\n const shouldFilter = !!(\n context?.autocomplete &&\n context?.autocompleteMode === 'auto' &&\n context?.searchValue?.length\n );\n\n const shouldFilterParent = !!(\n context?.parent?.autocomplete &&\n context?.parent?.autocompleteMode === 'auto' &&\n context?.parent?.searchValue?.length\n );\n\n return {\n ...context,\n shouldFilter,\n parent: context?.parent && {\n ...context.parent,\n shouldFilter: shouldFilterParent\n }\n };\n};\n\nexport interface BaseMenuProviderProps\n extends Omit<MenuProviderProps, 'setOpen'> {\n onOpenChange?: MenuProviderProps['setOpen'];\n}\n\nexport interface NormalDropdownMenuRootProps extends BaseMenuProviderProps {\n autocomplete?: false;\n autocompleteMode?: never;\n searchValue?: never;\n onSearch?: never;\n defaultSearchValue?: never;\n}\n\nexport interface AutocompleteDropdownMenuRootProps\n extends BaseMenuProviderProps,\n CommonProps {\n autocomplete: true;\n onSearch?: (value: string) => void;\n defaultSearchValue?: string;\n}\n\nexport type DropdownMenuRootProps =\n | NormalDropdownMenuRootProps\n | AutocompleteDropdownMenuRootProps;\n\nexport const DropdownMenuRoot = ({\n autocomplete,\n autocompleteMode = 'auto',\n searchValue: providedSearchValue,\n onSearch,\n focusLoop = true,\n defaultSearchValue = '',\n onOpenChange,\n ...props\n}: DropdownMenuRootProps) => {\n const [internalSearchValue, setInternalSearchValue] =\n useState(defaultSearchValue);\n const dropdownContext = useDropdownContext();\n\n const searchValue = providedSearchValue ?? internalSearchValue;\n\n const setValue = useCallback(\n (value: string) => {\n setInternalSearchValue(value);\n onSearch?.(value);\n },\n [onSearch]\n );\n\n const element = (\n <MenuProvider focusLoop={focusLoop} setOpen={onOpenChange} {...props} />\n );\n\n return (\n <DropdownContext.Provider\n value={{\n autocomplete,\n parent: dropdownContext,\n autocompleteMode,\n searchValue\n }}\n >\n {autocomplete ? (\n <ComboboxProvider\n resetValueOnHide\n focusLoop={focusLoop}\n includesBaseElement={false}\n value={searchValue}\n setOpen={onOpenChange}\n setValue={setValue}\n >\n {element}\n </ComboboxProvider>\n ) : (\n element\n )}\n </DropdownContext.Provider>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAwBA;;;AAGG;MAEU,eAAe,GAAG,aAAa,CAC1C,SAAS,EACT;AAEK,MAAM,kBAAkB,GAAG,MAAyB;AACzD,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AAC5C,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,EAAE,CAAC;AAExB,IAAA,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,gBAAgB,KAAK,MAAM;AACpC,QAAA,OAAO,EAAE,WAAW,EAAE,MAAM,CAC7B,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,YAAY;AAC7B,QAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM;AAC5C,QAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CACrC,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,OAAO;QACV,YAAY;AACZ,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI;YACzB,GAAG,OAAO,CAAC,MAAM;AACjB,YAAA,YAAY,EAAE,kBAAkB;AACjC,SAAA;KACF,CAAC;AACJ,EAAE;AA2BK,MAAM,gBAAgB,GAAG,CAAC,EAC/B,YAAY,EACZ,gBAAgB,GAAG,MAAM,EACzB,WAAW,EAAE,mBAAmB,EAChC,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,kBAAkB,GAAG,EAAE,EACvB,YAAY,EACZ,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjD,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAC/B,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;AAE7C,IAAA,MAAM,WAAW,GAAG,mBAAmB,IAAI,mBAAmB,CAAC;AAE/D,IAAA,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAa,KAAI;QAChB,sBAAsB,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;AAEF,IAAA,MAAM,OAAO,IACXA,qBAAC,CAAA,YAAY,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,KAAM,KAAK,EAAA,CAAI,CACzE,CAAC;AAEF,IAAA,QACEA,qBAAC,CAAA,eAAe,CAAC,QAAQ,EAAA,EACvB,KAAK,EAAE;YACL,YAAY;AACZ,YAAA,MAAM,EAAE,eAAe;YACvB,gBAAgB;YAChB,WAAW;AACZ,SAAA,EAAA,QAAA,EAEA,YAAY,IACXA,qBAAA,CAAC,gBAAgB,EACf,EAAA,gBAAgB,EAChB,IAAA,EAAA,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,EAEjB,QAAA,EAAA,OAAO,GACS,KAEnB,OAAO,CACR,EAAA,CACwB,EAC3B;AACJ;;;;"}
|
|
@@ -9,8 +9,12 @@ var dropdownMenuRoot = require('./dropdown-menu-root.cjs');
|
|
|
9
9
|
var utils = require('./utils.cjs');
|
|
10
10
|
var index = require('../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.cjs');
|
|
11
11
|
|
|
12
|
-
const DropdownMenuTrigger = React.forwardRef(({ children, asChild, ...props }, ref) => {
|
|
13
|
-
return (jsxRuntime.jsxRuntimeExports.jsx(menuButton.MenuButton, { ref: ref, render: asChild ? jsxRuntime.jsxRuntimeExports.jsx(index.Root, {}) : undefined,
|
|
12
|
+
const DropdownMenuTrigger = React.forwardRef(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {
|
|
13
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(menuButton.MenuButton, { ref: ref, render: asChild ? jsxRuntime.jsxRuntimeExports.jsx(index.Root, {}) : undefined, onClick: (e) => {
|
|
14
|
+
if (stopPropagation)
|
|
15
|
+
e.stopPropagation();
|
|
16
|
+
onClick?.(e);
|
|
17
|
+
}, ...props, children: children }));
|
|
14
18
|
});
|
|
15
19
|
/**
|
|
16
20
|
* `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu-trigger.cjs","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps
|
|
1
|
+
{"version":3,"file":"dropdown-menu-trigger.cjs","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { PointerEvent, forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps extends WithAsChild<MenuButtonProps> {\n stopPropagation?: boolean;\n}\n\nexport const DropdownMenuTrigger = forwardRef<\n HTMLButtonElement,\n DropdownMenuTriggerProps\n>(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {\n return (\n <MenuButton\n ref={ref}\n render={asChild ? <Slot.Root /> : undefined}\n onClick={(\n e: PointerEvent<HTMLButtonElement> & PointerEvent<HTMLDivElement>\n ) => {\n if (stopPropagation) e.stopPropagation();\n onClick?.(e);\n }}\n {...props}\n >\n {children}\n </MenuButton>\n );\n});\n\nexport interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {}\n\n/**\n * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.\n */\nexport const DropdownMenuTriggerItem = forwardRef<\n HTMLButtonElement,\n DropdownMenuTriggerItemProps\n>(\n (\n { children, value, trailingIcon = <TriangleRightIcon />, ...props },\n ref\n ) => {\n const { parent } = useDropdownContext();\n\n if (\n parent?.shouldFilter &&\n !getMatch(value, children, parent?.searchValue)\n ) {\n return null;\n }\n\n return (\n <MenuButton\n ref={ref}\n render={\n <DropdownMenuItem\n value={value}\n trailingIcon={trailingIcon}\n {...props}\n forceRender={parent?.autocomplete ? 'combobox' : 'auto'}\n />\n }\n >\n {children}\n </MenuButton>\n );\n }\n);\n"],"names":["forwardRef","_jsx","MenuButton","Slot.Root","TriangleRightIcon","useDropdownContext","getMatch","DropdownMenuItem"],"mappings":";;;;;;;;;;;AAaa,MAAA,mBAAmB,GAAGA,gBAAU,CAG3C,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC1E,IAAA,QACEC,gCAAA,CAACC,qBAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,OAAO,GAAGD,gCAAC,CAAAE,UAAS,EAAG,EAAA,CAAA,GAAG,SAAS,EAC3C,OAAO,EAAE,CACP,CAAiE,KAC/D;AACF,YAAA,IAAI,eAAe;gBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AACzC,YAAA,OAAO,GAAG,CAAC,CAAC,CAAC;AACf,SAAC,KACG,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACE,EACb;AACJ,CAAC,EAAE;AAIH;;AAEG;AACU,MAAA,uBAAuB,GAAGH,gBAAU,CAI/C,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,GAAGC,gCAAA,CAACG,4BAAiB,EAAA,EAAA,CAAG,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,KACD;AACF,IAAA,MAAM,EAAE,MAAM,EAAE,GAAGC,mCAAkB,EAAE,CAAC;IAExC,IACE,MAAM,EAAE,YAAY;QACpB,CAACC,cAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAC/C;AACA,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEL,gCAAC,CAAAC,qBAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EACJD,gCAAA,CAACM,iCAAgB,EACf,EAAA,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EACtB,GAAA,KAAK,EACT,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,EAAA,CACvD,YAGH,QAAQ,EAAA,CACE,EACb;AACJ,CAAC;;;;;"}
|
|
@@ -2,6 +2,7 @@ import { MenuButtonProps } from '@ariakit/react';
|
|
|
2
2
|
import { DropdownMenuItemProps } from './dropdown-menu-item';
|
|
3
3
|
import { WithAsChild } from './types';
|
|
4
4
|
export interface DropdownMenuTriggerProps extends WithAsChild<MenuButtonProps> {
|
|
5
|
+
stopPropagation?: boolean;
|
|
5
6
|
}
|
|
6
7
|
export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Omit<DropdownMenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
7
8
|
export interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu-trigger.d.ts","sourceRoot":"","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"dropdown-menu-trigger.d.ts","sourceRoot":"","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,MAAM,WAAW,wBAAyB,SAAQ,WAAW,CAAC,eAAe,CAAC;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,qIAmB9B,CAAC;AAEH,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB;CAAG;AAE9E;;GAEG;AACH,eAAO,MAAM,uBAAuB,yIAiCnC,CAAC"}
|
|
@@ -7,8 +7,12 @@ import { useDropdownContext } from './dropdown-menu-root.js';
|
|
|
7
7
|
import { getMatch } from './utils.js';
|
|
8
8
|
import { Root as Slot } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
|
|
9
9
|
|
|
10
|
-
const DropdownMenuTrigger = forwardRef(({ children, asChild, ...props }, ref) => {
|
|
11
|
-
return (jsxRuntimeExports.jsx(MenuButton, { ref: ref, render: asChild ? jsxRuntimeExports.jsx(Slot, {}) : undefined,
|
|
10
|
+
const DropdownMenuTrigger = forwardRef(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {
|
|
11
|
+
return (jsxRuntimeExports.jsx(MenuButton, { ref: ref, render: asChild ? jsxRuntimeExports.jsx(Slot, {}) : undefined, onClick: (e) => {
|
|
12
|
+
if (stopPropagation)
|
|
13
|
+
e.stopPropagation();
|
|
14
|
+
onClick?.(e);
|
|
15
|
+
}, ...props, children: children }));
|
|
12
16
|
});
|
|
13
17
|
/**
|
|
14
18
|
* `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu-trigger.js","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps
|
|
1
|
+
{"version":3,"file":"dropdown-menu-trigger.js","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { PointerEvent, forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps extends WithAsChild<MenuButtonProps> {\n stopPropagation?: boolean;\n}\n\nexport const DropdownMenuTrigger = forwardRef<\n HTMLButtonElement,\n DropdownMenuTriggerProps\n>(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {\n return (\n <MenuButton\n ref={ref}\n render={asChild ? <Slot.Root /> : undefined}\n onClick={(\n e: PointerEvent<HTMLButtonElement> & PointerEvent<HTMLDivElement>\n ) => {\n if (stopPropagation) e.stopPropagation();\n onClick?.(e);\n }}\n {...props}\n >\n {children}\n </MenuButton>\n );\n});\n\nexport interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {}\n\n/**\n * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.\n */\nexport const DropdownMenuTriggerItem = forwardRef<\n HTMLButtonElement,\n DropdownMenuTriggerItemProps\n>(\n (\n { children, value, trailingIcon = <TriangleRightIcon />, ...props },\n ref\n ) => {\n const { parent } = useDropdownContext();\n\n if (\n parent?.shouldFilter &&\n !getMatch(value, children, parent?.searchValue)\n ) {\n return null;\n }\n\n return (\n <MenuButton\n ref={ref}\n render={\n <DropdownMenuItem\n value={value}\n trailingIcon={trailingIcon}\n {...props}\n forceRender={parent?.autocomplete ? 'combobox' : 'auto'}\n />\n }\n >\n {children}\n </MenuButton>\n );\n }\n);\n"],"names":["_jsx","Slot.Root","TriangleRightIcon"],"mappings":";;;;;;;;;AAaa,MAAA,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC1E,IAAA,QACEA,qBAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,OAAO,GAAGA,qBAAC,CAAAC,IAAS,EAAG,EAAA,CAAA,GAAG,SAAS,EAC3C,OAAO,EAAE,CACP,CAAiE,KAC/D;AACF,YAAA,IAAI,eAAe;gBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AACzC,YAAA,OAAO,GAAG,CAAC,CAAC,CAAC;AACf,SAAC,KACG,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACE,EACb;AACJ,CAAC,EAAE;AAIH;;AAEG;AACU,MAAA,uBAAuB,GAAG,UAAU,CAI/C,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,GAAGD,qBAAA,CAACE,gBAAiB,EAAA,EAAA,CAAG,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,KACD;AACF,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAExC,IACE,MAAM,EAAE,YAAY;QACpB,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAC/C;AACA,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEF,qBAAC,CAAA,UAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EACJA,qBAAA,CAAC,gBAAgB,EACf,EAAA,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EACtB,GAAA,KAAK,EACT,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,EAAA,CACvD,YAGH,QAAQ,EAAA,CACE,EACb;AACJ,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const DropdownMenu: (({ autocomplete, autocompleteMode, searchValue: providedSearchValue, onSearch, focusLoop, defaultSearchValue, ...props }: import("./dropdown-menu-root").DropdownMenuRootProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
1
|
+
export declare const DropdownMenu: (({ autocomplete, autocompleteMode, searchValue: providedSearchValue, onSearch, focusLoop, defaultSearchValue, onOpenChange, ...props }: import("./dropdown-menu-root").DropdownMenuRootProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
2
2
|
Trigger: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-trigger").DropdownMenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
3
3
|
/**
|
|
4
4
|
* `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var select = require('../select/select.cjs');
|
|
6
|
+
var text = require('../text/text.cjs');
|
|
7
|
+
var filterChip_module = require('./filter-chip.module.css.cjs');
|
|
8
|
+
|
|
9
|
+
const Operation = ({ label, value, onChange, operations }) => {
|
|
10
|
+
const operationValue = value?.value ?? '';
|
|
11
|
+
const handleValueChange = React.useCallback((newValue) => {
|
|
12
|
+
const operation = operations.find(o => o.value === newValue);
|
|
13
|
+
if (operation)
|
|
14
|
+
onChange(operation);
|
|
15
|
+
}, [operations, onChange]);
|
|
16
|
+
if (operations.length === 1)
|
|
17
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { variant: 'secondary', className: filterChip_module.default.selectValue, children: operations[0].label }));
|
|
18
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: operationValue, onValueChange: handleValueChange, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: 'text', className: filterChip_module.default.selectValue, "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Select operation', className: filterChip_module.default.operationText }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": 'filter', children: operations.map(operation => {
|
|
19
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: operation.value, "aria-label": `Filter ${label} ${operation.label}`, children: operation.label }, operation.value));
|
|
20
|
+
}) })] }));
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
exports.Operation = Operation;
|
|
24
|
+
//# sourceMappingURL=filter-chip-operation.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-chip-operation.cjs","sources":["../../../components/filter-chip/filter-chip-operation.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { FilterOperation, FilterOperator } from '~/types/filters';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\n\ninterface OperationProps {\n label: string;\n value?: FilterOperation;\n onChange: (operation: FilterOperation) => void;\n operations: FilterOperator<string>[];\n}\n\nexport const Operation = ({\n label,\n value,\n onChange,\n operations\n}: OperationProps) => {\n const operationValue = value?.value ?? '';\n\n const handleValueChange = useCallback(\n (newValue: string) => {\n const operation = operations.find(o => o.value === newValue);\n if (operation) onChange(operation);\n },\n [operations, onChange]\n );\n\n if (operations.length === 1)\n return (\n <Text variant='secondary' className={styles.selectValue}>\n {operations[0].label}\n </Text>\n );\n\n return (\n <Select\n value={operationValue}\n onValueChange={handleValueChange}\n aria-labelledby={`${label}-label`}\n >\n <Select.Trigger\n variant='text'\n className={styles.selectValue}\n aria-label={`${label} filter operation`}\n >\n <Select.Value\n placeholder='Select operation'\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant='filter'>\n {operations.map(operation => {\n return (\n <Select.Item\n key={operation.value}\n value={operation.value}\n aria-label={`Filter ${label} ${operation.label}`}\n >\n {operation.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n"],"names":["useCallback","_jsx","Text","styles","_jsxs","Select"],"mappings":";;;;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACK,KAAI;AACnB,IAAA,MAAM,cAAc,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC;AAE1C,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CACnC,CAAC,QAAgB,KAAI;AACnB,QAAA,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC;AAC7D,QAAA,IAAI,SAAS;YAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;AACrC,KAAC,EACD,CAAC,UAAU,EAAE,QAAQ,CAAC,CACvB,CAAC;AAEF,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QACzB,QACEC,iCAACC,SAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,SAAS,EAAEC,yBAAM,CAAC,WAAW,EAAA,QAAA,EACpD,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EACf,CAAA,EACP;AAEJ,IAAA,QACEC,iCAAA,CAACC,aAAM,EAAA,EACL,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,iBAAiB,EAAA,iBAAA,EACf,GAAG,KAAK,CAAA,MAAA,CAAQ,EAEjC,QAAA,EAAA,CAAAJ,gCAAA,CAACI,aAAM,CAAC,OAAO,EAAA,EACb,OAAO,EAAC,MAAM,EACd,SAAS,EAAEF,yBAAM,CAAC,WAAW,EACjB,YAAA,EAAA,CAAA,EAAG,KAAK,CAAA,iBAAA,CAAmB,EAEvC,QAAA,EAAAF,gCAAA,CAACI,aAAM,CAAC,KAAK,EAAA,EACX,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAEF,yBAAM,CAAC,aAAa,EAC/B,CAAA,EAAA,CACa,EACjBF,gCAAA,CAACI,aAAM,CAAC,OAAO,EAAc,EAAA,cAAA,EAAA,QAAQ,EAClC,QAAA,EAAA,UAAU,CAAC,GAAG,CAAC,SAAS,IAAG;AAC1B,oBAAA,QACEJ,gCAAA,CAACI,aAAM,CAAC,IAAI,EAAA,EAEV,KAAK,EAAE,SAAS,CAAC,KAAK,EAAA,YAAA,EACV,CAAU,OAAA,EAAA,KAAK,CAAI,CAAA,EAAA,SAAS,CAAC,KAAK,CAAE,CAAA,EAAA,QAAA,EAE/C,SAAS,CAAC,KAAK,EAAA,EAJX,SAAS,CAAC,KAAK,CAKR,EACd;AACJ,iBAAC,CAAC,EAAA,CACa,CACV,EAAA,CAAA,EACT;AACJ;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FilterOperation, FilterOperator } from '~/types/filters';
|
|
2
|
+
interface OperationProps {
|
|
3
|
+
label: string;
|
|
4
|
+
value?: FilterOperation;
|
|
5
|
+
onChange: (operation: FilterOperation) => void;
|
|
6
|
+
operations: FilterOperator<string>[];
|
|
7
|
+
}
|
|
8
|
+
export declare const Operation: ({ label, value, onChange, operations }: OperationProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=filter-chip-operation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-chip-operation.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip-operation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKlE,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,2CAKnB,cAAc,4CAiDhB,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { Select } from '../select/select.js';
|
|
4
|
+
import { Text } from '../text/text.js';
|
|
5
|
+
import styles from './filter-chip.module.css.js';
|
|
6
|
+
|
|
7
|
+
const Operation = ({ label, value, onChange, operations }) => {
|
|
8
|
+
const operationValue = value?.value ?? '';
|
|
9
|
+
const handleValueChange = useCallback((newValue) => {
|
|
10
|
+
const operation = operations.find(o => o.value === newValue);
|
|
11
|
+
if (operation)
|
|
12
|
+
onChange(operation);
|
|
13
|
+
}, [operations, onChange]);
|
|
14
|
+
if (operations.length === 1)
|
|
15
|
+
return (jsxRuntimeExports.jsx(Text, { variant: 'secondary', className: styles.selectValue, children: operations[0].label }));
|
|
16
|
+
return (jsxRuntimeExports.jsxs(Select, { value: operationValue, onValueChange: handleValueChange, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: 'text', className: styles.selectValue, "aria-label": `${label} filter operation`, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: 'Select operation', className: styles.operationText }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": 'filter', children: operations.map(operation => {
|
|
17
|
+
return (jsxRuntimeExports.jsx(Select.Item, { value: operation.value, "aria-label": `Filter ${label} ${operation.label}`, children: operation.label }, operation.value));
|
|
18
|
+
}) })] }));
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { Operation };
|
|
22
|
+
//# sourceMappingURL=filter-chip-operation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-chip-operation.js","sources":["../../../components/filter-chip/filter-chip-operation.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { FilterOperation, FilterOperator } from '~/types/filters';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\n\ninterface OperationProps {\n label: string;\n value?: FilterOperation;\n onChange: (operation: FilterOperation) => void;\n operations: FilterOperator<string>[];\n}\n\nexport const Operation = ({\n label,\n value,\n onChange,\n operations\n}: OperationProps) => {\n const operationValue = value?.value ?? '';\n\n const handleValueChange = useCallback(\n (newValue: string) => {\n const operation = operations.find(o => o.value === newValue);\n if (operation) onChange(operation);\n },\n [operations, onChange]\n );\n\n if (operations.length === 1)\n return (\n <Text variant='secondary' className={styles.selectValue}>\n {operations[0].label}\n </Text>\n );\n\n return (\n <Select\n value={operationValue}\n onValueChange={handleValueChange}\n aria-labelledby={`${label}-label`}\n >\n <Select.Trigger\n variant='text'\n className={styles.selectValue}\n aria-label={`${label} filter operation`}\n >\n <Select.Value\n placeholder='Select operation'\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant='filter'>\n {operations.map(operation => {\n return (\n <Select.Item\n key={operation.value}\n value={operation.value}\n aria-label={`Filter ${label} ${operation.label}`}\n >\n {operation.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACK,KAAI;AACnB,IAAA,MAAM,cAAc,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC;AAE1C,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,KAAI;AACnB,QAAA,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC;AAC7D,QAAA,IAAI,SAAS;YAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;AACrC,KAAC,EACD,CAAC,UAAU,EAAE,QAAQ,CAAC,CACvB,CAAC;AAEF,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QACzB,QACEA,sBAAC,IAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,QAAA,EACpD,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EACf,CAAA,EACP;AAEJ,IAAA,QACEC,sBAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,iBAAiB,EAAA,iBAAA,EACf,GAAG,KAAK,CAAA,MAAA,CAAQ,EAEjC,QAAA,EAAA,CAAAD,qBAAA,CAAC,MAAM,CAAC,OAAO,EAAA,EACb,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,WAAW,EACjB,YAAA,EAAA,CAAA,EAAG,KAAK,CAAA,iBAAA,CAAmB,EAEvC,QAAA,EAAAA,qBAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,CAAA,EAAA,CACa,EACjBA,qBAAA,CAAC,MAAM,CAAC,OAAO,EAAc,EAAA,cAAA,EAAA,QAAQ,EAClC,QAAA,EAAA,UAAU,CAAC,GAAG,CAAC,SAAS,IAAG;AAC1B,oBAAA,QACEA,qBAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EAEV,KAAK,EAAE,SAAS,CAAC,KAAK,EAAA,YAAA,EACV,CAAU,OAAA,EAAA,KAAK,CAAI,CAAA,EAAA,SAAS,CAAC,KAAK,CAAE,CAAA,EAAA,QAAA,EAE/C,SAAS,CAAC,KAAK,EAAA,EAJX,SAAS,CAAC,KAAK,CAKR,EACd;AACJ,iBAAC,CAAC,EAAA,CACa,CACV,EAAA,CAAA,EACT;AACJ;;;;"}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
4
|
var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var box = require('../box/box.cjs');
|
|
7
5
|
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var filters = require('../../types/filters.cjs');
|
|
8
8
|
var flex = require('../flex/flex.cjs');
|
|
9
9
|
require('../icon-button/icon-button.cjs');
|
|
10
10
|
var select = require('../select/select.cjs');
|
|
@@ -16,61 +16,49 @@ require('../popover/popover.cjs');
|
|
|
16
16
|
require('../input-field/input-field.cjs');
|
|
17
17
|
var text = require('../text/text.cjs');
|
|
18
18
|
var textfield = require('../textfield/textfield.cjs');
|
|
19
|
+
var filterChipOperation = require('./filter-chip-operation.cjs');
|
|
19
20
|
var filterChip_module = require('./filter-chip.module.css.cjs');
|
|
20
|
-
var filters = require('../../types/filters.cjs');
|
|
21
21
|
|
|
22
22
|
const chip = index.cva(filterChip_module.default.chip, {
|
|
23
23
|
variants: {
|
|
24
24
|
variant: {
|
|
25
|
-
default: filterChip_module.default[
|
|
26
|
-
text: null
|
|
27
|
-
}
|
|
25
|
+
default: filterChip_module.default['chip-default'],
|
|
26
|
+
text: null
|
|
27
|
+
}
|
|
28
28
|
},
|
|
29
29
|
defaultVariants: {
|
|
30
|
-
variant:
|
|
31
|
-
}
|
|
30
|
+
variant: 'default'
|
|
31
|
+
}
|
|
32
32
|
});
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
React.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const [filterValue, setFilterValue] = React.useState(value || "");
|
|
50
|
-
const showOnRemove = typeof onRemove === "function";
|
|
51
|
-
React.useEffect(() => {
|
|
52
|
-
if (onOperationChange && operation?.value) {
|
|
53
|
-
onOperationChange(operation?.value);
|
|
54
|
-
}
|
|
55
|
-
}, [operation?.value]);
|
|
56
|
-
React.useEffect(() => {
|
|
57
|
-
if (onValueChange) {
|
|
58
|
-
onValueChange(filterValue);
|
|
59
|
-
}
|
|
60
|
-
}, [filterValue]);
|
|
33
|
+
const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }) => {
|
|
34
|
+
const computedOperations = operations?.length
|
|
35
|
+
? operations
|
|
36
|
+
: filters.filterOperators[columnType];
|
|
37
|
+
const [operation, setOperation] = React.useState(computedOperations?.[0]);
|
|
38
|
+
const [filterValue, setFilterValue] = React.useState(value || '');
|
|
39
|
+
const showOnRemove = typeof onRemove === 'function';
|
|
40
|
+
const handleOperationChange = React.useCallback((operation) => {
|
|
41
|
+
setOperation(operation);
|
|
42
|
+
if (operation?.value)
|
|
43
|
+
onOperationChange?.(operation.value);
|
|
44
|
+
}, [onOperationChange]);
|
|
45
|
+
const handleFilterValueChange = React.useCallback((value) => {
|
|
46
|
+
setFilterValue(value);
|
|
47
|
+
onValueChange?.(value, operation?.value ?? '');
|
|
48
|
+
}, [operation, onValueChange]);
|
|
61
49
|
const renderValueInput = () => {
|
|
62
50
|
switch (columnType) {
|
|
63
51
|
case filters.FilterType.select:
|
|
64
|
-
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange:
|
|
52
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: handleFilterValueChange, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: 'text', className: index.cx(filterChip_module.default.selectValue, filterChip_module.default.selectColumn), children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Select value' }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": 'filter', children: options.map(opt => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
|
|
65
53
|
case filters.FilterType.date:
|
|
66
|
-
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date =>
|
|
54
|
+
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => handleFilterValueChange(date), showCalendarIcon: false, inputFieldProps: { className: filterChip_module.default.dateField } }) }));
|
|
67
55
|
default:
|
|
68
|
-
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: e =>
|
|
56
|
+
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: e => handleFilterValueChange(e.target.value) }) }));
|
|
69
57
|
}
|
|
70
58
|
};
|
|
71
|
-
return (jsxRuntime.jsxRuntimeExports.
|
|
59
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', ref: ref, className: chip({ variant, className }), role: 'group', "aria-label": `Filter by ${label}`, ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', gap: 2, className: filterChip_module.default['chip-label'], children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": 'true', children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: 'normal', children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(filterChipOperation.Operation, { operations: computedOperations, label: label, value: operation, onChange: handleOperationChange }), renderValueInput(), showOnRemove && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }));
|
|
72
60
|
};
|
|
73
|
-
FilterChip.displayName =
|
|
61
|
+
FilterChip.displayName = 'FilterChip';
|
|
74
62
|
|
|
75
63
|
exports.FilterChip = FilterChip;
|
|
76
64
|
//# sourceMappingURL=filter-chip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement, ReactNode, useEffect, useState } from \"react\";\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n FilterOperation,\n filterOperators,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n} from \"~/types/filters\";\nimport { cva, cx, VariantProps } from \"class-variance-authority\";\n\nconst chip = cva(styles.chip, {\n variants: {\n variant: {\n default: styles[\"chip-default\"],\n text: null,\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n label: string;\n columnType: FilterTypes;\n onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n label,\n columnType = FilterType.string,\n onOperationSelect,\n}: OperationProps) => {\n const filterOptions = filterOperators[columnType] || [];\n // FilterOperatorTypes gives error as Select returns string\n const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n useEffect(() => {\n const selectedOption = filterOptions.find(o => o.value === value);\n if (selectedOption) {\n onOperationSelect(selectedOption);\n }\n }, [value]);\n\n return (\n <Select\n value={value}\n onValueChange={setValue}\n aria-labelledby={`${label}-label`}>\n <Select.Trigger\n variant=\"text\"\n className={styles.selectValue}\n aria-label={`${label} filter operation`}>\n <Select.Value\n placeholder=\"Select operation\"\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {filterOptions.map(opt => {\n return (\n <Select.Item\n key={opt.value}\n value={opt.value}\n aria-label={`Filter ${label} ${opt.label}`}>\n {opt.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n\nexport const FilterChip = ({\n label,\n value,\n onRemove,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n variant,\n ...props\n}: FilterChipProps) => {\n const [operation, setOperation] = useState<FilterOperation>();\n const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n const showOnRemove = typeof onRemove === \"function\";\n\n useEffect(() => {\n if (onOperationChange && operation?.value) {\n onOperationChange(operation?.value);\n }\n }, [operation?.value]);\n\n useEffect(() => {\n if (onValueChange) {\n onValueChange(filterValue);\n }\n }, [filterValue]);\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n <Select.Trigger\n variant=\"text\"\n className={cx(styles.selectValue, styles.selectColumn)}>\n <Select.Value placeholder=\"Select value\" />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {options.map(opt => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}>\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={date => setFilterValue(date)}\n showCalendarIcon={false}\n inputFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={e => setFilterValue(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Box\n ref={ref}\n className={chip({ variant, className })}\n role=\"group\"\n aria-label={`Filter by ${label}`}\n {...props}>\n <Flex align=\"center\">\n <Flex align=\"center\" gap={2}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight=\"normal\">\n {label}\n </Text>\n </Flex>\n <Operation\n columnType={columnType}\n label={label}\n onOperationSelect={setOperation}\n />\n {renderValueInput()}\n {showOnRemove && (\n <button\n className={styles.removeIconContainer}\n aria-label={`Remove ${label} filter`}\n onClick={onRemove}>\n <Cross1Icon className={styles.removeIcon} />\n </button>\n )}\n </Flex>\n </Box>\n );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["cva","styles","FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","cx","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n FilterOperation,\n FilterOperator,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport { TextField } from '../textfield';\nimport { Operation } from './filter-chip-operation';\nimport styles from './filter-chip.module.css';\n\nconst chip = cva(styles.chip, {\n variants: {\n variant: {\n default: styles['chip-default'],\n text: null\n }\n },\n defaultVariants: {\n variant: 'default'\n }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any, operation: string) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n label,\n value,\n onRemove,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n variant,\n operations,\n ...props\n}: FilterChipProps) => {\n const computedOperations = operations?.length\n ? operations\n : filterOperators[columnType];\n\n const [operation, setOperation] = useState<FilterOperation | undefined>(\n computedOperations?.[0]\n );\n const [filterValue, setFilterValue] = useState<any>(value || '');\n\n const showOnRemove = typeof onRemove === 'function';\n\n const handleOperationChange = useCallback(\n (operation: FilterOperation) => {\n setOperation(operation);\n if (operation?.value) onOperationChange?.(operation.value);\n },\n [onOperationChange]\n );\n\n const handleFilterValueChange = useCallback(\n (value: any) => {\n setFilterValue(value);\n onValueChange?.(value, operation?.value ?? '');\n },\n [operation, onValueChange]\n );\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select\n value={filterValue.toString()}\n onValueChange={handleFilterValueChange}\n >\n <Select.Trigger\n variant='text'\n className={cx(styles.selectValue, styles.selectColumn)}\n >\n <Select.Value placeholder='Select value' />\n </Select.Trigger>\n <Select.Content data-variant='filter'>\n {options.map(opt => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={date => handleFilterValueChange(date)}\n showCalendarIcon={false}\n inputFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={e => handleFilterValueChange(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Flex\n align='center'\n ref={ref}\n className={chip({ variant, className })}\n role='group'\n aria-label={`Filter by ${label}`}\n {...props}\n >\n <Flex align='center' gap={2} className={styles['chip-label']}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden='true'>\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight='normal'>\n {label}\n </Text>\n </Flex>\n <Operation\n operations={computedOperations}\n label={label}\n value={operation}\n onChange={handleOperationChange}\n />\n {renderValueInput()}\n {showOnRemove && (\n <button\n className={styles.removeIconContainer}\n aria-label={`Remove ${label} filter`}\n onClick={onRemove}\n >\n <Cross1Icon className={styles.removeIcon} />\n </button>\n )}\n </Flex>\n );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":["cva","styles","FilterType","filterOperators","useState","useCallback","_jsxs","Select","_jsx","cx","DatePicker","TextField","Flex","Text","Operation","Cross1Icon"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { ReactElement, ReactNode } from 'react';
|
|
3
|
+
import { FilterOperator, FilterSelectOption, FilterTypes } from '~/types/filters';
|
|
4
4
|
declare const chip: (props?: ({
|
|
5
5
|
variant?: "text" | "default" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -13,12 +13,13 @@ export interface FilterChipProps extends VariantProps<typeof chip> {
|
|
|
13
13
|
children?: ReactNode;
|
|
14
14
|
columnType?: FilterTypes;
|
|
15
15
|
options?: FilterSelectOption[];
|
|
16
|
-
onValueChange?: (value: any) => void;
|
|
16
|
+
onValueChange?: (value: any, operation: string) => void;
|
|
17
17
|
onOperationChange?: (operation: string) => void;
|
|
18
18
|
leadingIcon?: ReactElement;
|
|
19
|
+
operations?: FilterOperator<string>[];
|
|
19
20
|
}
|
|
20
21
|
export declare const FilterChip: {
|
|
21
|
-
({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
22
23
|
displayName: string;
|
|
23
24
|
};
|
|
24
25
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACvE,OAAO,EAEL,cAAc,EACd,kBAAkB,EAElB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AASzB,QAAA,MAAM,IAAI;;8EAUR,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;CACvC;AAED,eAAO,MAAM,UAAU;oJAcpB,eAAe;;CAmHjB,CAAC"}
|