@flipdish/ui-library 0.31.7 → 0.32.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/dist/components/molecules/Dropdown/index.cjs +3 -2
- package/dist/components/molecules/Dropdown/index.cjs.map +1 -1
- package/dist/components/molecules/Dropdown/index.d.ts +9 -4
- package/dist/components/molecules/Dropdown/index.d.ts.map +1 -1
- package/dist/components/molecules/Dropdown/index.js +4 -3
- package/dist/components/molecules/Dropdown/index.js.map +1 -1
- package/dist/components/molecules/Tabs/index.cjs +1 -1
- package/dist/components/molecules/Tabs/index.cjs.map +1 -1
- package/dist/components/molecules/Tabs/index.js +1 -1
- package/dist/components/molecules/Tabs/index.js.map +1 -1
- package/dist/components/organisms/Charts/components/Metrics.cjs +1 -1
- package/dist/components/organisms/Charts/components/Metrics.cjs.map +1 -1
- package/dist/components/organisms/Charts/components/Metrics.js +1 -1
- package/dist/components/organisms/Charts/components/Metrics.js.map +1 -1
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.cjs +8 -18
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.cjs.map +1 -1
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.d.ts +8 -22
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.d.ts.map +1 -1
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.js +10 -20
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.js.map +1 -1
- package/dist/components/organisms/FilterBar/index.cjs +2 -18
- package/dist/components/organisms/FilterBar/index.cjs.map +1 -1
- package/dist/components/organisms/FilterBar/index.d.ts +4 -25
- package/dist/components/organisms/FilterBar/index.d.ts.map +1 -1
- package/dist/components/organisms/FilterBar/index.js +3 -19
- package/dist/components/organisms/FilterBar/index.js.map +1 -1
- package/dist/components/organisms/PageHeader/index.cjs +1 -1
- package/dist/components/organisms/PageHeader/index.cjs.map +1 -1
- package/dist/components/organisms/PageHeader/index.d.ts +2 -2
- package/dist/components/organisms/PageHeader/index.js +1 -1
- package/dist/components/organisms/PageHeader/index.js.map +1 -1
- package/dist/components/organisms/Table/index.cjs +9 -4
- package/dist/components/organisms/Table/index.cjs.map +1 -1
- package/dist/components/organisms/Table/index.d.ts +4 -4
- package/dist/components/organisms/Table/index.d.ts.map +1 -1
- package/dist/components/organisms/Table/index.js +9 -4
- package/dist/components/organisms/Table/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,29 +1,15 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
export interface FilterRow {
|
|
3
|
-
id: string;
|
|
4
|
-
field: string;
|
|
5
|
-
operator: string;
|
|
6
|
-
value: string;
|
|
7
|
-
}
|
|
8
2
|
export interface FilterDialogProps {
|
|
9
|
-
/** The filter
|
|
10
|
-
|
|
11
|
-
/** Called when "Apply filter" is
|
|
12
|
-
onApply?: (
|
|
13
|
-
/** Called when "Clear all" is
|
|
3
|
+
/** The filter fields, one labelled `Select`, `MultiSelect` or `Input` each; they wrap into equal columns. */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/** Called when "Apply filter" is pressed, just before the popover closes. */
|
|
6
|
+
onApply?: () => void;
|
|
7
|
+
/** Called when "Clear all" is pressed; the popover stays open so the cleared fields are visible. */
|
|
14
8
|
onClearAll?: () => void;
|
|
15
|
-
/** Called when "Add filter" is clicked */
|
|
16
|
-
onAddFilter?: () => void;
|
|
17
|
-
/** Called when a filter row is removed */
|
|
18
|
-
onRemoveFilter?: (id: string) => void;
|
|
19
|
-
/** Called when a filter row changes */
|
|
20
|
-
onFilterChange?: (id: string, patch: Partial<Omit<FilterRow, 'id'>>) => void;
|
|
21
|
-
/** Render function for a single filter row's inputs */
|
|
22
|
-
renderFilterRow: (filter: FilterRow, onChange: (patch: Partial<Omit<FilterRow, 'id'>>) => void) => ReactNode;
|
|
23
9
|
/** Additional class name */
|
|
24
10
|
className?: string;
|
|
25
11
|
}
|
|
26
|
-
export declare const FilterDialog: ({
|
|
12
|
+
export declare const FilterDialog: ({ children, onApply, onClearAll, className }: FilterDialogProps) => import("react").JSX.Element;
|
|
27
13
|
export interface FilterDropdownProps extends FilterDialogProps {
|
|
28
14
|
/** Number of applied (committed) filters to show in the badge. Only used by the default trigger. */
|
|
29
15
|
appliedCount?: number;
|
|
@@ -32,11 +18,11 @@ export interface FilterDropdownProps extends FilterDialogProps {
|
|
|
32
18
|
/** Popover placement relative to trigger */
|
|
33
19
|
placement?: 'bottom' | 'bottom start' | 'bottom end';
|
|
34
20
|
/** Custom trigger element. When provided, replaces the default "Filters" button. */
|
|
35
|
-
|
|
21
|
+
trigger?: ReactNode;
|
|
36
22
|
}
|
|
37
23
|
export declare const CountBadge: ({ count, className }: {
|
|
38
24
|
count: number;
|
|
39
25
|
className?: string;
|
|
40
26
|
}) => import("react").JSX.Element;
|
|
41
|
-
export declare const FilterDropdown: ({
|
|
27
|
+
export declare const FilterDropdown: ({ appliedCount, onApply, onClearAll, isDisabled, className, placement, trigger, children, }: FilterDropdownProps) => import("react").JSX.Element;
|
|
42
28
|
//# sourceMappingURL=FilterDropdownMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/FilterBar/components/FilterDropdownMenu.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FilterDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/FilterBar/components/FilterDropdownMenu.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,6GAA6G;IAC7G,QAAQ,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,GAAI,8CAA8C,iBAAiB,gCAmC3F,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,oGAAoG;IACpG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,YAAY,CAAC;IACrD,oFAAoF;IACpF,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,GAAI,sBAAsB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gCASrF,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6FAS5B,mBAAmB,gCA4CrB,CAAC"}
|
|
@@ -1,38 +1,28 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { ChevronDown, FilterLines
|
|
2
|
+
import { ChevronDown, FilterLines } from '@flipdish/ui-icons';
|
|
3
3
|
import { Button } from '@flipdish/ui-library/components/atoms/Button';
|
|
4
|
-
import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
|
|
5
4
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
|
-
import { useTestIdPrefix, joinTestId
|
|
5
|
+
import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
7
6
|
import { DialogTrigger, Popover, Dialog } from 'react-aria-components';
|
|
8
7
|
|
|
9
|
-
const
|
|
10
|
-
const FilterDialog = ({ filters, onApply, onClearAll, onAddFilter, onRemoveFilter, onFilterChange, renderFilterRow, className, }) => {
|
|
11
|
-
const hasFilters = filters.length > 0;
|
|
8
|
+
const FilterDialog = ({ children, onApply, onClearAll, className }) => {
|
|
12
9
|
const prefix = useTestIdPrefix();
|
|
13
10
|
const dialogTestId = prefix ? joinTestId(prefix, 'dialog') : undefined;
|
|
14
|
-
const addTestId = prefix ? joinTestId(prefix, 'add') : undefined;
|
|
15
11
|
const clearTestId = prefix ? joinTestId(prefix, 'clear') : undefined;
|
|
16
12
|
const applyTestId = prefix ? joinTestId(prefix, 'apply') : undefined;
|
|
17
|
-
return (jsx(Dialog, { "data-testid": dialogTestId, className: cx('overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden', className), children: ({ close }) =>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return (jsx(FilterRowItem, { onRemove: () => onRemoveFilter?.(filter.id), testId: rowTestId, removeTestId: rowRemoveTestId, children: renderFilterRow(filter, (patch) => onFilterChange?.(filter.id, patch)) }, filter.id));
|
|
22
|
-
}) }) }), jsxs("div", { className: "flex items-center justify-between border-t border-secondary px-4 py-3", children: [jsx(Button, { size: "xs", color: "secondary", iconLeading: Plus, onClick: onAddFilter, "data-testid": addTestId, children: "Add filter" }), jsxs("div", { className: "flex items-center gap-3", children: [jsx(Button, { size: "xs", color: "secondary", onClick: () => onClearAll?.(), "data-testid": clearTestId, children: "Clear all" }), jsx(Button, { size: "xs", color: "primary", onClick: () => {
|
|
23
|
-
onApply?.(filters);
|
|
24
|
-
close();
|
|
25
|
-
}, "data-testid": applyTestId, children: "Apply filter" })] })] })] })) }));
|
|
13
|
+
return (jsx(Dialog, { "data-testid": dialogTestId, className: cx('overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden', className), children: ({ close }) => (jsxs(Fragment, { children: [jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-3 p-4 *:min-w-0 *:flex-1 *:basis-75", children: children }), jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-secondary px-4 py-3", children: [jsx(Button, { size: "xs", color: "secondary", onClick: () => onClearAll?.(), "data-testid": clearTestId, children: "Clear all" }), jsx(Button, { size: "xs", color: "primary", onClick: () => {
|
|
14
|
+
onApply?.();
|
|
15
|
+
close();
|
|
16
|
+
}, "data-testid": applyTestId, children: "Apply filter" })] })] })) }));
|
|
26
17
|
};
|
|
27
18
|
const CountBadge = ({ count, className }) => (jsx("span", { className: cx('inline-flex items-center rounded-md border border-primary bg-primary px-1.5 py-0.5 text-xs leading-[18px] font-medium text-secondary shadow-xs', className), children: count }));
|
|
28
|
-
const FilterDropdown = ({
|
|
29
|
-
const hasFilters = filters.length > 0;
|
|
19
|
+
const FilterDropdown = ({ appliedCount, onApply, onClearAll, isDisabled, className, placement = 'bottom end', trigger, children, }) => {
|
|
30
20
|
const hasApplied = appliedCount != null && appliedCount > 0;
|
|
31
21
|
const prefix = useTestIdPrefix();
|
|
32
22
|
const triggerTestId = prefix ? joinTestId(prefix, 'trigger') : undefined;
|
|
33
|
-
return (jsxs(DialogTrigger, { children: [
|
|
23
|
+
return (jsxs(DialogTrigger, { children: [trigger ?? (jsx(Button, { color: "secondary", size: "sm", iconLeading: FilterLines, iconTrailing: ChevronDown, isDisabled: isDisabled, "data-testid": triggerTestId, className: cx('max-h-9', hasApplied && 'bg-primary_hover', className), children: jsxs("span", { className: "flex items-center gap-1.5", children: ["Filters", hasApplied && jsx(CountBadge, { count: appliedCount })] }) })), jsx(Popover, { placement: placement, offset: 4, containerPadding: 0, className: (state) => cx('origin-(--trigger-anchor-point) will-change-transform md:w-170', state.isEntering &&
|
|
34
24
|
'duration-150 ease-out animate-in fade-in placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', state.isExiting &&
|
|
35
|
-
'duration-100 ease-in animate-out fade-out placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5'
|
|
25
|
+
'duration-100 ease-in animate-out fade-out placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5'), children: jsx(FilterDialog, { onApply: onApply, onClearAll: onClearAll, children: children }) })] }));
|
|
36
26
|
};
|
|
37
27
|
|
|
38
28
|
export { CountBadge, FilterDialog, FilterDropdown };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterDropdownMenu.js","sources":["../../../../../src/components/organisms/FilterBar/components/FilterDropdownMenu.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"FilterDropdownMenu.js","sources":["../../../../../src/components/organisms/FilterBar/components/FilterDropdownMenu.tsx"],"sourcesContent":[null],"names":["_jsx","AriaDialog","_jsxs","_Fragment","AriaDialogTrigger","AriaPopover"],"mappings":"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"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var uiIcons = require('@flipdish/ui-icons');
|
|
5
4
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
5
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
7
|
-
var reactAriaComponents = require('react-aria-components');
|
|
8
6
|
var FilterDropdownMenu = require('./components/FilterDropdownMenu.cjs');
|
|
9
7
|
|
|
10
8
|
/** Root layout container for the filter bar. Arranges content and actions horizontally with wrapping. */
|
|
@@ -24,21 +22,9 @@ const FilterBarActions = ({ children, className, ...props }) => {
|
|
|
24
22
|
const actionsTestId = prefix ? testIdUtils.joinTestId(prefix, 'actions') : undefined;
|
|
25
23
|
return (jsxRuntime.jsx("div", { ...props, "data-testid": actionsTestId, className: cx.cx('flex shrink-0 items-center gap-3', className), children: children }));
|
|
26
24
|
};
|
|
27
|
-
/** A single advanced filter row with inputs and a remove button. */
|
|
28
|
-
const FilterRow = ({ children, onRemove, className, ...props }) => {
|
|
29
|
-
const prefix = testIdUtils.useTestIdPrefix();
|
|
30
|
-
const rowTestId = prefix ? testIdUtils.joinTestId(prefix, 'filter-row') : undefined;
|
|
31
|
-
return (jsxRuntime.jsxs("div", { ...props, "data-testid": rowTestId, className: cx.cx('flex items-center gap-1', className), children: [jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: children }), jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Remove filter", onPress: onRemove, className: "flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover", children: jsxRuntime.jsx(uiIcons.XClose, { className: "size-5" }) })] }));
|
|
32
|
-
};
|
|
33
|
-
/** Icon-only button styled to match filter bar controls (secondary button appearance). */
|
|
34
|
-
const FilterIconButton = ({ icon: Icon, label, onPress, className }) => {
|
|
35
|
-
const prefix = testIdUtils.useTestIdPrefix();
|
|
36
|
-
const buttonTestId = prefix ? testIdUtils.joinTestId(prefix, 'filter-button') : undefined;
|
|
37
|
-
return (jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": label, onPress: onPress, "data-testid": buttonTestId, className: cx.cx('flex size-9 cursor-pointer items-center justify-center rounded-lg border border-primary bg-primary shadow-xs transition duration-100 ease-linear hover:bg-primary_hover', className), children: jsxRuntime.jsx(Icon, { className: "size-5 text-fg-quaternary" }) }));
|
|
38
|
-
};
|
|
39
25
|
/**
|
|
40
|
-
* Arranges filter controls
|
|
41
|
-
*
|
|
26
|
+
* Arranges filter controls and their actions into a responsive horizontal bar. Compose
|
|
27
|
+
* `FilterBar.Content` and `FilterBar.Actions` inside `FilterBar.Root`, with `FilterDropdown` in `Actions`.
|
|
42
28
|
*
|
|
43
29
|
* @summary responsive bar of filter controls and actions
|
|
44
30
|
*/
|
|
@@ -46,8 +32,6 @@ const FilterBar = {
|
|
|
46
32
|
Root: FilterBarRoot,
|
|
47
33
|
Content: FilterBarContent,
|
|
48
34
|
Actions: FilterBarActions,
|
|
49
|
-
FilterRow,
|
|
50
|
-
FilterIconButton,
|
|
51
35
|
};
|
|
52
36
|
|
|
53
37
|
exports.FilterDropdown = FilterDropdownMenu.FilterDropdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/FilterBar/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","TestIdProvider","cx","useTestIdPrefix","joinTestId"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/FilterBar/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","TestIdProvider","cx","useTestIdPrefix","joinTestId"],"mappings":";;;;;;;AAmBA;AACA,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAsB,KAAI;AACzG,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAE3G,QACEC,cAAA,CAACC,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BD,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,aAAA,EAAe,UAAU,EAAE,SAAS,EAAEE,KAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,EAAA,QAAA,EAChG,QAAQ,EAAA,CACL,EAAA,CACS;AAErB,CAAC;AAOD;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AACpF,IAAA,MAAM,MAAM,GAAGC,2BAAe,EAAE;AAChC,IAAA,MAAM,aAAa,GAAG,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS;AAExE,IAAA,QACEJ,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,iBAAe,aAAa,EAAE,SAAS,EAAEE,KAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,YAClH,QAAQ,EAAA,CACL;AAEV,CAAC;AAOD;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AACpF,IAAA,MAAM,MAAM,GAAGC,2BAAe,EAAE;AAChC,IAAA,MAAM,aAAa,GAAG,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS;AAExE,IAAA,QACEJ,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,iBAAe,aAAa,EAAE,SAAS,EAAEE,KAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,YACrG,QAAQ,EAAA,CACL;AAEV,CAAC;AAED;;;;;AAKG;AACI,MAAM,SAAS,GAAG;AACvB,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,OAAO,EAAE,gBAAgB;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type { ComponentPropsWithRef,
|
|
2
|
-
export type
|
|
3
|
-
export { FilterDropdown } from './components/FilterDropdownMenu';
|
|
1
|
+
import type { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export { FilterDropdown, type FilterDropdownProps } from './components/FilterDropdownMenu';
|
|
4
3
|
interface FilterBarRootProps extends ComponentPropsWithRef<'div'> {
|
|
5
4
|
/** Content and actions for the filter bar */
|
|
6
5
|
children: ReactNode;
|
|
@@ -19,27 +18,9 @@ interface FilterBarActionsProps extends ComponentPropsWithRef<'div'> {
|
|
|
19
18
|
/** Action buttons such as date picker, filters, search */
|
|
20
19
|
children: ReactNode;
|
|
21
20
|
}
|
|
22
|
-
interface FilterRowProps extends ComponentPropsWithRef<'div'> {
|
|
23
|
-
/** Filter field, operator, and value inputs */
|
|
24
|
-
children: ReactNode;
|
|
25
|
-
/** Callback when the remove button is clicked */
|
|
26
|
-
onRemove?: () => void;
|
|
27
|
-
}
|
|
28
|
-
interface FilterIconButtonProps {
|
|
29
|
-
/** Icon component to render */
|
|
30
|
-
icon: FC<{
|
|
31
|
-
className?: string;
|
|
32
|
-
}>;
|
|
33
|
-
/** Accessible label */
|
|
34
|
-
label?: string;
|
|
35
|
-
/** Click handler */
|
|
36
|
-
onPress?: () => void;
|
|
37
|
-
/** Additional class names */
|
|
38
|
-
className?: string;
|
|
39
|
-
}
|
|
40
21
|
/**
|
|
41
|
-
* Arranges filter controls
|
|
42
|
-
*
|
|
22
|
+
* Arranges filter controls and their actions into a responsive horizontal bar. Compose
|
|
23
|
+
* `FilterBar.Content` and `FilterBar.Actions` inside `FilterBar.Root`, with `FilterDropdown` in `Actions`.
|
|
43
24
|
*
|
|
44
25
|
* @summary responsive bar of filter controls and actions
|
|
45
26
|
*/
|
|
@@ -47,7 +28,5 @@ export declare const FilterBar: {
|
|
|
47
28
|
Root: ({ children, className, "data-testid": dataTestId, ...props }: FilterBarRootProps) => import("react").JSX.Element;
|
|
48
29
|
Content: ({ children, className, ...props }: FilterBarContentProps) => import("react").JSX.Element;
|
|
49
30
|
Actions: ({ children, className, ...props }: FilterBarActionsProps) => import("react").JSX.Element;
|
|
50
|
-
FilterRow: ({ children, onRemove, className, ...props }: FilterRowProps) => import("react").JSX.Element;
|
|
51
|
-
FilterIconButton: ({ icon: Icon, label, onPress, className }: FilterIconButtonProps) => import("react").JSX.Element;
|
|
52
31
|
};
|
|
53
32
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/FilterBar/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/FilterBar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAE3F,UAAU,kBAAmB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC/D,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAeD,UAAU,qBAAsB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAClE,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAcD,UAAU,qBAAsB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAClE,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAcD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;yEApD+D,kBAAkB;iDAkB1C,qBAAqB;iDAiBrB,qBAAqB;CAqBjF,CAAC"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import { jsx
|
|
2
|
-
import { XClose } from '@flipdish/ui-icons';
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
2
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
3
|
import { useTestIdPrefix, joinTestId, useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
|
-
import { Button } from 'react-aria-components';
|
|
6
4
|
export { FilterDropdown } from './components/FilterDropdownMenu.js';
|
|
7
5
|
|
|
8
6
|
/** Root layout container for the filter bar. Arranges content and actions horizontally with wrapping. */
|
|
@@ -22,21 +20,9 @@ const FilterBarActions = ({ children, className, ...props }) => {
|
|
|
22
20
|
const actionsTestId = prefix ? joinTestId(prefix, 'actions') : undefined;
|
|
23
21
|
return (jsx("div", { ...props, "data-testid": actionsTestId, className: cx('flex shrink-0 items-center gap-3', className), children: children }));
|
|
24
22
|
};
|
|
25
|
-
/** A single advanced filter row with inputs and a remove button. */
|
|
26
|
-
const FilterRow = ({ children, onRemove, className, ...props }) => {
|
|
27
|
-
const prefix = useTestIdPrefix();
|
|
28
|
-
const rowTestId = prefix ? joinTestId(prefix, 'filter-row') : undefined;
|
|
29
|
-
return (jsxs("div", { ...props, "data-testid": rowTestId, className: cx('flex items-center gap-1', className), children: [jsx("div", { className: "flex items-center gap-3", children: children }), jsx(Button, { "aria-label": "Remove filter", onPress: onRemove, className: "flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover", children: jsx(XClose, { className: "size-5" }) })] }));
|
|
30
|
-
};
|
|
31
|
-
/** Icon-only button styled to match filter bar controls (secondary button appearance). */
|
|
32
|
-
const FilterIconButton = ({ icon: Icon, label, onPress, className }) => {
|
|
33
|
-
const prefix = useTestIdPrefix();
|
|
34
|
-
const buttonTestId = prefix ? joinTestId(prefix, 'filter-button') : undefined;
|
|
35
|
-
return (jsx(Button, { "aria-label": label, onPress: onPress, "data-testid": buttonTestId, className: cx('flex size-9 cursor-pointer items-center justify-center rounded-lg border border-primary bg-primary shadow-xs transition duration-100 ease-linear hover:bg-primary_hover', className), children: jsx(Icon, { className: "size-5 text-fg-quaternary" }) }));
|
|
36
|
-
};
|
|
37
23
|
/**
|
|
38
|
-
* Arranges filter controls
|
|
39
|
-
*
|
|
24
|
+
* Arranges filter controls and their actions into a responsive horizontal bar. Compose
|
|
25
|
+
* `FilterBar.Content` and `FilterBar.Actions` inside `FilterBar.Root`, with `FilterDropdown` in `Actions`.
|
|
40
26
|
*
|
|
41
27
|
* @summary responsive bar of filter controls and actions
|
|
42
28
|
*/
|
|
@@ -44,8 +30,6 @@ const FilterBar = {
|
|
|
44
30
|
Root: FilterBarRoot,
|
|
45
31
|
Content: FilterBarContent,
|
|
46
32
|
Actions: FilterBarActions,
|
|
47
|
-
FilterRow,
|
|
48
|
-
FilterIconButton,
|
|
49
33
|
};
|
|
50
34
|
|
|
51
35
|
export { FilterBar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/FilterBar/index.tsx"],"sourcesContent":[null],"names":["_jsx"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/FilterBar/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAmBA;AACA,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAsB,KAAI;AACzG,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAE3G,QACEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,aAAA,EAAe,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,EAAA,QAAA,EAChG,QAAQ,EAAA,CACL,EAAA,CACS;AAErB,CAAC;AAOD;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AACpF,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAChC,IAAA,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS;AAExE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,iBAAe,aAAa,EAAE,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,YAClH,QAAQ,EAAA,CACL;AAEV,CAAC;AAOD;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AACpF,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAChC,IAAA,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS;AAExE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,iBAAe,aAAa,EAAE,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,YACrG,QAAQ,EAAA,CACL;AAEV,CAAC;AAED;;;;;AAKG;AACI,MAAM,SAAS,GAAG;AACvB,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,OAAO,EAAE,gBAAgB;;;"}
|
|
@@ -34,7 +34,7 @@ const PageHeader = ({ title, description, breadcrumbs, actions, tabs, selectedTa
|
|
|
34
34
|
};
|
|
35
35
|
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: pageHeaderTestId, children: jsxRuntime.jsxs("div", { "data-testid": pageHeaderTestId, className: cx.cx('flex w-full flex-col gap-4', className), children: [breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { divider: "slash", className: "max-lg:hidden", children: breadcrumbs.map((crumb) => (jsxRuntime.jsx(Breadcrumbs.Breadcrumbs.Item, {
|
|
36
36
|
// Pin the segment to the label so an icon-only crumb keeps `--item-<label>` rather than falling back to its href.
|
|
37
|
-
id: crumb.id ?? testIdUtils.slugifyTestId(crumb.label), href: crumb.href, icon: crumb.icon, "aria-label": crumb.hideLabel ? crumb.label : undefined, children: crumb.hideLabel ? undefined : crumb.label }, crumb.id ?? crumb.label))) })), backCrumb?.href && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backCrumb.href, color: "link-gray", size: "sm", iconLeading: uiIcons.ArrowLeft, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'back'), children: backCrumb.label }) })), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-start lg:gap-x-4 lg:gap-y-5", children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:min-w-80", children: [jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary lg:text-display-xs", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex flex-
|
|
37
|
+
id: crumb.id ?? testIdUtils.slugifyTestId(crumb.label), href: crumb.href, icon: crumb.icon, "aria-label": crumb.hideLabel ? crumb.label : undefined, children: crumb.hideLabel ? undefined : crumb.label }, crumb.id ?? crumb.label))) })), backCrumb?.href && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backCrumb.href, color: "link-gray", size: "sm", iconLeading: uiIcons.ArrowLeft, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'back'), children: backCrumb.label }) })), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-start lg:gap-x-4 lg:gap-y-5", children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:min-w-80", children: [jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary lg:text-display-xs", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-3", children: actions })] }), hasTabs && tabs && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PageHeaderTabNav.PageHeaderTabNav, { className: "max-lg:hidden", tabs: tabs, selectedTab: resolvedSelectedTab, onSelect: selectTab, "aria-label": title, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'tabs') }), jsxRuntime.jsx(Select.Select, { className: "w-full lg:hidden", size: "md", "aria-label": title, value: resolvedSelectedTab, onChange: (key) => key !== null && selectTab(String(key)), "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'tabs-select'), children: tabs.map((tab) => (jsxRuntime.jsx(Select.Select.Item, { id: tab.id, label: tab.label, isDisabled: tab.isDisabled }, tab.id))) })] })), withDivider && !hasTabs && jsxRuntime.jsx(Divider.Divider, {})] }) }));
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
exports.PageHeader = PageHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useState","_jsx","TestIdProvider","_jsxs","cx","Breadcrumbs","slugifyTestId","Button","ArrowLeft","joinTestId","PageHeaderTabNav","Select","Divider"],"mappings":";;;;;;;;;;;;;AAqFA;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,WAAW,EACX,WAAW,EACX,OAAO,EACP,IAAI,EACJ,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAI;AACpB,IAAA,MAAM,gBAAgB,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;IACnH,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;IACrC,MAAM,SAAS,GAAG;AAChB,UAAE,KAAK,CAAC,CAAC,EAAE,EAAE;AACZ,SAAA,OAAO;SACP,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC;;IAG9B,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAGC,cAAQ,CAAqB,kBAAkB,CAAC;AACtG,IAAA,MAAM,mBAAmB,GAAG,WAAW,IAAI,mBAAmB,IAAI,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE;AACrF,IAAA,MAAM,SAAS,GAAG,CAAC,EAAU,KAAI;QAC/B,sBAAsB,CAAC,EAAE,CAAC;AAC1B,QAAA,WAAW,GAAG,EAAE,CAAC;AACnB,IAAA,CAAC;IAED,QACEC,cAAA,CAACC,0BAAc,EAAA,EAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACrCC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,gBAAgB,EAAE,SAAS,EAAEC,KAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,aACvF,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,KACpCH,cAAA,CAACI,uBAAW,EAAA,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,EAAA,QAAA,EACnD,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,MACrBJ,cAAA,CAACI,uBAAW,CAAC,IAAI,EAAA;;AAGf,wBAAA,EAAE,EAAE,KAAK,CAAC,EAAE,IAAIC,yBAAa,CAAC,KAAK,CAAC,KAAK,CAAC,EAC1C,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAAA,YAAA,EACJ,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,SAAS,EAAA,QAAA,EAEpD,KAAK,CAAC,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,KAAK,EAAA,EAPrC,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,KAAK,CAQX,CACpB,CAAC,EAAA,CACU,CACf,EAEA,SAAS,EAAE,IAAI,KACdL,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,eAACM,aAAM,EAAA,EAAC,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAEC,iBAAS,EAAA,aAAA,EAAeC,sBAAU,CAAC,gBAAgB,EAAE,MAAM,CAAC,YAChI,SAAS,CAAC,KAAK,EAAA,CACT,EAAA,CACL,CACP,EAEDN,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mFAAmF,EAAA,QAAA,EAAA,CAChGA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC/DF,uBAAI,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACjF,WAAW,IAAIA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,CAAA,EAAA,CAClE,EAEL,OAAO,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useState","_jsx","TestIdProvider","_jsxs","cx","Breadcrumbs","slugifyTestId","Button","ArrowLeft","joinTestId","PageHeaderTabNav","Select","Divider"],"mappings":"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"}
|
|
@@ -44,8 +44,8 @@ export interface PageHeaderProps {
|
|
|
44
44
|
breadcrumbs?: PageHeaderBreadcrumb[];
|
|
45
45
|
/**
|
|
46
46
|
* Action buttons rendered to the right of the title on desktop and beneath it on
|
|
47
|
-
* mobile. Compose them primary-last (e.g. icon button,
|
|
48
|
-
*
|
|
47
|
+
* mobile, in DOM order at every width. Compose them primary-last (e.g. icon button,
|
|
48
|
+
* secondary, primary), as in the design.
|
|
49
49
|
*/
|
|
50
50
|
actions?: ReactNode;
|
|
51
51
|
/**
|
|
@@ -32,7 +32,7 @@ const PageHeader = ({ title, description, breadcrumbs, actions, tabs, selectedTa
|
|
|
32
32
|
};
|
|
33
33
|
return (jsx(TestIdProvider, { value: pageHeaderTestId, children: jsxs("div", { "data-testid": pageHeaderTestId, className: cx('flex w-full flex-col gap-4', className), children: [breadcrumbs && breadcrumbs.length > 0 && (jsx(Breadcrumbs, { divider: "slash", className: "max-lg:hidden", children: breadcrumbs.map((crumb) => (jsx(Breadcrumbs.Item, {
|
|
34
34
|
// Pin the segment to the label so an icon-only crumb keeps `--item-<label>` rather than falling back to its href.
|
|
35
|
-
id: crumb.id ?? slugifyTestId(crumb.label), href: crumb.href, icon: crumb.icon, "aria-label": crumb.hideLabel ? crumb.label : undefined, children: crumb.hideLabel ? undefined : crumb.label }, crumb.id ?? crumb.label))) })), backCrumb?.href && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backCrumb.href, color: "link-gray", size: "sm", iconLeading: ArrowLeft, "data-testid": joinTestId(pageHeaderTestId, 'back'), children: backCrumb.label }) })), jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-start lg:gap-x-4 lg:gap-y-5", children: [jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:min-w-80", children: [jsx("h1", { className: "text-xl font-semibold text-primary lg:text-display-xs", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex flex-
|
|
35
|
+
id: crumb.id ?? slugifyTestId(crumb.label), href: crumb.href, icon: crumb.icon, "aria-label": crumb.hideLabel ? crumb.label : undefined, children: crumb.hideLabel ? undefined : crumb.label }, crumb.id ?? crumb.label))) })), backCrumb?.href && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backCrumb.href, color: "link-gray", size: "sm", iconLeading: ArrowLeft, "data-testid": joinTestId(pageHeaderTestId, 'back'), children: backCrumb.label }) })), jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-start lg:gap-x-4 lg:gap-y-5", children: [jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:min-w-80", children: [jsx("h1", { className: "text-xl font-semibold text-primary lg:text-display-xs", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex flex-wrap items-center gap-3", children: actions })] }), hasTabs && tabs && (jsxs(Fragment, { children: [jsx(PageHeaderTabNav, { className: "max-lg:hidden", tabs: tabs, selectedTab: resolvedSelectedTab, onSelect: selectTab, "aria-label": title, "data-testid": joinTestId(pageHeaderTestId, 'tabs') }), jsx(Select, { className: "w-full lg:hidden", size: "md", "aria-label": title, value: resolvedSelectedTab, onChange: (key) => key !== null && selectTab(String(key)), "data-testid": joinTestId(pageHeaderTestId, 'tabs-select'), children: tabs.map((tab) => (jsx(Select.Item, { id: tab.id, label: tab.label, isDisabled: tab.isDisabled }, tab.id))) })] })), withDivider && !hasTabs && jsx(Divider, {})] }) }));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
export { PageHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -12,16 +12,21 @@ var React = require('react');
|
|
|
12
12
|
var reactAriaComponents = require('react-aria-components');
|
|
13
13
|
|
|
14
14
|
/** Row actions menu behind a dots button with fixed Edit, Copy link and Delete items, for use in a table's last column. */
|
|
15
|
-
const TableRowActionsDropdown = () => (jsxRuntime.jsxs(Dropdown.Dropdown.Root, { children: [jsxRuntime.jsx(Dropdown.Dropdown.DotsButton, {}), jsxRuntime.jsx(Dropdown.Dropdown.Popover, { className: "w-min", children: jsxRuntime.jsxs(Dropdown.Dropdown.Menu, { children: [jsxRuntime.jsx(Dropdown.Dropdown.Item, { icon: uiIcons.Edit01, children: jsxRuntime.jsx("span", { className: "pr-4", children: "Edit" }) }), jsxRuntime.jsx(Dropdown.Dropdown.Item, { icon: uiIcons.Copy01, children: jsxRuntime.jsx("span", { className: "pr-4", children: "Copy link" }) }), jsxRuntime.jsx(Dropdown.Dropdown.Item, { icon: uiIcons.Trash01, children: jsxRuntime.jsx("span", { className: "pr-4", children: "Delete" }) })] }) })] }));
|
|
15
|
+
const TableRowActionsDropdown = () => (jsxRuntime.jsxs(Dropdown.Dropdown.Root, { children: [jsxRuntime.jsx(Dropdown.Dropdown.DotsButton, { color: "tertiary" }), jsxRuntime.jsx(Dropdown.Dropdown.Popover, { className: "w-min", children: jsxRuntime.jsxs(Dropdown.Dropdown.Menu, { children: [jsxRuntime.jsx(Dropdown.Dropdown.Item, { icon: uiIcons.Edit01, children: jsxRuntime.jsx("span", { className: "pr-4", children: "Edit" }) }), jsxRuntime.jsx(Dropdown.Dropdown.Item, { icon: uiIcons.Copy01, children: jsxRuntime.jsx("span", { className: "pr-4", children: "Copy link" }) }), jsxRuntime.jsx(Dropdown.Dropdown.Item, { icon: uiIcons.Trash01, children: jsxRuntime.jsx("span", { className: "pr-4", children: "Delete" }) })] }) })] }));
|
|
16
16
|
const TableContext = React.createContext({ size: 'md' });
|
|
17
|
+
/** Bordered card around a `Table` and its optional `Pagination`; sets the `size` every child inherits. */
|
|
17
18
|
const TableCardRoot = ({ children, className, size = 'md', ...props }) => {
|
|
18
19
|
return (jsxRuntime.jsx(TableContext.Provider, { value: { size }, children: jsxRuntime.jsx("div", { ...props, className: cx.cx('overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary', className), children: children }) }));
|
|
19
20
|
};
|
|
21
|
+
/** Titled header for a table embedded in a dashboard or panel; page-level tables use `PageHeader` instead. */
|
|
20
22
|
const TableCardHeader = ({ title, badge, description, contentTrailing, className }) => {
|
|
21
23
|
const { size } = React.useContext(TableContext);
|
|
22
24
|
return (jsxRuntime.jsxs("div", { className: cx.cx('relative flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row', size === 'sm' ? 'py-4 md:px-5' : 'py-5 md:px-6', className), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("h2", { className: "text-md font-semibold text-primary", children: title }), badge ? (React.isValidElement(badge) ? (badge) : (jsxRuntime.jsx(Badge.Badge, { color: "gray", size: "sm", type: "modern", children: badge }))) : null] }), description && jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: description })] }), contentTrailing] }));
|
|
23
25
|
};
|
|
24
|
-
const TableRoot = ({ className, size
|
|
26
|
+
const TableRoot = ({ className, size: sizeProp, 'data-testid': dataTestId, ...props }) => {
|
|
27
|
+
// Re-providing the context would otherwise reset a card-level `size` back to `md`.
|
|
28
|
+
const inherited = React.useContext(TableContext);
|
|
29
|
+
const size = sizeProp ?? inherited.size;
|
|
25
30
|
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'table', rootName: 'table' });
|
|
26
31
|
return (jsxRuntime.jsx(TableContext.Provider, { value: { size, testIdPrefix: rootTestId }, children: jsxRuntime.jsx("div", { className: "overflow-x-auto", children: jsxRuntime.jsx(reactAriaComponents.Table, { "data-testid": rootTestId, className: (state) => cx.cx('w-full overflow-x-hidden', typeof className === 'function' ? className(state) : className), ...props }) }) }));
|
|
27
32
|
};
|
|
@@ -68,8 +73,8 @@ const TableCard = {
|
|
|
68
73
|
};
|
|
69
74
|
/**
|
|
70
75
|
* Displays structured data in rows and columns with selection, sorting and keyboard
|
|
71
|
-
* navigation.
|
|
72
|
-
* `
|
|
76
|
+
* navigation. Wrap it in `TableCard.Root` for the bordered card; on a page the title comes
|
|
77
|
+
* from `PageHeader` and search or filters from a `FilterBar` above the card.
|
|
73
78
|
*
|
|
74
79
|
* @summary data table with selection, sorting and keyboard navigation
|
|
75
80
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/Table/index.tsx"],"sourcesContent":[null],"names":["_jsxs","Dropdown","_jsx","Edit01","Copy01","Trash01","createContext","cx","useContext","isValidElement","Badge","useResolvedTestId","AriaTable","useTableOptions","AriaTableHeader","AriaColumn","Checkbox","AriaCollection","joinTestId","slugifyTestId","AriaGroup","Tooltip","TooltipTrigger","HelpCircle","ArrowDown","ChevronSelectorVertical","AriaRow","AriaCell","AriaTableBody"],"mappings":";;;;;;;;;;;;;AA8BA;AACO,MAAM,uBAAuB,GAAG,OACrCA,eAAA,CAACC,iBAAQ,CAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/Table/index.tsx"],"sourcesContent":[null],"names":["_jsxs","Dropdown","_jsx","Edit01","Copy01","Trash01","createContext","cx","useContext","isValidElement","Badge","useResolvedTestId","AriaTable","useTableOptions","AriaTableHeader","AriaColumn","Checkbox","AriaCollection","joinTestId","slugifyTestId","AriaGroup","Tooltip","TooltipTrigger","HelpCircle","ArrowDown","ChevronSelectorVertical","AriaRow","AriaCell","AriaTableBody"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ interface TableCardHeaderProps {
|
|
|
16
16
|
className?: string;
|
|
17
17
|
}
|
|
18
18
|
interface TableRootProps extends AriaTableProps, Omit<ComponentPropsWithRef<'table'>, 'className' | 'slot' | 'style'> {
|
|
19
|
-
/** Row height and cell padding for every header, row and cell, unless one sets its own `size`. */
|
|
19
|
+
/** Row height and cell padding for every header, row and cell, unless one sets its own `size`. Inherits from `TableCard.Root`; `md` otherwise. */
|
|
20
20
|
size?: 'sm' | 'md';
|
|
21
21
|
/**
|
|
22
22
|
* Overrides the root `data-testid`. Defaults to `fd-table`. Rows and columns derive
|
|
@@ -25,7 +25,7 @@ interface TableRootProps extends AriaTableProps, Omit<ComponentPropsWithRef<'tab
|
|
|
25
25
|
'data-testid'?: string;
|
|
26
26
|
}
|
|
27
27
|
declare const TableRoot: {
|
|
28
|
-
({ className, size, "data-testid": dataTestId, ...props }: TableRootProps): import("react").JSX.Element;
|
|
28
|
+
({ className, size: sizeProp, "data-testid": dataTestId, ...props }: TableRootProps): import("react").JSX.Element;
|
|
29
29
|
displayName: string;
|
|
30
30
|
};
|
|
31
31
|
interface TableHeaderProps<T extends object> extends AriaTableHeaderProps<T>, Omit<ComponentPropsWithRef<'thead'>, 'children' | 'className' | 'slot' | 'style'> {
|
|
@@ -77,8 +77,8 @@ declare const TableCard: {
|
|
|
77
77
|
};
|
|
78
78
|
/**
|
|
79
79
|
* Displays structured data in rows and columns with selection, sorting and keyboard
|
|
80
|
-
* navigation.
|
|
81
|
-
* `
|
|
80
|
+
* navigation. Wrap it in `TableCard.Root` for the bordered card; on a page the title comes
|
|
81
|
+
* from `PageHeader` and search or filters from a `FilterBar` above the card.
|
|
82
82
|
*
|
|
83
83
|
* @summary data table with selection, sorting and keyboard navigation
|
|
84
84
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Table/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEvH,OAAO,KAAK,EACV,SAAS,IAAI,aAAa,EAC1B,WAAW,IAAI,eAAe,EAC9B,QAAQ,IAAI,YAAY,EACxB,gBAAgB,IAAI,oBAAoB,EACxC,UAAU,IAAI,cAAc,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAOL,SAAS,IAAI,aAAa,EAG3B,MAAM,uBAAuB,CAAC;AAE/B,2HAA2H;AAC3H,eAAO,MAAM,uBAAuB,mCAkBnC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Table/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,16 +10,21 @@ import { createContext, useContext, isValidElement } from 'react';
|
|
|
10
10
|
import { Table as Table$1, TableBody, useTableOptions, TableHeader as TableHeader$1, Column, Collection, Group, Row, Cell } from 'react-aria-components';
|
|
11
11
|
|
|
12
12
|
/** Row actions menu behind a dots button with fixed Edit, Copy link and Delete items, for use in a table's last column. */
|
|
13
|
-
const TableRowActionsDropdown = () => (jsxs(Dropdown.Root, { children: [jsx(Dropdown.DotsButton, {}), jsx(Dropdown.Popover, { className: "w-min", children: jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { icon: Edit01, children: jsx("span", { className: "pr-4", children: "Edit" }) }), jsx(Dropdown.Item, { icon: Copy01, children: jsx("span", { className: "pr-4", children: "Copy link" }) }), jsx(Dropdown.Item, { icon: Trash01, children: jsx("span", { className: "pr-4", children: "Delete" }) })] }) })] }));
|
|
13
|
+
const TableRowActionsDropdown = () => (jsxs(Dropdown.Root, { children: [jsx(Dropdown.DotsButton, { color: "tertiary" }), jsx(Dropdown.Popover, { className: "w-min", children: jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { icon: Edit01, children: jsx("span", { className: "pr-4", children: "Edit" }) }), jsx(Dropdown.Item, { icon: Copy01, children: jsx("span", { className: "pr-4", children: "Copy link" }) }), jsx(Dropdown.Item, { icon: Trash01, children: jsx("span", { className: "pr-4", children: "Delete" }) })] }) })] }));
|
|
14
14
|
const TableContext = createContext({ size: 'md' });
|
|
15
|
+
/** Bordered card around a `Table` and its optional `Pagination`; sets the `size` every child inherits. */
|
|
15
16
|
const TableCardRoot = ({ children, className, size = 'md', ...props }) => {
|
|
16
17
|
return (jsx(TableContext.Provider, { value: { size }, children: jsx("div", { ...props, className: cx('overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary', className), children: children }) }));
|
|
17
18
|
};
|
|
19
|
+
/** Titled header for a table embedded in a dashboard or panel; page-level tables use `PageHeader` instead. */
|
|
18
20
|
const TableCardHeader = ({ title, badge, description, contentTrailing, className }) => {
|
|
19
21
|
const { size } = useContext(TableContext);
|
|
20
22
|
return (jsxs("div", { className: cx('relative flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row', size === 'sm' ? 'py-4 md:px-5' : 'py-5 md:px-6', className), children: [jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("h2", { className: "text-md font-semibold text-primary", children: title }), badge ? (isValidElement(badge) ? (badge) : (jsx(Badge, { color: "gray", size: "sm", type: "modern", children: badge }))) : null] }), description && jsx("p", { className: "text-sm text-tertiary", children: description })] }), contentTrailing] }));
|
|
21
23
|
};
|
|
22
|
-
const TableRoot = ({ className, size
|
|
24
|
+
const TableRoot = ({ className, size: sizeProp, 'data-testid': dataTestId, ...props }) => {
|
|
25
|
+
// Re-providing the context would otherwise reset a card-level `size` back to `md`.
|
|
26
|
+
const inherited = useContext(TableContext);
|
|
27
|
+
const size = sizeProp ?? inherited.size;
|
|
23
28
|
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'table', rootName: 'table' });
|
|
24
29
|
return (jsx(TableContext.Provider, { value: { size, testIdPrefix: rootTestId }, children: jsx("div", { className: "overflow-x-auto", children: jsx(Table$1, { "data-testid": rootTestId, className: (state) => cx('w-full overflow-x-hidden', typeof className === 'function' ? className(state) : className), ...props }) }) }));
|
|
25
30
|
};
|
|
@@ -66,8 +71,8 @@ const TableCard = {
|
|
|
66
71
|
};
|
|
67
72
|
/**
|
|
68
73
|
* Displays structured data in rows and columns with selection, sorting and keyboard
|
|
69
|
-
* navigation.
|
|
70
|
-
* `
|
|
74
|
+
* navigation. Wrap it in `TableCard.Root` for the bordered card; on a page the title comes
|
|
75
|
+
* from `PageHeader` and search or filters from a `FilterBar` above the card.
|
|
71
76
|
*
|
|
72
77
|
* @summary data table with selection, sorting and keyboard navigation
|
|
73
78
|
*/
|