@caratlogic/design-system 0.1.36 → 0.1.37
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/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/index.cjs.js +4 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +4 -2
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -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,CAoLpC"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -15961,7 +15961,7 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
|
|
|
15961
15961
|
});
|
|
15962
15962
|
const radioName = React.useId();
|
|
15963
15963
|
const scrollClassName = getOptionsScrollClassName(fill);
|
|
15964
|
-
//
|
|
15964
|
+
// Two-line rows (label + hint) read best in one column.
|
|
15965
15965
|
const multiColumn = fill && !options.some((option) => option.hint);
|
|
15966
15966
|
const wrapperClassName = fill ? FILL_WRAPPER_CLASS_NAME : undefined;
|
|
15967
15967
|
const toggle = (option) => onChange(pickValue(value, option.value, single));
|
|
@@ -15974,7 +15974,9 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
|
|
|
15974
15974
|
? getGridColumnsStyle(undefined, LIST_COLUMN_MIN_WIDTH)
|
|
15975
15975
|
: 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
15976
|
// 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 })) :
|
|
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 })) : option.hint ? (
|
|
15978
|
+
// The hint sits under the label so a long name keeps the row's full width.
|
|
15979
|
+
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
15980
|
}
|
|
15979
15981
|
if (layout === 'tiles') {
|
|
15980
15982
|
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))) }));
|