thread-ui 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -2
- package/dist/components/data-display/data-display-controls/data-display-controls.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.js +48 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.js.map +1 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.d.ts +19 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.js +2 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.js.map +1 -0
- package/dist/components/data-display/data-display-controls/index.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/index.js +2 -0
- package/dist/components/data-display/data-display-controls/index.js.map +1 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.js +41 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.d.ts +91 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.js +2 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.js.map +1 -0
- package/dist/components/data-display/filter-controls/index.d.ts +4 -0
- package/dist/components/data-display/filter-controls/index.js +4 -0
- package/dist/components/data-display/filter-controls/index.js.map +1 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.d.ts +23 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.js +98 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.d.ts +10 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.js +52 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.d.ts +13 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js +77 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js.map +1 -0
- package/dist/components/data-display/index.d.ts +3 -0
- package/dist/components/data-display/index.js +4 -0
- package/dist/components/data-display/index.js.map +1 -0
- package/dist/components/data-display/sort-controls/index.d.ts +3 -0
- package/dist/components/data-display/sort-controls/index.js +3 -0
- package/dist/components/data-display/sort-controls/index.js.map +1 -0
- package/dist/components/data-display/sort-controls/sort-controls.d.ts +11 -0
- package/dist/components/data-display/sort-controls/sort-controls.js +58 -0
- package/dist/components/data-display/sort-controls/sort-controls.js.map +1 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.d.ts +68 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.js +2 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.js.map +1 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.d.ts +23 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.js +94 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.js.map +1 -0
- package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.d.ts +1 -1
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js +41 -0
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js.map +1 -0
- package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.types.d.ts +7 -9
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.types.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.d.ts +8 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js +46 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.d.ts +26 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.js +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/index.js +3 -0
- package/dist/components/form-elements/dropdowns/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.js +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.d.ts +15 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js +55 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.d.ts +25 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js.map +1 -0
- package/dist/components/form-elements/file-upload/components/file-upload-content.js +12 -12
- package/dist/components/form-elements/file-upload/components/file-upload-content.js.map +1 -1
- package/dist/components/form-elements/file-upload/components/file-upload-preview.js +35 -35
- package/dist/components/form-elements/file-upload/components/file-upload-preview.js.map +1 -1
- package/dist/components/form-elements/file-upload/components/item-previews.js +22 -22
- package/dist/components/form-elements/file-upload/components/item-previews.js.map +1 -1
- package/dist/components/form-elements/form-label/form-label.d.ts +1 -1
- package/dist/components/form-elements/form-label/form-label.js +35 -9
- package/dist/components/form-elements/form-label/form-label.js.map +1 -1
- package/dist/components/form-elements/form-label/form-label.types.d.ts +3 -0
- package/dist/components/form-elements/index.d.ts +2 -2
- package/dist/components/form-elements/index.js +2 -2
- package/dist/components/form-elements/index.js.map +1 -1
- package/dist/components/form-elements/input-wrapper.js +8 -8
- package/dist/components/form-elements/input-wrapper.js.map +1 -1
- package/dist/components/form-elements/number-input/number-input.js +55 -55
- package/dist/components/form-elements/number-input/number-input.js.map +1 -1
- package/dist/components/form-elements/text-input/text-input.js +4 -4
- package/dist/components/form-elements/text-input/text-input.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.d.ts +1 -1
- package/dist/components/layouts/column-layout/column-layout.js +25 -22
- package/dist/components/layouts/column-layout/column-layout.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.types.d.ts +4 -1
- package/dist/components/layouts/container/container.d.ts +11 -0
- package/dist/components/layouts/container/container.js +28 -0
- package/dist/components/layouts/container/container.js.map +1 -0
- package/dist/components/layouts/container/container.types.d.ts +11 -0
- package/dist/components/layouts/container/container.types.js +2 -0
- package/dist/components/layouts/container/container.types.js.map +1 -0
- package/dist/components/layouts/container/index.d.ts +2 -0
- package/dist/components/layouts/container/index.js +2 -0
- package/dist/components/layouts/container/index.js.map +1 -0
- package/dist/components/layouts/footer/footer.js +38 -38
- package/dist/components/layouts/footer/footer.js.map +1 -1
- package/dist/components/layouts/index.d.ts +1 -0
- package/dist/components/layouts/index.js +1 -0
- package/dist/components/layouts/index.js.map +1 -1
- package/dist/components/layouts/layout-component.types.d.ts +9 -0
- package/dist/components/layouts/layout-component.types.js +2 -0
- package/dist/components/layouts/layout-component.types.js.map +1 -0
- package/dist/components/layouts/layout-wrapper.d.ts +7 -0
- package/dist/components/layouts/layout-wrapper.js +9 -0
- package/dist/components/layouts/layout-wrapper.js.map +1 -0
- package/dist/components/layouts/masonry-layout/masonry-layout.d.ts +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.js +18 -18
- package/dist/components/layouts/masonry-layout/masonry-layout.js.map +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.types.d.ts +3 -2
- package/dist/components/media/info-card/info-card.js +51 -52
- package/dist/components/media/info-card/info-card.js.map +1 -1
- package/dist/components/media/media-card/media-card.js +133 -119
- package/dist/components/media/media-card/media-card.js.map +1 -1
- package/dist/components/navigation/nav-menu/items/base-item/base-item.d.ts +1 -1
- package/dist/components/navigation/nav-menu/items/base-item/base-item.js +38 -38
- package/dist/components/navigation/nav-menu/items/base-item/base-item.js.map +1 -1
- package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js +58 -58
- package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js.map +1 -1
- package/dist/components/navigation/nav-menu/nav-menu.js +104 -104
- package/dist/components/navigation/nav-menu/nav-menu.js.map +1 -1
- package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js +42 -42
- package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js.map +1 -1
- package/dist/components/navigation/side-nav/side-nav.js +15 -15
- package/dist/components/navigation/side-nav/side-nav.js.map +1 -1
- package/dist/components/typography/page-header/page-header.js +14 -14
- package/dist/components/typography/page-header/page-header.js.map +1 -1
- package/dist/components/typography/typography.d.ts +10 -8
- package/dist/components/typography/typography.js +42 -8
- package/dist/components/typography/typography.js.map +1 -1
- package/dist/components/ui/button/button-recipe.js +90 -6
- package/dist/components/ui/button/button-recipe.js.map +1 -1
- package/dist/components/ui/button/button.d.ts +1 -1
- package/dist/components/ui/button/button.js +3 -2
- package/dist/components/ui/button/button.js.map +1 -1
- package/dist/components/ui/button/button.types.d.ts +5 -1
- package/dist/components/ui/card/card.js +72 -72
- package/dist/components/ui/card/card.js.map +1 -1
- package/dist/components/ui/divider/divider.js +24 -22
- package/dist/components/ui/divider/divider.js.map +1 -1
- package/dist/components/ui/icon/icon.d.ts +1 -1
- package/dist/components/ui/icon/icon.js +1 -1
- package/dist/components/ui/icon-button/icon-button.d.ts +1 -1
- package/dist/components/ui/icon-button/icon-button.js +4 -7
- package/dist/components/ui/icon-button/icon-button.js.map +1 -1
- package/dist/components/ui/loaders/dots-loader/dots-loader.js +46 -46
- package/dist/components/ui/loaders/dots-loader/dots-loader.js.map +1 -1
- package/dist/components/ui/loaders/skeleton/skeleton.js +17 -17
- package/dist/components/ui/loaders/skeleton/skeleton.js.map +1 -1
- package/dist/components/ui/loaders/spin-loader/spin-loader.js +28 -28
- package/dist/components/ui/loaders/spin-loader/spin-loader.js.map +1 -1
- package/dist/components/ui/modal/components/modal-content.js +80 -80
- package/dist/components/ui/modal/components/modal-content.js.map +1 -1
- package/dist/components/ui/modal/modal.js +33 -15
- package/dist/components/ui/modal/modal.js.map +1 -1
- package/dist/components/ui/modal/modal.types.d.ts +2 -0
- package/dist/components/ui/toggle/toggle.js +37 -48
- package/dist/components/ui/toggle/toggle.js.map +1 -1
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.js +4 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-click-outside/index.d.ts +1 -0
- package/dist/hooks/use-click-outside/index.js +2 -0
- package/dist/hooks/use-click-outside/index.js.map +1 -0
- package/dist/hooks/use-click-outside/use-click-outside.d.ts +10 -0
- package/dist/hooks/use-click-outside/use-click-outside.js +26 -0
- package/dist/hooks/use-click-outside/use-click-outside.js.map +1 -0
- package/dist/hooks/use-dismiss/index.d.ts +1 -0
- package/dist/hooks/use-dismiss/index.js +2 -0
- package/dist/hooks/use-dismiss/index.js.map +1 -0
- package/dist/hooks/use-dismiss/use-dismiss.d.ts +13 -0
- package/dist/hooks/use-dismiss/use-dismiss.js +42 -0
- package/dist/hooks/use-dismiss/use-dismiss.js.map +1 -0
- package/dist/hooks/use-pathname/index.js.map +1 -0
- package/dist/hooks/use-pathname/use-pathname.d.ts +8 -0
- package/dist/{utils/hooks → hooks}/use-pathname/use-pathname.js +7 -0
- package/dist/hooks/use-pathname/use-pathname.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.d.ts +2 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.js +12 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.js.map +1 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.d.ts +9 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.js +2 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.js.map +1 -0
- package/dist/internal-components/conditional-wrapper/index.d.ts +2 -0
- package/dist/internal-components/conditional-wrapper/index.js +2 -0
- package/dist/internal-components/conditional-wrapper/index.js.map +1 -0
- package/dist/internal-components/image/render-image.js.map +1 -1
- package/dist/internal-components/index.d.ts +3 -1
- package/dist/internal-components/index.js +3 -1
- package/dist/internal-components/index.js.map +1 -1
- package/dist/internal-components/optional-icon-button/index.d.ts +2 -0
- package/dist/internal-components/optional-icon-button/index.js +2 -0
- package/dist/internal-components/optional-icon-button/index.js.map +1 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.d.ts +2 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.js +9 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.js.map +1 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.d.ts +4 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.js +2 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.js.map +1 -0
- package/dist/styled-system/recipes/button.d.ts +2 -1
- package/dist/styled-system/recipes/button.mjs +114 -1
- package/dist/styled-system/styles.css +1 -1
- package/dist/styles/panda.css +1 -1
- package/dist/theme/css-name-configurations/theme-css-names.d.ts +13 -1
- package/dist/types/colors/utility-color-options.types.d.ts +2 -0
- package/dist/types/image/image.types.d.ts +2 -0
- package/dist/types/theme/theme.types.d.ts +37 -23
- package/dist/types/utility/deep-partial.types.d.ts +1 -0
- package/dist/types/utility/index.d.ts +1 -0
- package/dist/types/utility/type-production.types.d.ts +4 -0
- package/dist/types/utility/type-production.types.js +2 -0
- package/dist/types/utility/type-production.types.js.map +1 -0
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/index.js +0 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/theme-utilities/get-utility-icon-size/get-utility-icon-size.js +4 -4
- package/dist/utils/theme-utilities/get-utility-icon-size/get-utility-icon-size.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/form-elements/dropdown/dropdown.js +0 -83
- package/dist/components/form-elements/dropdown/dropdown.js.map +0 -1
- package/dist/components/form-elements/dropdown/dropdown.types.js.map +0 -1
- package/dist/components/form-elements/dropdown/index.js.map +0 -1
- package/dist/utils/hooks/index.d.ts +0 -2
- package/dist/utils/hooks/index.js +0 -3
- package/dist/utils/hooks/index.js.map +0 -1
- package/dist/utils/hooks/use-outside-close-click/index.d.ts +0 -1
- package/dist/utils/hooks/use-outside-close-click/index.js +0 -2
- package/dist/utils/hooks/use-outside-close-click/index.js.map +0 -1
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.d.ts +0 -2
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.js +0 -16
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.js.map +0 -1
- package/dist/utils/hooks/use-pathname/index.js.map +0 -1
- package/dist/utils/hooks/use-pathname/use-pathname.d.ts +0 -1
- package/dist/utils/hooks/use-pathname/use-pathname.js.map +0 -1
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.types.js +0 -0
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/index.d.ts +0 -0
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/index.js +0 -0
- /package/dist/{utils/hooks → hooks}/use-pathname/index.d.ts +0 -0
- /package/dist/{utils/hooks → hooks}/use-pathname/index.js +0 -0
package/README.md
CHANGED
|
@@ -52,7 +52,7 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
|
|
|
52
52
|
|
|
53
53
|
### UI Elements
|
|
54
54
|
|
|
55
|
-
`Button` `Card` `Divider` `Icon` `IconButton` `Modal` `Toggle`
|
|
55
|
+
`Button` `Card` `Divider` `Icon` `IconButton` `Modal` `Toggle` `DotsLoader` `SpinLoader` `Skeleton` `SkeletonLayout`
|
|
56
56
|
|
|
57
57
|
### Media Display
|
|
58
58
|
|
|
@@ -72,4 +72,12 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
|
|
|
72
72
|
|
|
73
73
|
### Layout Components
|
|
74
74
|
|
|
75
|
-
`ColumnLayout` `Footer` `MasonryLayout`
|
|
75
|
+
`Container` `ColumnLayout` `Footer` `MasonryLayout`
|
|
76
|
+
|
|
77
|
+
### Data Display
|
|
78
|
+
|
|
79
|
+
`DataDisplayControls` `FilterControls` `SortControls`
|
|
80
|
+
|
|
81
|
+
## Hooks
|
|
82
|
+
|
|
83
|
+
`useClickOutside` `useDismiss` `usePathname`
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { DataDisplayControlsProps } from './data-display-controls.types';
|
|
2
|
+
export declare const DataDisplayControls: <T>({ fields, sortFields, activeSort, activeFilters, onClearAll, isDefault, isActive, onClearFilter, onToggleFilter, onToggleSort, size, color, filterVariant, showFilterLabel, showSortLabel, }: DataDisplayControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from '../../../styled-system/css';
|
|
3
|
+
import { FilterControls, InlineFilterControls } from '../filter-controls';
|
|
4
|
+
import { SortControls } from '../sort-controls';
|
|
5
|
+
import { Button } from '../../../components/ui';
|
|
6
|
+
const styles = cva({
|
|
7
|
+
base: {
|
|
8
|
+
display: 'flex',
|
|
9
|
+
flexDirection: 'column',
|
|
10
|
+
alignItems: 'start',
|
|
11
|
+
},
|
|
12
|
+
variants: {
|
|
13
|
+
size: {
|
|
14
|
+
sm: { gap: 1 },
|
|
15
|
+
md: { gap: 2 },
|
|
16
|
+
lg: { gap: 3 },
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
export const DataDisplayControls = ({ fields, sortFields, activeSort, activeFilters, onClearAll, isDefault, isActive, onClearFilter, onToggleFilter, onToggleSort, size, color, filterVariant = 'inline', showFilterLabel, showSortLabel, }) => {
|
|
21
|
+
const sharedProps = {
|
|
22
|
+
color,
|
|
23
|
+
size,
|
|
24
|
+
hideReset: true,
|
|
25
|
+
neutralWhenInactive: true,
|
|
26
|
+
};
|
|
27
|
+
const filterProps = {
|
|
28
|
+
isDefault,
|
|
29
|
+
fields: fields.map((f) => ({ ...f })),
|
|
30
|
+
activeFilters,
|
|
31
|
+
onClear: onClearFilter,
|
|
32
|
+
onClearAll,
|
|
33
|
+
onToggle: onToggleFilter,
|
|
34
|
+
isActive,
|
|
35
|
+
showFilterLabel,
|
|
36
|
+
};
|
|
37
|
+
const sortProps = {
|
|
38
|
+
fields: sortFields,
|
|
39
|
+
activeSort,
|
|
40
|
+
onToggle: onToggleSort,
|
|
41
|
+
onClear: onClearAll,
|
|
42
|
+
isDefault,
|
|
43
|
+
showSortLabel,
|
|
44
|
+
};
|
|
45
|
+
const Filter = filterVariant === 'standard' ? FilterControls : InlineFilterControls;
|
|
46
|
+
return (_jsxs("div", { className: styles({ size }), children: [_jsx(Filter, { ...sharedProps, ...filterProps }), _jsx(SortControls, { ...sharedProps, ...sortProps }), !isDefault && (_jsx(Button, { ariaLabel: "Clear all filters and Sorting", size: "sm", onClick: onClearAll, text: true, children: "Reset" }))] }));
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=data-display-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-display-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/data-display-controls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,MAAM,GAAG,GAAG,CAAC;IAClB,IAAI,EAAE;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,OAAO;KACnB;IACD,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;YACd,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;YACd,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;SACd;KACD;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAK,EACvC,MAAM,EACN,UAAU,EACV,UAAU,EACV,aAAa,EACb,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,aAAa,GAAG,QAAQ,EACxB,eAAe,EACf,aAAa,GACgB,EAAE,EAAE;IACjC,MAAM,WAAW,GAAG;QACnB,KAAK;QACL,IAAI;QACJ,SAAS,EAAE,IAAI;QACf,mBAAmB,EAAE,IAAI;KACzB,CAAC;IAEF,MAAM,WAAW,GAAG;QACnB,SAAS;QACT,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QACrC,aAAa;QACb,OAAO,EAAE,aAAa;QACtB,UAAU;QACV,QAAQ,EAAE,cAAc;QACxB,QAAQ;QACR,eAAe;KACf,CAAC;IAEF,MAAM,SAAS,GAAG;QACjB,MAAM,EAAE,UAAU;QAClB,UAAU;QACV,QAAQ,EAAE,YAAY;QACtB,OAAO,EAAE,UAAU;QACnB,SAAS;QACT,aAAa;KACb,CAAC;IAEF,MAAM,MAAM,GAAG,aAAa,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC;IAEpF,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,aAC/B,KAAC,MAAM,OAAK,WAAW,KAAM,WAAW,GAAI,EAC5C,KAAC,YAAY,OAAK,WAAW,KAAM,SAAS,GAAI,EAC/C,CAAC,SAAS,IAAI,CACd,KAAC,MAAM,IACN,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,UAAU,EACnB,IAAI,4BAGI,CACT,IACI,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Override, Prettify } from '../../../types';
|
|
2
|
+
import { SortControlsConfig, SortField, SortControlsProps } from '../sort-controls/sort-controls.types';
|
|
3
|
+
import { FilterControlsConfig, ResolvedFilterField, FilterControlsBaseProps } from '../filter-controls/filter-controls.types';
|
|
4
|
+
export type DataField<T> = Prettify<Override<SortField<T> & ResolvedFilterField<T>, {}>>;
|
|
5
|
+
export type DataDisplayControlsConfig<T> = Prettify<Override<SortControlsConfig<T> & FilterControlsConfig<T>, {
|
|
6
|
+
fields: DataField<T>[];
|
|
7
|
+
}>>;
|
|
8
|
+
export type DataDisplayControlsData<T> = {
|
|
9
|
+
refinedData: T[];
|
|
10
|
+
dataDisplayControlsProps: DataDisplayControlsProps<T>;
|
|
11
|
+
};
|
|
12
|
+
export type DataDisplayControlsProps<T> = Prettify<Omit<SortControlsProps<T> & FilterControlsBaseProps<T>, 'fields' | 'hideReset' | 'onToggle' | 'onClear'> & {
|
|
13
|
+
fields: DataField<T>[];
|
|
14
|
+
sortFields: DataField<T>[];
|
|
15
|
+
onToggleSort: SortControlsProps<T>['onToggle'];
|
|
16
|
+
onClearFilter: FilterControlsBaseProps<T>['onClear'];
|
|
17
|
+
onToggleFilter: FilterControlsBaseProps<T>['onToggle'];
|
|
18
|
+
filterVariant?: 'standard' | 'inline';
|
|
19
|
+
}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-display-controls.types.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/data-display-controls.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { DataDisplayControlsConfig, DataDisplayControlsData } from './data-display-controls.types';
|
|
2
|
+
export declare const useDataDisplayControls: <T>({ data, defaultSort, defaultFilters, filterMode, multiSort, fields, }: DataDisplayControlsConfig<T>) => DataDisplayControlsData<T>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useFilterControls } from '../filter-controls';
|
|
3
|
+
import { useSortControls } from '../sort-controls';
|
|
4
|
+
export const useDataDisplayControls = ({ data, defaultSort, defaultFilters, filterMode, multiSort, fields, }) => {
|
|
5
|
+
const { filteredData, clearAllFilters, clearFilter, filterControlsProps, activeFilters, toggleFilter, } = useFilterControls({
|
|
6
|
+
data,
|
|
7
|
+
fields,
|
|
8
|
+
filterMode,
|
|
9
|
+
defaultFilters,
|
|
10
|
+
});
|
|
11
|
+
const sortFields = filterControlsProps.fields.filter((field) => {
|
|
12
|
+
const unique = new Set(filteredData.map((row) => row[field.key]));
|
|
13
|
+
return unique.size > 1;
|
|
14
|
+
});
|
|
15
|
+
const { sortedData: refinedData, activeSort, clearSort, toggleSort, sortControlsProps, } = useSortControls({
|
|
16
|
+
data: filteredData,
|
|
17
|
+
fields: sortFields,
|
|
18
|
+
defaultSort,
|
|
19
|
+
multiSort,
|
|
20
|
+
});
|
|
21
|
+
const onClearAll = () => {
|
|
22
|
+
clearAllFilters();
|
|
23
|
+
clearSort();
|
|
24
|
+
};
|
|
25
|
+
return {
|
|
26
|
+
refinedData,
|
|
27
|
+
dataDisplayControlsProps: {
|
|
28
|
+
fields: filterControlsProps.fields,
|
|
29
|
+
sortFields,
|
|
30
|
+
activeSort,
|
|
31
|
+
activeFilters,
|
|
32
|
+
isDefault: filterControlsProps.isDefault && sortControlsProps.isDefault,
|
|
33
|
+
isActive: filterControlsProps.isActive,
|
|
34
|
+
onClearAll,
|
|
35
|
+
onToggleSort: toggleSort,
|
|
36
|
+
onToggleFilter: toggleFilter,
|
|
37
|
+
onClearFilter: clearFilter,
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=use-data-display-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-data-display-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/use-data-display-controls.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAI,EACzC,IAAI,EACJ,WAAW,EACX,cAAc,EACd,UAAU,EACV,SAAS,EACT,MAAM,GACwB,EAA8B,EAAE;IAC9D,MAAM,EACL,YAAY,EACZ,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,YAAY,GACZ,GAAG,iBAAiB,CAAI;QACxB,IAAI;QACJ,MAAM;QACN,UAAU;QACV,cAAc;KACd,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;QAC9D,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAClE,OAAO,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,MAAM,EACL,UAAU,EAAE,WAAW,EACvB,UAAU,EACV,SAAS,EACT,UAAU,EACV,iBAAiB,GACjB,GAAG,eAAe,CAAC;QACnB,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,UAAU;QAClB,WAAW;QACX,SAAS;KACT,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,EAAE;QACvB,eAAe,EAAE,CAAC;QAClB,SAAS,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO;QACN,WAAW;QACX,wBAAwB,EAAE;YACzB,MAAM,EAAE,mBAAmB,CAAC,MAAM;YAClC,UAAU;YACV,UAAU;YACV,aAAa;YACb,SAAS,EAAE,mBAAmB,CAAC,SAAS,IAAI,iBAAiB,CAAC,SAAS;YACvE,QAAQ,EAAE,mBAAmB,CAAC,QAAQ;YACtC,UAAU;YACV,YAAY,EAAE,UAAU;YACxB,cAAc,EAAE,YAAY;YAC5B,aAAa,EAAE,WAAW;SAC1B;KACD,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { IconNames } from '../../../components/ui';
|
|
2
|
+
import { UtilityColorOptions, UtilitySizeOptions } from '../../../types';
|
|
3
|
+
/** A single selectable option within a filter field */
|
|
4
|
+
export type FilterOption<V> = {
|
|
5
|
+
value: V;
|
|
6
|
+
label: string;
|
|
7
|
+
};
|
|
8
|
+
/** Configuration for a single filterable field */
|
|
9
|
+
export type FilterField<T> = {
|
|
10
|
+
/** Key of the data object this field filters on */
|
|
11
|
+
key: keyof T;
|
|
12
|
+
/** Display label for the filter */
|
|
13
|
+
label: string;
|
|
14
|
+
/** Optional icon displayed in the filter control */
|
|
15
|
+
icon?: IconNames;
|
|
16
|
+
/** Optional color accent for the filter control */
|
|
17
|
+
color?: UtilityColorOptions;
|
|
18
|
+
/** Customize options for this field (order or display label). If omitted, options are derived from the data */
|
|
19
|
+
filterOptions?: (string | {
|
|
20
|
+
label: string;
|
|
21
|
+
value: T[keyof T];
|
|
22
|
+
})[];
|
|
23
|
+
};
|
|
24
|
+
/** `FilterField` with `options` guaranteed to be present after resolution */
|
|
25
|
+
export type ResolvedFilterField<T> = Omit<FilterField<T>, 'options'> & {
|
|
26
|
+
options: FilterOption<T[keyof T]>[];
|
|
27
|
+
};
|
|
28
|
+
/** A currently active filter with one or more selected values */
|
|
29
|
+
export type ActiveFilter<T> = {
|
|
30
|
+
/** The field being filtered */
|
|
31
|
+
key: keyof T;
|
|
32
|
+
/** Currently selected values for this field */
|
|
33
|
+
values: T[keyof T][];
|
|
34
|
+
};
|
|
35
|
+
/** Configuration passed to `useFilterControls` to set up filtering behavior */
|
|
36
|
+
export type FilterControlsConfig<T> = {
|
|
37
|
+
/** Dataset to filter */
|
|
38
|
+
data: T[];
|
|
39
|
+
/** Fields available for filtering */
|
|
40
|
+
fields: FilterField<T>[];
|
|
41
|
+
/** Filters applied on initial render */
|
|
42
|
+
defaultFilters?: ActiveFilter<T>[];
|
|
43
|
+
/** Whether multiple active filters combine with AND or OR logic @default `'and'` */
|
|
44
|
+
filterMode?: 'and' | 'or';
|
|
45
|
+
};
|
|
46
|
+
/** Return value of `useFilterControls` — filtered data plus props to pass to `FilterControls` */
|
|
47
|
+
export type FilterControlsData<T> = {
|
|
48
|
+
/** The dataset after all active filters are applied */
|
|
49
|
+
filteredData: T[];
|
|
50
|
+
/** Currently active filters */
|
|
51
|
+
activeFilters: ActiveFilter<T>[];
|
|
52
|
+
/** Toggles a single value on or off for a given field */
|
|
53
|
+
toggleFilter: (key: keyof T, value: T[keyof T]) => void;
|
|
54
|
+
/** Clears all selected values for a given field */
|
|
55
|
+
clearFilter: (key: keyof T) => void;
|
|
56
|
+
/** Clears all active filters across all fields */
|
|
57
|
+
clearAllFilters: () => void;
|
|
58
|
+
/** Pre-assembled props to spread directly onto `FilterControls` */
|
|
59
|
+
filterControlsProps: FilterControlsBaseProps<T>;
|
|
60
|
+
};
|
|
61
|
+
export type FilterControlsBaseProps<T> = {
|
|
62
|
+
/** Size variant for the filter controls @default `'sm'` */
|
|
63
|
+
size?: UtilitySizeOptions;
|
|
64
|
+
/** Color accent applied to the controls */
|
|
65
|
+
color?: UtilityColorOptions;
|
|
66
|
+
/** Resolved filter fields with guaranteed options */
|
|
67
|
+
fields: ResolvedFilterField<T>[];
|
|
68
|
+
/** Currently active filters */
|
|
69
|
+
activeFilters: ActiveFilter<T>[];
|
|
70
|
+
/** Hides the reset button when true, indicating filters are in their default state */
|
|
71
|
+
isDefault?: boolean;
|
|
72
|
+
/** Called when a filter value is toggled */
|
|
73
|
+
onToggle: (key: keyof T, value: T[keyof T]) => void;
|
|
74
|
+
/** Called when all values for a field are cleared */
|
|
75
|
+
onClear: (key: keyof T) => void;
|
|
76
|
+
/** Called when all active filters are cleared */
|
|
77
|
+
onClearAll: () => void;
|
|
78
|
+
/** Checks whether a specific value is active for a given field */
|
|
79
|
+
isActive: (key: keyof T, value: T[keyof T]) => boolean;
|
|
80
|
+
/** Optionally hide button to reset filters */
|
|
81
|
+
hideReset?: boolean;
|
|
82
|
+
/** Optionally display title `Filter` above filters */
|
|
83
|
+
showFilterLabel?: boolean;
|
|
84
|
+
/** Display Filter Dropdown Buttons as neutral when no sort is applied @default `'false'`` */
|
|
85
|
+
neutralWhenInactive?: boolean;
|
|
86
|
+
};
|
|
87
|
+
export type FilterControlsProps<T> = Omit<FilterControlsBaseProps<T>, 'neutralWhenInactive'>;
|
|
88
|
+
export type InlineFilterControlsProps<T> = FilterControlsBaseProps<T> & {
|
|
89
|
+
/** Determines where field Title is displayed */
|
|
90
|
+
fieldTitleDisplay?: 'none' | 'inline' | 'block';
|
|
91
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-controls.types.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/filter-controls.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { useFilterControls } from './use-filter-controls';
|
|
2
|
+
export type { FilterControlsProps, InlineFilterControlsProps } from './filter-controls.types';
|
|
3
|
+
export { FilterControls } from './variants/filter-controls';
|
|
4
|
+
export { InlineFilterControls } from './variants/inline-filter-controls';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { FilterControlsConfig, FilterControlsData } from './filter-controls.types';
|
|
2
|
+
/**
|
|
3
|
+
* Manages filter state for a dataset and returns filtered data alongside
|
|
4
|
+
* pre-assembled props for `FilterControls`.
|
|
5
|
+
*
|
|
6
|
+
* Options for each field are derived automatically from the data if not provided.
|
|
7
|
+
* Supports AND and OR filter logic across multiple active fields.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* const { filteredData, filterControlsProps } = useFilterControls({
|
|
11
|
+
* data: products,
|
|
12
|
+
* fields: [{ key: 'category', label: 'Category' }],
|
|
13
|
+
* mode: 'or',
|
|
14
|
+
* });
|
|
15
|
+
*
|
|
16
|
+
* return (
|
|
17
|
+
* <>
|
|
18
|
+
* <FilterControls {...filterControlsProps} />
|
|
19
|
+
* <ProductList data={filteredData} />
|
|
20
|
+
* </>
|
|
21
|
+
* );
|
|
22
|
+
*/
|
|
23
|
+
export declare const useFilterControls: <T>({ data, fields, defaultFilters, filterMode, }: FilterControlsConfig<T>) => FilterControlsData<T>;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useState, useMemo } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Manages filter state for a dataset and returns filtered data alongside
|
|
5
|
+
* pre-assembled props for `FilterControls`.
|
|
6
|
+
*
|
|
7
|
+
* Options for each field are derived automatically from the data if not provided.
|
|
8
|
+
* Supports AND and OR filter logic across multiple active fields.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* const { filteredData, filterControlsProps } = useFilterControls({
|
|
12
|
+
* data: products,
|
|
13
|
+
* fields: [{ key: 'category', label: 'Category' }],
|
|
14
|
+
* mode: 'or',
|
|
15
|
+
* });
|
|
16
|
+
*
|
|
17
|
+
* return (
|
|
18
|
+
* <>
|
|
19
|
+
* <FilterControls {...filterControlsProps} />
|
|
20
|
+
* <ProductList data={filteredData} />
|
|
21
|
+
* </>
|
|
22
|
+
* );
|
|
23
|
+
*/
|
|
24
|
+
export const useFilterControls = ({ data, fields, defaultFilters, filterMode = 'and', }) => {
|
|
25
|
+
const [activeFilters, setActiveFilters] = useState(defaultFilters ?? []);
|
|
26
|
+
const resolvedFields = useMemo(() => fields.map((field) => {
|
|
27
|
+
if (field.filterOptions) {
|
|
28
|
+
const options = field.filterOptions.map((o) => typeof o === 'string' ? { value: o, label: o } : o);
|
|
29
|
+
return { ...field, options };
|
|
30
|
+
}
|
|
31
|
+
const unique = [...new Set(data.map((row) => row[field.key]))];
|
|
32
|
+
const options = unique
|
|
33
|
+
.map((value) => ({ value, label: String(value) }))
|
|
34
|
+
.sort((a, b) => a.label.localeCompare(b.label));
|
|
35
|
+
return { ...field, options };
|
|
36
|
+
}), [data, fields]);
|
|
37
|
+
const isDefault = useMemo(() => {
|
|
38
|
+
if (!defaultFilters)
|
|
39
|
+
return activeFilters.length === 0;
|
|
40
|
+
if (activeFilters.length !== defaultFilters.length)
|
|
41
|
+
return false; // was comparing activeFilters.length to itself
|
|
42
|
+
return activeFilters.every((f, i) => f.key === defaultFilters[i].key &&
|
|
43
|
+
f.values.length === defaultFilters[i].values.length &&
|
|
44
|
+
f.values.every((v) => defaultFilters[i].values.includes(v)));
|
|
45
|
+
}, [activeFilters, defaultFilters]);
|
|
46
|
+
const toggleFilter = (key, value) => {
|
|
47
|
+
setActiveFilters((prev) => {
|
|
48
|
+
const existing = prev.find((f) => f.key === key);
|
|
49
|
+
if (!existing) {
|
|
50
|
+
return [...prev, { key, values: [value] }];
|
|
51
|
+
}
|
|
52
|
+
const hasValue = existing.values.includes(value);
|
|
53
|
+
if (hasValue) {
|
|
54
|
+
const nextValues = existing.values.filter((v) => v !== value);
|
|
55
|
+
// remove the filter entry entirely if no values remain
|
|
56
|
+
if (nextValues.length === 0)
|
|
57
|
+
return prev.filter((f) => f.key !== key);
|
|
58
|
+
return prev.map((f) => (f.key === key ? { ...f, values: nextValues } : f));
|
|
59
|
+
}
|
|
60
|
+
return prev.map((f) => (f.key === key ? { ...f, values: [...f.values, value] } : f));
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
const clearFilter = (key) => setActiveFilters((prev) => prev.filter((f) => f.key !== key));
|
|
64
|
+
const clearAllFilters = () => setActiveFilters(defaultFilters ?? []);
|
|
65
|
+
const filteredData = useMemo(() => {
|
|
66
|
+
if (activeFilters.length === 0)
|
|
67
|
+
return data;
|
|
68
|
+
return data.filter((row) => {
|
|
69
|
+
if (filterMode === 'and') {
|
|
70
|
+
return activeFilters.every((f) => f.values.includes(row[f.key]));
|
|
71
|
+
}
|
|
72
|
+
return activeFilters.some((f) => f.values.includes(row[f.key]));
|
|
73
|
+
});
|
|
74
|
+
}, [data, activeFilters, filterMode]);
|
|
75
|
+
const activeSet = useMemo(() => {
|
|
76
|
+
const set = new Set();
|
|
77
|
+
activeFilters.forEach((f) => f.values.forEach((v) => set.add(`${String(f.key)}:${String(v)}`)));
|
|
78
|
+
return set;
|
|
79
|
+
}, [activeFilters]);
|
|
80
|
+
const isActive = (key, value) => activeSet.has(`${String(key)}:${String(value)}`);
|
|
81
|
+
return {
|
|
82
|
+
filteredData,
|
|
83
|
+
activeFilters,
|
|
84
|
+
toggleFilter,
|
|
85
|
+
clearFilter,
|
|
86
|
+
clearAllFilters,
|
|
87
|
+
filterControlsProps: {
|
|
88
|
+
fields: resolvedFields,
|
|
89
|
+
activeFilters,
|
|
90
|
+
onToggle: toggleFilter,
|
|
91
|
+
onClear: clearFilter,
|
|
92
|
+
onClearAll: clearAllFilters,
|
|
93
|
+
isDefault,
|
|
94
|
+
isActive,
|
|
95
|
+
},
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
//# sourceMappingURL=use-filter-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-filter-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/use-filter-controls.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FilterControlsProps } from '../filter-controls.types';
|
|
2
|
+
/**
|
|
3
|
+
* Renders a row of multi-select dropdown filters and a reset button.
|
|
4
|
+
* Designed to be used with `useFilterControls` via `filterControlsProps`.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
|
|
8
|
+
* <FilterControls {...filterControlsProps} />
|
|
9
|
+
*/
|
|
10
|
+
export declare const FilterControls: <T>({ fields, activeFilters, onToggle, onClear, onClearAll, size, isDefault, color, hideReset, showFilterLabel, }: FilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from '../../../../styled-system/css';
|
|
4
|
+
import { Button, Text } from '../../../../components';
|
|
5
|
+
import { MultiDropdown } from '../../../form-elements';
|
|
6
|
+
const styles = {
|
|
7
|
+
container: cva({
|
|
8
|
+
base: {
|
|
9
|
+
display: 'flex',
|
|
10
|
+
flexDirection: 'column',
|
|
11
|
+
},
|
|
12
|
+
variants: {
|
|
13
|
+
size: {
|
|
14
|
+
sm: { gap: '1' },
|
|
15
|
+
md: { gap: '2' },
|
|
16
|
+
lg: { gap: '3' },
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
}),
|
|
20
|
+
controlsContainer: cva({
|
|
21
|
+
base: {
|
|
22
|
+
display: 'flex',
|
|
23
|
+
flexDirection: 'row',
|
|
24
|
+
alignItems: 'center',
|
|
25
|
+
width: 'fit-content',
|
|
26
|
+
},
|
|
27
|
+
variants: {
|
|
28
|
+
size: {
|
|
29
|
+
sm: { gap: '1' },
|
|
30
|
+
md: { gap: '2' },
|
|
31
|
+
lg: { gap: '3' },
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
}),
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Renders a row of multi-select dropdown filters and a reset button.
|
|
38
|
+
* Designed to be used with `useFilterControls` via `filterControlsProps`.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
|
|
42
|
+
* <FilterControls {...filterControlsProps} />
|
|
43
|
+
*/
|
|
44
|
+
export const FilterControls = ({ fields, activeFilters, onToggle, onClear, onClearAll, size = 'sm', isDefault, color, hideReset = false, showFilterLabel = false, }) => {
|
|
45
|
+
const getActive = (key) => activeFilters.find((f) => f.key === key);
|
|
46
|
+
return (_jsxs("div", { className: styles.container({ size }), children: [showFilterLabel && _jsx(Text, { bold: true, children: "Filters" }), _jsxs("div", { className: styles.controlsContainer({ size }), children: [fields.map(({ key, label, icon, color: fieldColor, options }) => {
|
|
47
|
+
const active = getActive(key);
|
|
48
|
+
const selectedValues = (active?.values ?? []);
|
|
49
|
+
return (_jsx(MultiDropdown, { size: size, id: String(key), title: label, options: options, values: selectedValues, onToggle: (value) => onToggle(key, value), onClear: () => onClear(key), icon: icon, showLabel: false, color: active ? color : undefined }, String(key)));
|
|
50
|
+
}), !isDefault && !hideReset && (_jsx(Button, { color: "text", onClick: onClearAll, size: size, text: true, ariaLabel: "Clear all filters", children: "Reset" }))] })] }));
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=filter-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-controls.js","sourceRoot":"","sources":["../../../../../src/components/data-display/filter-controls/variants/filter-controls.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { InlineFilterControlsProps } from '../filter-controls.types';
|
|
2
|
+
/**
|
|
3
|
+
* Renders all filter options as inline toggle buttons.
|
|
4
|
+
* Designed to be used with `useFilterControls` via `filterControlsProps`.
|
|
5
|
+
*
|
|
6
|
+
* Each option is always visible — clicking toggles it on or off.
|
|
7
|
+
* Active options appear filled; inactive ones appear as outlines.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
|
|
11
|
+
* <FilterBar {...filterControlsProps} />
|
|
12
|
+
*/
|
|
13
|
+
export declare const InlineFilterControls: <T>({ fields, isActive, onToggle, onClearAll, size, isDefault, color, fieldTitleDisplay, hideReset, showFilterLabel, }: InlineFilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { css, cva } from '../../../../styled-system/css';
|
|
4
|
+
import { Button, Text } from '../../../../components';
|
|
5
|
+
import { OptionalIconButton } from '../../../../internal-components';
|
|
6
|
+
const styles = {
|
|
7
|
+
container: cva({
|
|
8
|
+
base: {
|
|
9
|
+
display: 'flex',
|
|
10
|
+
flexDirection: 'column',
|
|
11
|
+
alignItems: 'start',
|
|
12
|
+
flexWrap: 'wrap',
|
|
13
|
+
},
|
|
14
|
+
variants: {
|
|
15
|
+
size: {
|
|
16
|
+
sm: { gap: '1' },
|
|
17
|
+
md: { gap: '2' },
|
|
18
|
+
lg: { gap: '3' },
|
|
19
|
+
},
|
|
20
|
+
filterGroup: {
|
|
21
|
+
true: {
|
|
22
|
+
flexWrap: 'inherit',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
titleInline: {
|
|
26
|
+
true: {
|
|
27
|
+
alignItems: 'center',
|
|
28
|
+
flexDirection: 'row',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
}),
|
|
33
|
+
groupLabel: cva({
|
|
34
|
+
base: {
|
|
35
|
+
fontWeight: 'semibold',
|
|
36
|
+
color: 'text.secondary',
|
|
37
|
+
},
|
|
38
|
+
variants: {
|
|
39
|
+
size: {
|
|
40
|
+
sm: { fontSize: 'xs', marginRight: '1' },
|
|
41
|
+
md: { fontSize: 'sm', marginRight: '2' },
|
|
42
|
+
lg: { fontSize: 'md', marginRight: '2' },
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
}),
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Renders all filter options as inline toggle buttons.
|
|
49
|
+
* Designed to be used with `useFilterControls` via `filterControlsProps`.
|
|
50
|
+
*
|
|
51
|
+
* Each option is always visible — clicking toggles it on or off.
|
|
52
|
+
* Active options appear filled; inactive ones appear as outlines.
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
|
|
56
|
+
* <FilterBar {...filterControlsProps} />
|
|
57
|
+
*/
|
|
58
|
+
export const InlineFilterControls = ({ fields, isActive, onToggle, onClearAll, size = 'sm', isDefault, color = 'tertiary', fieldTitleDisplay = 'inline', hideReset = false, showFilterLabel = false, }) => {
|
|
59
|
+
return (_jsxs("div", { className: styles.container({ size }), children: [showFilterLabel && _jsx(Text, { bold: true, children: "Filters" }), fields.map(({ key, label, icon, color: fieldColor, options }) => (_jsxs("div", { className: styles.container({
|
|
60
|
+
size,
|
|
61
|
+
filterGroup: true,
|
|
62
|
+
titleInline: fieldTitleDisplay === 'inline',
|
|
63
|
+
}), children: [fieldTitleDisplay !== 'none' && (_jsx("span", { className: styles.groupLabel({ size }), children: label })), _jsx("div", { className: styles.container({ size, filterGroup: true, titleInline: true }), children: options.map((option) => {
|
|
64
|
+
const active = isActive(key, option.value);
|
|
65
|
+
const resolvedFieldColor = active
|
|
66
|
+
? (fieldColor ?? color)
|
|
67
|
+
: 'neutral';
|
|
68
|
+
const buttonProps = {
|
|
69
|
+
color: resolvedFieldColor,
|
|
70
|
+
size,
|
|
71
|
+
onClick: () => onToggle(key, option.value),
|
|
72
|
+
name: icon,
|
|
73
|
+
};
|
|
74
|
+
return (_jsx(OptionalIconButton, { ...buttonProps, children: option.label }, `${String(key)}-${option.value}`));
|
|
75
|
+
}) })] }, String(key)))), !hideReset && (_jsx("div", { className: css({ minHeight: '6', display: 'flex', alignItems: 'center' }), children: !isDefault && (_jsx(Button, { color: "text", onClick: onClearAll, size: size, text: true, ariaLabel: "Clear all filters", children: "Reset" })) }))] }));
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=inline-filter-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inline-filter-controls.js","sourceRoot":"","sources":["../../../../../src/components/data-display/filter-controls/variants/inline-filter-controls.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/data-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,yBAAyB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/sort-controls/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}
|