@caratlogic/design-system 0.1.36 → 0.1.38
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/Filters/ActiveFilterChips/ActiveFilterChips.d.ts +1 -1
- package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.d.ts.map +1 -1
- package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.d.ts +2 -0
- package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.d.ts.map +1 -1
- package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.d.ts +1 -0
- package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.d.ts.map +1 -1
- package/dist/components/molecules/Filters/Filters.types.d.ts +1 -1
- package/dist/components/molecules/Filters/Filters.types.d.ts.map +1 -1
- package/dist/components/molecules/Filters/PickListFilter/PickListFilter.d.ts.map +1 -1
- package/dist/components/molecules/Filters/PickListFilter/PickListFilter.utils.d.ts +2 -1
- package/dist/components/molecules/Filters/PickListFilter/PickListFilter.utils.d.ts.map +1 -1
- package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.d.ts +2 -2
- package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.d.ts.map +1 -1
- package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.d.ts +4 -1
- package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.d.ts.map +1 -1
- package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.d.ts +2 -0
- package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.d.ts.map +1 -1
- package/dist/components/molecules/Filters/ScaleRangeFilter/index.d.ts +1 -1
- package/dist/components/molecules/Filters/ScaleRangeFilter/index.d.ts.map +1 -1
- package/dist/components/organisms/Filters/FilterField/FilterField.d.ts.map +1 -1
- package/dist/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.d.ts +1 -2
- package/dist/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.d.ts.map +1 -1
- package/dist/components/organisms/Filters/FilterSurface/FilterSurface.d.ts +2 -2
- package/dist/components/organisms/Filters/FilterSurface/FilterSurface.d.ts.map +1 -1
- package/dist/components/organisms/Filters/FilterSurface/FilterSurface.types.d.ts +7 -7
- package/dist/components/organisms/Filters/FilterSurface/FilterSurface.types.d.ts.map +1 -1
- package/dist/index.cjs.js +120 -89
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +120 -89
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,5 +2,5 @@ import type { ReactElement } from 'react';
|
|
|
2
2
|
import type { ActiveFilterChipsProps } from './ActiveFilterChips.types';
|
|
3
3
|
export type { ActiveFilterChip, ActiveFilterChipsProps, ActiveFilterChipsVariant, } from './ActiveFilterChips.types';
|
|
4
4
|
/** Applied filters as removable chips, with an optional Clear all. */
|
|
5
|
-
export declare function ActiveFilterChips({ chips, onRemove, onClearAll, variant, actions, className, }: ActiveFilterChipsProps): ReactElement | null;
|
|
5
|
+
export declare function ActiveFilterChips({ chips, onRemove, onClearAll, variant, actions, collapsible, className, }: ActiveFilterChipsProps): ReactElement | null;
|
|
6
6
|
//# sourceMappingURL=ActiveFilterChips.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveFilterChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ActiveFilterChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,KAAK,EAEV,sBAAsB,EAEvB,MAAM,2BAA2B,CAAC;AASnC,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,2BAA2B,CAAC;AAyFnC,sEAAsE;AACtE,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAkB,EAClB,OAAO,EACP,WAAmB,EACnB,SAAS,GACV,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CA2C9C"}
|
|
@@ -14,6 +14,8 @@ export interface ActiveFilterChipsProps {
|
|
|
14
14
|
variant?: ActiveFilterChipsVariant;
|
|
15
15
|
/** Extra controls, e.g. a "Save search" button; with them, Clear all and the actions sit at the row's right end. */
|
|
16
16
|
actions?: ReactNode;
|
|
17
|
+
/** Keep the chips to one line ending in "+N more" (Clear all stays at the right end); e.g. in a compact header. */
|
|
18
|
+
collapsible?: boolean;
|
|
17
19
|
className?: string;
|
|
18
20
|
}
|
|
19
21
|
//# sourceMappingURL=ActiveFilterChips.types.d.ts.map
|
package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveFilterChips.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sIAAsI;AACtI,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
1
|
+
{"version":3,"file":"ActiveFilterChips.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sIAAsI;AACtI,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mHAAmH;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -3,5 +3,6 @@ import type { ActiveFilterChipsVariant } from './ActiveFilterChips.types';
|
|
|
3
3
|
export declare const CHIP_CLASS = "inline-flex h-7 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2.5 text-xs text-foreground";
|
|
4
4
|
export declare const REMOVE_BUTTON_CLASS = "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-primary/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30";
|
|
5
5
|
export declare const CLEAR_ALL_CLASS: string;
|
|
6
|
+
export declare const SHOW_MORE_CLASS: string;
|
|
6
7
|
export declare function getChipLabelText(label: string, variant: ActiveFilterChipsVariant): string;
|
|
7
8
|
//# sourceMappingURL=ActiveFilterChips.utils.d.ts.map
|
package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveFilterChips.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAE1E,wDAAwD;AACxD,eAAO,MAAM,UAAU,kIAC0G,CAAC;AAElI,eAAO,MAAM,mBAAmB,wNACuL,CAAC;AAExN,eAAO,MAAM,eAAe,QAA0C,CAAC;AAEvE,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAER"}
|
|
1
|
+
{"version":3,"file":"ActiveFilterChips.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAE1E,wDAAwD;AACxD,eAAO,MAAM,UAAU,kIAC0G,CAAC;AAElI,eAAO,MAAM,mBAAmB,wNACuL,CAAC;AAExN,eAAO,MAAM,eAAe,QAA0C,CAAC;AAEvE,eAAO,MAAM,eAAe,QAG3B,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAER"}
|
|
@@ -7,7 +7,7 @@ export interface FilterFieldOption {
|
|
|
7
7
|
content?: ReactNode;
|
|
8
8
|
/** Colour hex from settings, rendered as a swatch (e.g. product colours). */
|
|
9
9
|
swatch?: string;
|
|
10
|
-
/** Secondary text
|
|
10
|
+
/** Secondary text under the label in a list row (e.g. a location's type). */
|
|
11
11
|
hint?: string;
|
|
12
12
|
/** Matching-item count shown beside the option. */
|
|
13
13
|
count?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filters.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Filters/Filters.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,
|
|
1
|
+
{"version":3,"file":"Filters.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Filters/Filters.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,gGAAgG;AAChG,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5E,mHAAmH;AACnH,2GAA2G;AAC3G,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,GACX,gBAAgB,CAAC;AAErB,oHAAoH;AACpH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,UAAU,GACV,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,eAAe,CAAA;CAAE,GACzC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,cAAc,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,2BAA2B,GACnC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAAA;CAAE,GACjD;IAAE,EAAE,EAAE,KAAK,CAAA;CAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickListFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AA8BjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,wBAAwB,CAAC;AAsBhC,qHAAqH;AACrH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAe,EACf,iBAAiB,EACjB,gBAAwB,EACxB,OAAW,EACX,IAAY,EACZ,aAAa,EACb,MAAc,GACf,EAAE,mBAAmB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"PickListFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AA8BjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,wBAAwB,CAAC;AAsBhC,qHAAqH;AACrH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAe,EACf,iBAAiB,EACjB,gBAAwB,EACxB,OAAW,EACX,IAAY,EACZ,aAAa,EACb,MAAc,GACf,EAAE,mBAAmB,GAAG,YAAY,CAwLpC"}
|
|
@@ -15,11 +15,12 @@ export declare const FILL_WRAPPER_CLASS_NAME = "flex min-h-0 flex-1 flex-col";
|
|
|
15
15
|
export declare const LIST_COLUMN_MIN_WIDTH = "10rem";
|
|
16
16
|
export declare const getOptionsScrollClassName: (fill: boolean) => string;
|
|
17
17
|
export declare const LIST_ROW_CLASS_NAME: string;
|
|
18
|
-
/**
|
|
18
|
+
/** Light outlined pill (like the picked-value chips) on plain and lightly selected options; `solid` keeps it readable on a filled one. */
|
|
19
19
|
export type CountBadgeTone = 'neutral' | 'tinted' | 'solid';
|
|
20
20
|
/** How many items carry the option, as a small round badge at the right. */
|
|
21
21
|
export declare const getCountBadgeClassName: (tone: CountBadgeTone) => string;
|
|
22
22
|
export declare const COUNT_BADGE_CLASS_NAME: string;
|
|
23
|
+
/** Plain digits (no thousands separators), so the badge stays compact. */
|
|
23
24
|
export declare const formatOptionCount: (count: number) => string;
|
|
24
25
|
/** Picking a value: a single-choice list replaces (or clears) it, a multi-choice list toggles it. */
|
|
25
26
|
export declare const pickValue: (values: readonly string[], value: string, single: boolean) => string[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickListFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,gBAAgB,EAEjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,MAAM,GACZ,iBAAiB,EAAE,CAMrB;AAED,eAAO,MAAM,gBAAgB,yBAAmB,CAAC;AAEjD,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,UAAQ,GAAG,MAAM,CAQ5E;AAED,mFAAmF;AACnF,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,gFAAgF;AAChF,eAAO,MAAM,yBAAyB,6BAA6B,CAAC;AAEpE,iIAAiI;AACjI,eAAO,MAAM,uBAAuB,4CACO,CAAC;AAC5C,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,UAAU,CAAC;AAE7C,eAAO,MAAM,yBAAyB,GAAI,MAAM,OAAO,KAAG,MACE,CAAC;AAE7D,eAAO,MAAM,mBAAmB,QAA0B,CAAC;AAE3D,
|
|
1
|
+
{"version":3,"file":"PickListFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,gBAAgB,EAEjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,MAAM,GACZ,iBAAiB,EAAE,CAMrB;AAED,eAAO,MAAM,gBAAgB,yBAAmB,CAAC;AAEjD,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,UAAQ,GAAG,MAAM,CAQ5E;AAED,mFAAmF;AACnF,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,gFAAgF;AAChF,eAAO,MAAM,yBAAyB,6BAA6B,CAAC;AAEpE,iIAAiI;AACjI,eAAO,MAAM,uBAAuB,4CACO,CAAC;AAC5C,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,UAAU,CAAC;AAE7C,eAAO,MAAM,yBAAyB,GAAI,MAAM,OAAO,KAAG,MACE,CAAC;AAE7D,eAAO,MAAM,mBAAmB,QAA0B,CAAC;AAE3D,0IAA0I;AAC1I,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAS5D,4EAA4E;AAC5E,eAAO,MAAM,sBAAsB,GAAI,MAAM,cAAc,KAAG,MAI3D,CAAC;AAEJ,eAAO,MAAM,sBAAsB,QAAoC,CAAC;AAExE,0EAA0E;AAC1E,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,MAAuB,CAAC;AAE1E,qGAAqG;AACrG,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,MAAM,EAAE,EACzB,OAAO,MAAM,EACb,QAAQ,OAAO,KACd,MAAM,EAGR,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,oDACiB,CAAC;AAEpD,2FAA2F;AAC3F,eAAO,MAAM,wBAAwB,oGAC8D,CAAC;AAEpG,eAAO,MAAM,qBAAqB,yJAA+B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactElement } from 'react';
|
|
2
2
|
import type { ScaleRangeFilterProps } from './ScaleRangeFilter.types';
|
|
3
|
-
export type { ScaleRangeFilterProps, ScalePosition, } from './ScaleRangeFilter.types';
|
|
3
|
+
export type { ScaleLayout, ScaleRangeFilterProps, ScalePosition, } from './ScaleRangeFilter.types';
|
|
4
4
|
/** Ordered-scale filter: click a start option, then an end option. */
|
|
5
|
-
export declare function ScaleRangeFilter({ options, value, onChange, ariaLabel, columns, fill, }: ScaleRangeFilterProps): ReactElement;
|
|
5
|
+
export declare function ScaleRangeFilter({ options, value, onChange, ariaLabel, layout, columns, fill, }: ScaleRangeFilterProps): ReactElement;
|
|
6
6
|
//# sourceMappingURL=ScaleRangeFilter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScaleRangeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ScaleRangeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAc1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,YAAY,EACV,WAAW,EACX,qBAAqB,EACrB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAElC,sEAAsE;AACtE,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAgB,EAChB,OAAO,EACP,IAAY,GACb,EAAE,qBAAqB,GAAG,YAAY,CAyEtC"}
|
|
@@ -5,11 +5,14 @@ export interface ScaleRangeFilterProps {
|
|
|
5
5
|
value?: ScaleRangeValue;
|
|
6
6
|
onChange: (value: ScaleRangeValue | undefined) => void;
|
|
7
7
|
ariaLabel: string;
|
|
8
|
-
/**
|
|
8
|
+
/** `pills` (default) wrap like the other ≤4-option pick lists; `tiles` is a grid of boxes. */
|
|
9
|
+
layout?: ScaleLayout;
|
|
10
|
+
/** Tiles only: fixed column count; omit to fit as many tiles as the width allows. */
|
|
9
11
|
columns?: number;
|
|
10
12
|
/** Larger tiles, for a roomy card; the compact size suits popovers. */
|
|
11
13
|
fill?: boolean;
|
|
12
14
|
}
|
|
15
|
+
export type ScaleLayout = 'pills' | 'tiles';
|
|
13
16
|
/** Where an option sits relative to the selected range. */
|
|
14
17
|
export type ScalePosition = 'end' | 'between' | 'outside';
|
|
15
18
|
export interface UseScaleRangeFilterArgs {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScaleRangeFilter.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,
|
|
1
|
+
{"version":3,"file":"ScaleRangeFilter.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5C,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC"}
|
|
@@ -4,6 +4,8 @@ import type { CountBadgeTone } from '../PickListFilter/PickListFilter.utils';
|
|
|
4
4
|
export declare function getScalePosition(options: readonly FilterFieldOption[], value: ScaleRangeValue | undefined, option: string): ScalePosition;
|
|
5
5
|
/** Next range after clicking `scale`: a fresh single-option range, or the end of the pending one. */
|
|
6
6
|
export declare function getNextScaleRange(anchor: string | null, option: string): ScaleRangeValue;
|
|
7
|
+
/** A pill like the other pick lists' (`Single`, `Parcel`), coloured by where it sits in the range. */
|
|
8
|
+
export declare const getScalePillClassName: (position: ScalePosition) => string;
|
|
7
9
|
export declare function getScaleButtonClassName(position: ScalePosition, fill?: boolean, hasCount?: boolean): string;
|
|
8
10
|
/** The count badge follows the tile: plain, tinted inside the range, solid on an end. */
|
|
9
11
|
export declare const getScaleCountTone: (position: ScalePosition) => CountBadgeTone;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScaleRangeFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE7E,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,eAAe,GAAG,SAAS,EAClC,MAAM,EAAE,MAAM,GACb,aAAa,CAMf;AAED,qGAAqG;AACrG,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,MAAM,EAAE,MAAM,GACb,eAAe,CAIjB;
|
|
1
|
+
{"version":3,"file":"ScaleRangeFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE7E,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,eAAe,GAAG,SAAS,EAClC,MAAM,EAAE,MAAM,GACb,aAAa,CAMf;AAED,qGAAqG;AACrG,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,MAAM,EAAE,MAAM,GACb,eAAe,CAIjB;AASD,sGAAsG;AACtG,eAAO,MAAM,qBAAqB,GAAI,UAAU,aAAa,KAAG,MAK7D,CAAC;AAEJ,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,EACvB,IAAI,UAAQ,EACZ,QAAQ,UAAQ,GACf,MAAM,CASR;AAED,yFAAyF;AACzF,eAAO,MAAM,iBAAiB,GAAI,UAAU,aAAa,KAAG,cACkB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,WAAW,EACX,qBAAqB,EACrB,aAAa,GACd,MAAM,oBAAoB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterField.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterField/FilterField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAc1C,OAAO,KAAK,EACV,oBAAoB,EAEpB,uBAAuB,EACvB,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAsB7B,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,iIAAiI;AACjI,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"FilterField.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterField/FilterField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAc1C,OAAO,KAAK,EACV,oBAAoB,EAEpB,uBAAuB,EACvB,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAsB7B,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,iIAAiI;AACjI,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,GAAG,YAAY,CAiGxC;AAED,kHAAkH;AAClH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,SAAS,GACV,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG,YAAY,CAwD/C;AAED,yJAAyJ;AACzJ,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,MAAM,EACN,SAAS,EACT,IAAI,GACL,EAAE,oBAAoB,GAAG,YAAY,CAoCrC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAOjE"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/** Leaves without applying; the draft is discarded. */
|
|
2
2
|
export declare const BACK_LABEL = "Back without applying";
|
|
3
|
-
export declare const CLOSE_LABEL = "Close without applying";
|
|
4
3
|
export declare const LOADING_LABEL = "Loading filters";
|
|
5
4
|
export declare const ERROR_TITLE = "Couldn't load filters";
|
|
6
5
|
export declare const DEFAULT_ERROR_MESSAGE = "Something went wrong while loading the filters. Check your connection and try again.";
|
package/dist/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterSurface.accessibility.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"FilterSurface.accessibility.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,eAAO,MAAM,UAAU,0BAA0B,CAAC;AAElD,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAC/C,eAAO,MAAM,WAAW,0BAA0B,CAAC;AACnD,eAAO,MAAM,qBAAqB,yFACsD,CAAC;AACzF,eAAO,MAAM,WAAW,cAAc,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type ReactElement } from 'react';
|
|
2
2
|
import type { FilterSurfaceGroupProps, FilterSurfaceMoreProps, FilterSurfaceProps } from './FilterSurface.types';
|
|
3
3
|
export type { FilterSurfaceGroupProps, FilterSurfaceMoreProps, FilterSurfaceProps, FilterSurfaceStatus, } from './FilterSurface.types';
|
|
4
|
-
/** Full-page filter screen (e.g. an advanced search): header, scrolling card grid
|
|
5
|
-
export declare function FilterSurface({ title, headerActions,
|
|
4
|
+
/** Full-page filter screen (e.g. an advanced search): one sticky header with every action, then the scrolling card grid. */
|
|
5
|
+
export declare function FilterSurface({ title, headerActions, primaryActions, chips, onClose, status, errorMessage, onRetry, skeleton, children, }: FilterSurfaceProps): ReactElement;
|
|
6
6
|
export declare function FilterSurfaceGroup({ title, masonry, className, children, }: FilterSurfaceGroupProps): ReactElement;
|
|
7
7
|
/** Collapsed "More filters" divider that reveals extra cards. */
|
|
8
8
|
export declare function FilterSurfaceMore({ label, defaultExpanded, children, }: FilterSurfaceMoreProps): ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterSurface.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterSurface.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAepD,OAAO,KAAK,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B,4HAA4H;AAC5H,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAa,EACb,cAAc,EACd,KAAK,EACL,OAAO,EACP,MAAgB,EAChB,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,GAAG,YAAY,CA2CnC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAwBxC;AAED,iEAAiE;AACjE,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,eAAe,EACf,QAAQ,GACT,EAAE,sBAAsB,GAAG,YAAY,CA0BvC"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
export interface FilterSurfaceProps {
|
|
3
3
|
title: string;
|
|
4
|
-
/**
|
|
4
|
+
/** Secondary header actions, e.g. Saved searches. */
|
|
5
5
|
headerActions?: ReactNode;
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
|
|
10
|
-
/**
|
|
6
|
+
/** The header's right end, e.g. the solid "Show 37 gems". */
|
|
7
|
+
primaryActions?: ReactNode;
|
|
8
|
+
/** Fills the header between the back arrow and the actions, e.g. the "Filtered by" chips with Clear all. */
|
|
9
|
+
chips?: ReactNode;
|
|
10
|
+
/** The back arrow and Escape leave without applying. */
|
|
11
11
|
onClose: () => void;
|
|
12
|
-
/** `loading` shows skeleton cards and `error` an error panel in place of the cards; the
|
|
12
|
+
/** `loading` shows skeleton cards and `error` an error panel in place of the cards; the primary actions and chips show only when `ready`. */
|
|
13
13
|
status?: FilterSurfaceStatus;
|
|
14
14
|
/** Error panel text. Default explains the filters couldn't load. */
|
|
15
15
|
errorMessage?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterSurface.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,
|
|
1
|
+
{"version":3,"file":"FilterSurface.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,4GAA4G;IAC5G,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6IAA6I;IAC7I,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -15737,7 +15737,7 @@ function getOptionRowClassName(selected = false, className) {
|
|
|
15737
15737
|
}
|
|
15738
15738
|
/** A selectable pill (chip options, range presets); one height and shape everywhere. */
|
|
15739
15739
|
function getPillClassName(selected) {
|
|
15740
|
-
return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-
|
|
15740
|
+
return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-sm px-3');
|
|
15741
15741
|
}
|
|
15742
15742
|
/** Search box above a list (pick lists, saved searches); matches the inputs' height and corners. */
|
|
15743
15743
|
const FILTER_SEARCH_BOX_CLASS_NAME = 'flex h-9 items-center gap-2 rounded-md border border-input bg-card px-3 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30';
|
|
@@ -15918,14 +15918,15 @@ const LIST_COLUMN_MIN_WIDTH = '10rem';
|
|
|
15918
15918
|
const getOptionsScrollClassName = (fill) => fill ? OPTIONS_FILL_CLASS_NAME : OPTIONS_SCROLL_CLASS_NAME;
|
|
15919
15919
|
const LIST_ROW_CLASS_NAME = getOptionRowClassName();
|
|
15920
15920
|
const COUNT_BADGE_TONES = {
|
|
15921
|
-
neutral: 'bg-
|
|
15922
|
-
tinted: 'bg-primary/
|
|
15923
|
-
solid: 'bg-primary-foreground/20 text-primary-foreground',
|
|
15921
|
+
neutral: 'border-primary/30 bg-primary/5 text-primary',
|
|
15922
|
+
tinted: 'border-primary/30 bg-primary/5 text-primary',
|
|
15923
|
+
solid: 'border-primary-foreground/60 bg-primary-foreground/20 text-primary-foreground',
|
|
15924
15924
|
};
|
|
15925
15925
|
/** How many items carry the option, as a small round badge at the right. */
|
|
15926
|
-
const getCountBadgeClassName = (tone) => cn('inline-flex h-5 min-w-
|
|
15926
|
+
const getCountBadgeClassName = (tone) => cn('inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border px-1.5 text-xs font-medium tabular-nums', COUNT_BADGE_TONES[tone]);
|
|
15927
15927
|
const COUNT_BADGE_CLASS_NAME = getCountBadgeClassName('neutral');
|
|
15928
|
-
|
|
15928
|
+
/** Plain digits (no thousands separators), so the badge stays compact. */
|
|
15929
|
+
const formatOptionCount = (count) => String(count);
|
|
15929
15930
|
/** Picking a value: a single-choice list replaces (or clears) it, a multi-choice list toggles it. */
|
|
15930
15931
|
const pickValue = (values, value, single) => {
|
|
15931
15932
|
if (!single)
|
|
@@ -15961,7 +15962,7 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
|
|
|
15961
15962
|
});
|
|
15962
15963
|
const radioName = React.useId();
|
|
15963
15964
|
const scrollClassName = getOptionsScrollClassName(fill);
|
|
15964
|
-
//
|
|
15965
|
+
// Two-line rows (label + hint) read best in one column.
|
|
15965
15966
|
const multiColumn = fill && !options.some((option) => option.hint);
|
|
15966
15967
|
const wrapperClassName = fill ? FILL_WRAPPER_CLASS_NAME : undefined;
|
|
15967
15968
|
const toggle = (option) => onChange(pickValue(value, option.value, single));
|
|
@@ -15974,12 +15975,14 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
|
|
|
15974
15975
|
? getGridColumnsStyle(undefined, LIST_COLUMN_MIN_WIDTH)
|
|
15975
15976
|
: undefined, wrapperClassName: wrapperClassName, children: visibleOptions.map((option) => (jsxRuntime.jsxs("label", { className: LIST_ROW_CLASS_NAME, children: [single ? (jsxRuntime.jsx("input", { type: "radio", name: radioName, checked: value.includes(option.value),
|
|
15976
15977
|
// A click on the picked row clears it (radios can't be unticked natively).
|
|
15977
|
-
onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsxRuntime.jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: option.content })) :
|
|
15978
|
+
onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsxRuntime.jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: option.content })) : option.hint ? (
|
|
15979
|
+
// The hint sits under the label so a long name keeps the row's full width.
|
|
15980
|
+
jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), jsxRuntime.jsx(TruncatedLabel, { text: option.hint, className: "text-xs text-muted-foreground" })] })) : (jsxRuntime.jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), jsxRuntime.jsx(OptionSwatch, { color: option.swatch }), option.count !== undefined && (jsxRuntime.jsx("span", { className: COUNT_BADGE_CLASS_NAME, children: formatOptionCount(option.count) }))] }, option.value))) })] }));
|
|
15978
15981
|
}
|
|
15979
15982
|
if (layout === 'tiles') {
|
|
15980
15983
|
return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('grid content-start gap-1.5', scrollClassName), style: getGridColumnsStyle(columns), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getTileClassName(value.includes(option.value), option.count !== undefined), children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));
|
|
15981
15984
|
}
|
|
15982
|
-
return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsxRuntime.jsx(OptionSwatch, { color: option.swatch, round: true }), jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className:
|
|
15985
|
+
return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsxRuntime.jsx(OptionSwatch, { color: option.swatch, round: true }), jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));
|
|
15983
15986
|
}
|
|
15984
15987
|
|
|
15985
15988
|
const TRIGGER_BASE = 'h-9 !w-fit shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] gap-2 text-foreground bg-card hover:bg-muted/40 border border-border rounded-lg text-sm font-medium px-3';
|
|
@@ -38594,6 +38597,70 @@ function fieldTypeIcon(type) {
|
|
|
38594
38597
|
return FIELD_TYPE_ICONS[type] ?? Type;
|
|
38595
38598
|
}
|
|
38596
38599
|
|
|
38600
|
+
const SAVED_SEARCH_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-0 max-w-full items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground';
|
|
38601
|
+
/** Children laid out below the first one's line. */
|
|
38602
|
+
function countWrapped(items) {
|
|
38603
|
+
if (items.length === 0)
|
|
38604
|
+
return 0;
|
|
38605
|
+
const firstTop = items[0].offsetTop;
|
|
38606
|
+
return items.filter((item) => item.offsetTop > firstTop).length;
|
|
38607
|
+
}
|
|
38608
|
+
const getShowMoreLabel = (hiddenCount) => `+${hiddenCount} more`;
|
|
38609
|
+
|
|
38610
|
+
/**
|
|
38611
|
+
* Fits chips on one line with the "+N more" link right after the last one. Renders every chip, counts
|
|
38612
|
+
* how many wrap, then drops chips until the link itself fits; a resize starts the measurement over.
|
|
38613
|
+
*/
|
|
38614
|
+
function useChipOverflow(chips, enabled) {
|
|
38615
|
+
const [list, setList] = React.useState(null);
|
|
38616
|
+
const [expanded, setExpanded] = React.useState(false);
|
|
38617
|
+
const [visibleCount, setVisibleCount] = React.useState(chips.length);
|
|
38618
|
+
const collapsed = enabled && !expanded;
|
|
38619
|
+
const [measuredLength, setMeasuredLength] = React.useState(chips.length);
|
|
38620
|
+
if (measuredLength !== chips.length) {
|
|
38621
|
+
setMeasuredLength(chips.length);
|
|
38622
|
+
setVisibleCount(chips.length);
|
|
38623
|
+
}
|
|
38624
|
+
React.useLayoutEffect(() => {
|
|
38625
|
+
if (!collapsed || !list)
|
|
38626
|
+
return;
|
|
38627
|
+
const items = Array.from(list.children);
|
|
38628
|
+
if (visibleCount >= chips.length) {
|
|
38629
|
+
const wrapped = countWrapped(items);
|
|
38630
|
+
if (wrapped > 0)
|
|
38631
|
+
setVisibleCount(chips.length - wrapped);
|
|
38632
|
+
return;
|
|
38633
|
+
}
|
|
38634
|
+
// The last child is the "+N more" link; if it wrapped, give it one more chip's room.
|
|
38635
|
+
if (countWrapped(items) > 0 && visibleCount > 1)
|
|
38636
|
+
setVisibleCount(visibleCount - 1);
|
|
38637
|
+
}, [collapsed, list, visibleCount, chips.length]);
|
|
38638
|
+
React.useEffect(() => {
|
|
38639
|
+
if (!collapsed || !list)
|
|
38640
|
+
return;
|
|
38641
|
+
let width = list.clientWidth;
|
|
38642
|
+
const observer = new ResizeObserver(() => {
|
|
38643
|
+
if (list.clientWidth === width)
|
|
38644
|
+
return;
|
|
38645
|
+
width = list.clientWidth;
|
|
38646
|
+
setVisibleCount(chips.length);
|
|
38647
|
+
});
|
|
38648
|
+
observer.observe(list);
|
|
38649
|
+
return () => observer.disconnect();
|
|
38650
|
+
}, [collapsed, list, chips.length]);
|
|
38651
|
+
const shown = collapsed ? Math.min(visibleCount, chips.length) : chips.length;
|
|
38652
|
+
return {
|
|
38653
|
+
listRef: React.useCallback((node) => setList(node), []),
|
|
38654
|
+
expanded,
|
|
38655
|
+
toggle: () => {
|
|
38656
|
+
setExpanded((current) => !current);
|
|
38657
|
+
setVisibleCount(chips.length);
|
|
38658
|
+
},
|
|
38659
|
+
visibleChips: chips.slice(0, shown),
|
|
38660
|
+
hiddenCount: chips.length - shown,
|
|
38661
|
+
};
|
|
38662
|
+
}
|
|
38663
|
+
|
|
38597
38664
|
const getRemoveChipLabel = (label) => `Remove ${label} filter`;
|
|
38598
38665
|
const FILTERED_BY_LABEL = 'Filtered by';
|
|
38599
38666
|
|
|
@@ -38601,16 +38668,33 @@ const FILTERED_BY_LABEL = 'Filtered by';
|
|
|
38601
38668
|
const CHIP_CLASS = 'inline-flex h-7 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2.5 text-xs text-foreground';
|
|
38602
38669
|
const REMOVE_BUTTON_CLASS = 'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-primary/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30';
|
|
38603
38670
|
const CLEAR_ALL_CLASS = cn(FILTER_LINK_CLASS_NAME, 'underline');
|
|
38671
|
+
const SHOW_MORE_CLASS = cn(FILTER_LINK_CLASS_NAME, 'whitespace-nowrap px-1 underline underline-offset-2');
|
|
38604
38672
|
function getChipLabelText(label, variant) {
|
|
38605
38673
|
return variant === 'inline' ? `${label}:` : label;
|
|
38606
38674
|
}
|
|
38607
38675
|
|
|
38676
|
+
function Chip({ chip, variant, onRemove }) {
|
|
38677
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "shrink-0 font-semibold", children: getChipLabelText(chip.label, variant) }), jsxRuntime.jsx(TruncatedLabel, { text: chip.value }), onRemove && (jsxRuntime.jsx("button", { type: "button", "aria-label": getRemoveChipLabel(chip.label), onClick: () => onRemove(chip.id), className: REMOVE_BUTTON_CLASS, children: jsxRuntime.jsx(X$2, { "aria-hidden": "true", className: "size-3" }) }))] }));
|
|
38678
|
+
}
|
|
38679
|
+
/** One line of chips ending in "+N more"; Clear all and the actions stay at the right end. */
|
|
38680
|
+
function CollapsibleChips({ chips, onRemove, variant = 'inline', clearAll, actions, className, }) {
|
|
38681
|
+
const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips.map((chip) => chip.id), true);
|
|
38682
|
+
const visible = new Set(visibleChips);
|
|
38683
|
+
return (
|
|
38684
|
+
// Centred, so the label and Clear all line up with buttons beside the row even when the chips wrap.
|
|
38685
|
+
jsxRuntime.jsxs("div", { className: cn('flex items-center gap-1.5', className), children: [variant === 'inline' && (jsxRuntime.jsx("span", { className: "mr-0.5 flex h-7 shrink-0 items-center text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), jsxRuntime.jsxs("ul", { ref: listRef, className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [chips
|
|
38686
|
+
.filter((chip) => visible.has(chip.id))
|
|
38687
|
+
.map((chip) => (jsxRuntime.jsx("li", { className: CHIP_CLASS, children: jsxRuntime.jsx(Chip, { chip: chip, variant: variant, onRemove: onRemove }) }, chip.id))), (expanded || hiddenCount > 0) && (jsxRuntime.jsx("li", { className: "flex h-7 shrink-0 items-center", children: jsxRuntime.jsx("button", { type: "button", "aria-expanded": expanded, onClick: toggle, className: SHOW_MORE_CLASS, children: expanded ? 'Show less' : getShowMoreLabel(hiddenCount) }) }))] }), (clearAll || actions) && (jsxRuntime.jsxs("div", { className: "ml-1.5 flex h-7 shrink-0 items-center gap-3", children: [clearAll, actions] }))] }));
|
|
38688
|
+
}
|
|
38608
38689
|
/** Applied filters as removable chips, with an optional Clear all. */
|
|
38609
|
-
function ActiveFilterChips({ chips, onRemove, onClearAll, variant = 'inline', actions, className, }) {
|
|
38690
|
+
function ActiveFilterChips({ chips, onRemove, onClearAll, variant = 'inline', actions, collapsible = false, className, }) {
|
|
38610
38691
|
if (chips.length === 0)
|
|
38611
38692
|
return null;
|
|
38612
38693
|
const clearAll = onClearAll && (jsxRuntime.jsx("button", { type: "button", onClick: onClearAll, className: CLEAR_ALL_CLASS, children: "Clear all" }));
|
|
38613
|
-
|
|
38694
|
+
if (collapsible) {
|
|
38695
|
+
return (jsxRuntime.jsx(CollapsibleChips, { chips: chips, onRemove: onRemove, variant: variant, clearAll: clearAll, actions: actions, className: className }));
|
|
38696
|
+
}
|
|
38697
|
+
return (jsxRuntime.jsxs("div", { className: cn('flex flex-wrap items-center gap-1.5', className), children: [variant === 'inline' && (jsxRuntime.jsx("span", { className: "mr-0.5 text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), chips.map((chip) => (jsxRuntime.jsx("span", { className: CHIP_CLASS, children: jsxRuntime.jsx(Chip, { chip: chip, variant: variant, onRemove: onRemove }) }, chip.id))), actions ? (
|
|
38614
38698
|
// With actions, Clear all joins them at the row's right end.
|
|
38615
38699
|
jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-3 pl-3", children: [clearAll, actions] })) : (clearAll)] }));
|
|
38616
38700
|
}
|
|
@@ -38812,14 +38896,18 @@ function getNextScaleRange(anchor, option) {
|
|
|
38812
38896
|
? { from: option, to: option }
|
|
38813
38897
|
: { from: anchor, to: option };
|
|
38814
38898
|
}
|
|
38899
|
+
const SCALE_POSITION_CLASS_NAMES = {
|
|
38900
|
+
// Unselected options look exactly like unselected pick-list options.
|
|
38901
|
+
outside: getSelectableOptionClassName(false),
|
|
38902
|
+
end: 'border-primary bg-primary font-medium text-primary-foreground',
|
|
38903
|
+
between: 'border-primary/30 bg-primary/10 font-medium text-primary',
|
|
38904
|
+
};
|
|
38905
|
+
/** A pill like the other pick lists' (`Single`, `Parcel`), coloured by where it sits in the range. */
|
|
38906
|
+
const getScalePillClassName = (position) => cn('inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-sm border px-3 text-xs transition-colors', FILTER_FOCUS_RING, SCALE_POSITION_CLASS_NAMES[position]);
|
|
38815
38907
|
function getScaleButtonClassName(position, fill = false, hasCount = false) {
|
|
38816
38908
|
return cn('flex min-w-0 cursor-pointer items-center gap-2 rounded-md border transition-colors',
|
|
38817
38909
|
// With a count: name left, badge right (like a list row); without: name centred.
|
|
38818
|
-
hasCount ? 'justify-between text-left' : 'justify-center text-center', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING,
|
|
38819
|
-
// Unselected options look exactly like unselected pick-list tiles.
|
|
38820
|
-
position === 'outside' && getSelectableOptionClassName(false), position === 'end' &&
|
|
38821
|
-
'border-primary bg-primary font-medium text-primary-foreground', position === 'between' &&
|
|
38822
|
-
'border-primary/30 bg-primary/10 font-medium text-primary');
|
|
38910
|
+
hasCount ? 'justify-between text-left' : 'justify-center text-center', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING, SCALE_POSITION_CLASS_NAMES[position]);
|
|
38823
38911
|
}
|
|
38824
38912
|
/** The count badge follows the tile: plain, tinted inside the range, solid on an end. */
|
|
38825
38913
|
const getScaleCountTone = (position) => position === 'end' ? 'solid' : position === 'between' ? 'tinted' : 'neutral';
|
|
@@ -38839,8 +38927,14 @@ function useScaleRangeFilter({ value, onChange, }) {
|
|
|
38839
38927
|
}
|
|
38840
38928
|
|
|
38841
38929
|
/** Ordered-scale filter: click a start option, then an end option. */
|
|
38842
|
-
function ScaleRangeFilter({ options, value, onChange, ariaLabel, columns, fill = false, }) {
|
|
38930
|
+
function ScaleRangeFilter({ options, value, onChange, ariaLabel, layout = 'pills', columns, fill = false, }) {
|
|
38843
38931
|
const { selectOption } = useScaleRangeFilter({ value, onChange });
|
|
38932
|
+
if (layout === 'pills') {
|
|
38933
|
+
return (jsxRuntime.jsx("div", { role: "group", "aria-label": ariaLabel, className: "flex flex-wrap content-start gap-1.5", children: options.map((option) => {
|
|
38934
|
+
const position = getScalePosition(options, value, option.value);
|
|
38935
|
+
return (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScalePillClassName(position), children: [jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(getScaleCountTone(position)), children: formatOptionCount(option.count) }))] }, option.value));
|
|
38936
|
+
}) }));
|
|
38937
|
+
}
|
|
38844
38938
|
return (jsxRuntime.jsx("div", { role: "group", "aria-label": ariaLabel, className: fill ? 'grid gap-2' : 'grid gap-1.5', style: getGridColumnsStyle(columns), children: options.map((option) => {
|
|
38845
38939
|
const position = getScalePosition(options, value, option.value);
|
|
38846
38940
|
return (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScaleButtonClassName(position, fill, option.count !== undefined), children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(getScaleCountTone(position)), children: formatOptionCount(option.count) }))] }, option.value));
|
|
@@ -38854,7 +38948,7 @@ const TILE_KEYS = ['a', 'b', 'c', 'd'];
|
|
|
38854
38948
|
const CARD_CLASS_NAME = 'flex h-full min-w-0 flex-col gap-3 rounded-xl border border-border bg-card p-4';
|
|
38855
38949
|
|
|
38856
38950
|
function Pills({ count }) {
|
|
38857
|
-
return (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: PILL_WIDTHS.slice(0, count).map((width) => (jsxRuntime.jsx(SquareSkeleton, { height: 32, width: width, rounded: "
|
|
38951
|
+
return (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: PILL_WIDTHS.slice(0, count).map((width) => (jsxRuntime.jsx(SquareSkeleton, { height: 32, width: width, rounded: "sm" }, width))) }));
|
|
38858
38952
|
}
|
|
38859
38953
|
function Body({ variant, }) {
|
|
38860
38954
|
switch (variant) {
|
|
@@ -39164,70 +39258,6 @@ function TriStateFilter({ value, onChange, ariaLabel, compact = false, }) {
|
|
|
39164
39258
|
}) }));
|
|
39165
39259
|
}
|
|
39166
39260
|
|
|
39167
|
-
const SAVED_SEARCH_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-0 max-w-full items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground';
|
|
39168
|
-
/** Children laid out below the first one's line. */
|
|
39169
|
-
function countWrapped(items) {
|
|
39170
|
-
if (items.length === 0)
|
|
39171
|
-
return 0;
|
|
39172
|
-
const firstTop = items[0].offsetTop;
|
|
39173
|
-
return items.filter((item) => item.offsetTop > firstTop).length;
|
|
39174
|
-
}
|
|
39175
|
-
const getShowMoreLabel = (hiddenCount) => `+${hiddenCount} more`;
|
|
39176
|
-
|
|
39177
|
-
/**
|
|
39178
|
-
* Fits chips on one line with the "+N more" link right after the last one. Renders every chip, counts
|
|
39179
|
-
* how many wrap, then drops chips until the link itself fits; a resize starts the measurement over.
|
|
39180
|
-
*/
|
|
39181
|
-
function useChipOverflow(chips, enabled) {
|
|
39182
|
-
const [list, setList] = React.useState(null);
|
|
39183
|
-
const [expanded, setExpanded] = React.useState(false);
|
|
39184
|
-
const [visibleCount, setVisibleCount] = React.useState(chips.length);
|
|
39185
|
-
const collapsed = enabled && !expanded;
|
|
39186
|
-
const [measuredLength, setMeasuredLength] = React.useState(chips.length);
|
|
39187
|
-
if (measuredLength !== chips.length) {
|
|
39188
|
-
setMeasuredLength(chips.length);
|
|
39189
|
-
setVisibleCount(chips.length);
|
|
39190
|
-
}
|
|
39191
|
-
React.useLayoutEffect(() => {
|
|
39192
|
-
if (!collapsed || !list)
|
|
39193
|
-
return;
|
|
39194
|
-
const items = Array.from(list.children);
|
|
39195
|
-
if (visibleCount >= chips.length) {
|
|
39196
|
-
const wrapped = countWrapped(items);
|
|
39197
|
-
if (wrapped > 0)
|
|
39198
|
-
setVisibleCount(chips.length - wrapped);
|
|
39199
|
-
return;
|
|
39200
|
-
}
|
|
39201
|
-
// The last child is the "+N more" link; if it wrapped, give it one more chip's room.
|
|
39202
|
-
if (countWrapped(items) > 0 && visibleCount > 1)
|
|
39203
|
-
setVisibleCount(visibleCount - 1);
|
|
39204
|
-
}, [collapsed, list, visibleCount, chips.length]);
|
|
39205
|
-
React.useEffect(() => {
|
|
39206
|
-
if (!collapsed || !list)
|
|
39207
|
-
return;
|
|
39208
|
-
let width = list.clientWidth;
|
|
39209
|
-
const observer = new ResizeObserver(() => {
|
|
39210
|
-
if (list.clientWidth === width)
|
|
39211
|
-
return;
|
|
39212
|
-
width = list.clientWidth;
|
|
39213
|
-
setVisibleCount(chips.length);
|
|
39214
|
-
});
|
|
39215
|
-
observer.observe(list);
|
|
39216
|
-
return () => observer.disconnect();
|
|
39217
|
-
}, [collapsed, list, chips.length]);
|
|
39218
|
-
const shown = collapsed ? Math.min(visibleCount, chips.length) : chips.length;
|
|
39219
|
-
return {
|
|
39220
|
-
listRef: React.useCallback((node) => setList(node), []),
|
|
39221
|
-
expanded,
|
|
39222
|
-
toggle: () => {
|
|
39223
|
-
setExpanded((current) => !current);
|
|
39224
|
-
setVisibleCount(chips.length);
|
|
39225
|
-
},
|
|
39226
|
-
visibleChips: chips.slice(0, shown),
|
|
39227
|
-
hiddenCount: chips.length - shown,
|
|
39228
|
-
};
|
|
39229
|
-
}
|
|
39230
|
-
|
|
39231
39261
|
/** Read-only filter summaries of a saved search, as pills; optionally one line ending in "+N more". */
|
|
39232
39262
|
function SavedSearchChipList({ chips, emptyText = 'No filters', collapsible = false, className, }) {
|
|
39233
39263
|
const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips, collapsible);
|
|
@@ -77051,7 +77081,7 @@ const getDropdownPlaceholder = (field) => field.inputPlaceholder ??
|
|
|
77051
77081
|
`${field.single ? 'Any' : 'Select'} ${field.label.toLowerCase()}`;
|
|
77052
77082
|
/** Popover variant: the same control and layout as the card (pills up to 4 options, then the list); tile grids drop to two columns. */
|
|
77053
77083
|
function toPopoverField(field) {
|
|
77054
|
-
if (field.type === 'scale' ||
|
|
77084
|
+
if ((field.type === 'scale' && field.layout === 'tiles') ||
|
|
77055
77085
|
(field.type === 'list' && resolveListLayout(field) === 'tiles')) {
|
|
77056
77086
|
return { ...field, columns: POPOVER_TILE_COLUMNS };
|
|
77057
77087
|
}
|
|
@@ -77084,7 +77114,7 @@ function FilterFieldControl({ field, value, onChange, fiscalYearStartMonth, fill
|
|
|
77084
77114
|
return (jsxRuntime.jsx(PickListFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'list')?.values ?? [], onChange: (values) => onChange(toListValue(values)), layout: layout, searchPlaceholder: layout === 'list' ? field.searchPlaceholder : undefined, columns: field.columns, single: field.single }));
|
|
77085
77115
|
}
|
|
77086
77116
|
case 'scale':
|
|
77087
|
-
return (jsxRuntime.jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), columns: field.columns, fill: fill }));
|
|
77117
|
+
return (jsxRuntime.jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), layout: field.layout === 'tiles' ? 'tiles' : 'pills', columns: field.columns, fill: fill }));
|
|
77088
77118
|
case 'number':
|
|
77089
77119
|
return (jsxRuntime.jsx(NumberRangeInputs, { ariaLabel: field.label, value: valueOfType(value, 'number')?.range, onChange: (range) => onChange(toNumberValue(range)), presets: field.presets, presetsLabel: field.presetsLabel }));
|
|
77090
77120
|
case 'ids':
|
|
@@ -77130,9 +77160,8 @@ function FilterField(props) {
|
|
|
77130
77160
|
return mode === 'cell' ? (jsxRuntime.jsx(FilterFieldCell, { ...rest })) : (jsxRuntime.jsx(FilterFieldCard, { mode: mode, ...rest }));
|
|
77131
77161
|
}
|
|
77132
77162
|
|
|
77133
|
-
/**
|
|
77163
|
+
/** Leaves without applying; the draft is discarded. */
|
|
77134
77164
|
const BACK_LABEL = 'Back without applying';
|
|
77135
|
-
const CLOSE_LABEL = 'Close without applying';
|
|
77136
77165
|
const LOADING_LABEL = 'Loading filters';
|
|
77137
77166
|
const ERROR_TITLE = "Couldn't load filters";
|
|
77138
77167
|
const DEFAULT_ERROR_MESSAGE = 'Something went wrong while loading the filters. Check your connection and try again.';
|
|
@@ -77202,10 +77231,12 @@ function MasonryItem({ children }) {
|
|
|
77202
77231
|
return (jsxRuntime.jsx("div", { style: span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsxRuntime.jsx("div", { ref: ref, className: "pb-3", children: children }) }));
|
|
77203
77232
|
}
|
|
77204
77233
|
|
|
77205
|
-
/** Full-page filter screen (e.g. an advanced search): header, scrolling card grid
|
|
77206
|
-
function FilterSurface({ title, headerActions,
|
|
77234
|
+
/** Full-page filter screen (e.g. an advanced search): one sticky header with every action, then the scrolling card grid. */
|
|
77235
|
+
function FilterSurface({ title, headerActions, primaryActions, chips, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
|
|
77207
77236
|
useCloseOnEscape(onClose);
|
|
77208
|
-
|
|
77237
|
+
const ready = status === 'ready';
|
|
77238
|
+
const actions = ready ? primaryActions : undefined;
|
|
77239
|
+
return (jsxRuntime.jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxRuntime.jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 bg-background px-3 py-2.5", children: [jsxRuntime.jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsxRuntime.jsx(ArrowLeft, {}) }), jsxRuntime.jsx("h1", { className: "sr-only", children: title }), jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions] })] }), jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsxRuntime.jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsxRuntime.jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
|
|
77209
77240
|
}
|
|
77210
77241
|
function FilterSurfaceGroup({ title, masonry = false, className, children, }) {
|
|
77211
77242
|
return (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsxRuntime.jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsxRuntime.jsx("div", { className: cn('grid grid-cols-1 items-start lg:grid-cols-6', masonry ? MASONRY_GRID_CLASS_NAME : 'gap-3', className), children: masonry
|