@smwb/ui-react 2.2.0 → 2.4.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/assets/styles/less/components/appBar/appBar.entry.css +1 -1
- package/dist/assets/styles/less/components/assetGrid/assetGrid.entry.css +1 -0
- package/dist/assets/styles/less/components/chipGroup/chipGroup.entry.css +1 -0
- package/dist/assets/styles/less/components/lazyImage/lazyImage.entry.css +1 -0
- package/dist/assets/styles/less/components/overflowMenu/overflowMenu.entry.css +1 -0
- package/dist/assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css +1 -0
- package/dist/assets/styles/less/components/sheet/sheet.entry.css +1 -1
- package/dist/assets/styles/less/components/thumbCard/thumbCard.entry.css +1 -0
- package/dist/assets/styles/less/components/valueSlider/valueSlider.entry.css +1 -0
- package/dist/components/dataDisplay/assetGrid/assetGrid.d.ts +30 -0
- package/dist/components/dataDisplay/assetGrid/assetGrid.js +68 -0
- package/dist/components/dataDisplay/assetGrid/assetGrid.js.map +1 -0
- package/dist/components/dataDisplay/assetGrid/index.d.ts +2 -0
- package/dist/components/dataDisplay/chipGroup/chipGroup.d.ts +27 -0
- package/dist/components/dataDisplay/chipGroup/chipGroup.js +42 -0
- package/dist/components/dataDisplay/chipGroup/chipGroup.js.map +1 -0
- package/dist/components/dataDisplay/chipGroup/index.d.ts +2 -0
- package/dist/components/dataDisplay/lazyImage/index.d.ts +2 -0
- package/dist/components/dataDisplay/lazyImage/lazyImage.d.ts +22 -0
- package/dist/components/dataDisplay/lazyImage/lazyImage.js +52 -0
- package/dist/components/dataDisplay/lazyImage/lazyImage.js.map +1 -0
- package/dist/components/dataDisplay/thumbCard/index.d.ts +2 -0
- package/dist/components/dataDisplay/thumbCard/thumbCard.d.ts +29 -0
- package/dist/components/dataDisplay/thumbCard/thumbCard.js +82 -0
- package/dist/components/dataDisplay/thumbCard/thumbCard.js.map +1 -0
- package/dist/components/feedBack/saveAssetDialog/index.d.ts +2 -0
- package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.d.ts +30 -0
- package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js +60 -0
- package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js.map +1 -0
- package/dist/components/inputs/valueSlider/index.d.ts +2 -0
- package/dist/components/inputs/valueSlider/valueSlider.d.ts +23 -0
- package/dist/components/inputs/valueSlider/valueSlider.js +55 -0
- package/dist/components/inputs/valueSlider/valueSlider.js.map +1 -0
- package/dist/components/navigation/menu/menuSubmenu.d.ts +1 -1
- package/dist/components/navigation/overflowMenu/index.d.ts +2 -0
- package/dist/components/navigation/overflowMenu/overflowMenu.d.ts +27 -0
- package/dist/components/navigation/overflowMenu/overflowMenu.js +54 -0
- package/dist/components/navigation/overflowMenu/overflowMenu.js.map +1 -0
- package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js +67 -0
- package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js.map +1 -0
- package/dist/headless/components/dataDisplay/chipGroup/chipGroup.js +41 -0
- package/dist/headless/components/dataDisplay/chipGroup/chipGroup.js.map +1 -0
- package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js +51 -0
- package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js.map +1 -0
- package/dist/headless/components/dataDisplay/thumbCard/thumbCard.js +81 -0
- package/dist/headless/components/dataDisplay/thumbCard/thumbCard.js.map +1 -0
- package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js +59 -0
- package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js.map +1 -0
- package/dist/headless/components/inputs/valueSlider/valueSlider.js +54 -0
- package/dist/headless/components/inputs/valueSlider/valueSlider.js.map +1 -0
- package/dist/headless/components/navigation/overflowMenu/overflowMenu.js +53 -0
- package/dist/headless/components/navigation/overflowMenu/overflowMenu.js.map +1 -0
- package/dist/headless/hooks/useHoverPopover.js +117 -0
- package/dist/headless/hooks/useHoverPopover.js.map +1 -0
- package/dist/headless/index.js +242 -226
- package/dist/headless/index.js.map +1 -1
- package/dist/hooks/useHoverPopover.d.ts +73 -0
- package/dist/hooks/useHoverPopover.js +117 -0
- package/dist/hooks/useHoverPopover.js.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +16 -0
- package/dist/index.js +242 -226
- package/dist/index.js.map +1 -1
- package/package.json +6 -4
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type SliderProps, type SliderValue } from "../slider";
|
|
3
|
+
export interface ValueSliderProps extends SliderProps {
|
|
4
|
+
/**
|
|
5
|
+
* Read-only value readout beside the label. `true` shows the raw value; pass a
|
|
6
|
+
* formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `value`.
|
|
7
|
+
*/
|
|
8
|
+
readout?: boolean | ((value: SliderValue | undefined) => string);
|
|
9
|
+
/** Content at the end of the header row — a reset button, a favourite star, etc. */
|
|
10
|
+
endAdornment?: React.ReactNode;
|
|
11
|
+
/** Renders a built-in reset control in the header; called on click. */
|
|
12
|
+
onReset?: () => void;
|
|
13
|
+
/** Accessible label for the reset control. */
|
|
14
|
+
resetLabel?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* `Slider` plus the value-readout + adornment header row every app rebuilds: a
|
|
18
|
+
* read-only formatted value next to the label, an optional reset "eraser", and an
|
|
19
|
+
* `endAdornment` slot. A drop-in preset — all `Slider` props pass through; the
|
|
20
|
+
* label is rendered in the header instead of inside Slider.
|
|
21
|
+
*/
|
|
22
|
+
export declare function ValueSlider({ readout, endAdornment, onReset, resetLabel, label, className, ...sliderProps }: ValueSliderProps): React.ReactElement;
|
|
23
|
+
export default ValueSlider;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsxs as d, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import '../../../assets/styles/less/components/valueSlider/valueSlider.entry.css';/* empty css */
|
|
3
|
+
import c from "clsx";
|
|
4
|
+
import { Slider as m } from "../slider/slider.js";
|
|
5
|
+
function h(i, l) {
|
|
6
|
+
return typeof i == "function" ? i(l) : Array.isArray(l) ? `${l[0]} – ${l[1]}` : l == null ? "" : String(l);
|
|
7
|
+
}
|
|
8
|
+
function v({
|
|
9
|
+
readout: i,
|
|
10
|
+
endAdornment: l,
|
|
11
|
+
onReset: n,
|
|
12
|
+
resetLabel: s,
|
|
13
|
+
label: e,
|
|
14
|
+
className: u,
|
|
15
|
+
...a
|
|
16
|
+
}) {
|
|
17
|
+
const t = i !== void 0 && i !== !1, o = e != null || t || l != null || n != null;
|
|
18
|
+
return /* @__PURE__ */ d("div", { className: c("smwb-value-slider", u), children: [
|
|
19
|
+
o ? /* @__PURE__ */ d("div", { className: "smwb-value-slider__header", children: [
|
|
20
|
+
e != null ? /* @__PURE__ */ r("span", { className: "smwb-value-slider__label", children: e }) : null,
|
|
21
|
+
/* @__PURE__ */ r("span", { className: "smwb-value-slider__spacer" }),
|
|
22
|
+
t ? /* @__PURE__ */ r("span", { className: "smwb-value-slider__readout", children: h(i, a.value) }) : null,
|
|
23
|
+
l,
|
|
24
|
+
n != null ? /* @__PURE__ */ r(
|
|
25
|
+
"button",
|
|
26
|
+
{
|
|
27
|
+
type: "button",
|
|
28
|
+
className: "smwb-value-slider__reset",
|
|
29
|
+
"aria-label": s != null ? s : "Reset",
|
|
30
|
+
disabled: !!a.disabled,
|
|
31
|
+
onClick: () => n(),
|
|
32
|
+
children: /* @__PURE__ */ r(
|
|
33
|
+
"svg",
|
|
34
|
+
{
|
|
35
|
+
viewBox: "0 0 24 24",
|
|
36
|
+
width: "16",
|
|
37
|
+
height: "16",
|
|
38
|
+
"aria-hidden": "true",
|
|
39
|
+
fill: "none",
|
|
40
|
+
stroke: "currentColor",
|
|
41
|
+
strokeWidth: "2",
|
|
42
|
+
children: /* @__PURE__ */ r("path", { d: "M3 12a9 9 0 1 0 3-6.7M3 4v4h4", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
) : null
|
|
47
|
+
] }) : null,
|
|
48
|
+
/* @__PURE__ */ r(m, { ...a })
|
|
49
|
+
] });
|
|
50
|
+
}
|
|
51
|
+
export {
|
|
52
|
+
v as ValueSlider,
|
|
53
|
+
v as default
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=valueSlider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"valueSlider.js","sources":["../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n /**\n * Read-only value readout beside the label. `true` shows the raw value; pass a\n * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `value`.\n */\n readout?: boolean | ((value: SliderValue | undefined) => string);\n /** Content at the end of the header row — a reset button, a favourite star, etc. */\n endAdornment?: React.ReactNode;\n /** Renders a built-in reset control in the header; called on click. */\n onReset?: () => void;\n /** Accessible label for the reset control. */\n resetLabel?: string;\n}\n\nfunction formatReadout(readout: ValueSliderProps[\"readout\"], value: SliderValue | undefined): string {\n if (typeof readout === \"function\") return readout(value);\n if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n return value == null ? \"\" : String(value);\n}\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot. A drop-in preset — all `Slider` props pass through; the\n * label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider({\n readout,\n endAdornment,\n onReset,\n resetLabel,\n label,\n className,\n ...sliderProps\n}: ValueSliderProps): React.ReactElement {\n const hasReadout = readout !== undefined && readout !== false;\n const showHeader = label != null || hasReadout || endAdornment != null || onReset != null;\n\n return (\n <div className={cn(\"smwb-value-slider\", className)}>\n {showHeader ? (\n <div className=\"smwb-value-slider__header\">\n {label != null ? <span className=\"smwb-value-slider__label\">{label}</span> : null}\n <span className=\"smwb-value-slider__spacer\" />\n {hasReadout ? (\n <span className=\"smwb-value-slider__readout\">{formatReadout(readout, sliderProps.value)}</span>\n ) : null}\n {endAdornment}\n {onReset != null ? (\n <button\n type=\"button\"\n className=\"smwb-value-slider__reset\"\n aria-label={resetLabel ?? \"Reset\"}\n disabled={!!sliderProps.disabled}\n onClick={() => onReset()}\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"16\"\n height=\"16\"\n aria-hidden=\"true\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </button>\n ) : null}\n </div>\n ) : null}\n <Slider {...sliderProps} />\n </div>\n );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","ValueSlider","endAdornment","onReset","resetLabel","label","className","sliderProps","hasReadout","showHeader","cn","jsxs","jsx","Slider"],"mappings":";;;;AAmBA,SAASA,EAAcC,GAAsCC,GAAwC;AACnG,SAAI,OAAOD,KAAY,aAAmBA,EAAQC,CAAK,IACnD,MAAM,QAAQA,CAAK,IAAU,GAAGA,EAAM,CAAC,CAAC,MAAMA,EAAM,CAAC,CAAC,KACnDA,KAAS,OAAO,KAAK,OAAOA,CAAK;AAC1C;AAQO,SAASC,EAAY;AAAA,EAC1B,SAAAF;AAAA,EACA,cAAAG;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyC;AACvC,QAAMC,IAAaT,MAAY,UAAaA,MAAY,IAClDU,IAAaJ,KAAS,QAAQG,KAAcN,KAAgB,QAAQC,KAAW;AAErF,2BACG,OAAA,EAAI,WAAWO,EAAG,qBAAqBJ,CAAS,GAC9C,UAAA;AAAA,IAAAG,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,MAAAN,KAAS,OAAO,gBAAAO,EAAC,QAAA,EAAK,WAAU,4BAA4B,aAAM,IAAU;AAAA,MAC7E,gBAAAA,EAAC,QAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,MAC3CJ,IACC,gBAAAI,EAAC,QAAA,EAAK,WAAU,8BAA8B,YAAcb,GAASQ,EAAY,KAAK,EAAA,CAAE,IACtF;AAAA,MACHL;AAAA,MACAC,KAAW,OACV,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAYR,KAAA,OAAAA,IAAc;AAAA,UAC1B,UAAU,CAAC,CAACG,EAAY;AAAA,UACxB,SAAS,MAAMJ,EAAA;AAAA,UAEf,UAAA,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,QAAO;AAAA,cACP,eAAY;AAAA,cACZ,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cAEZ,4BAAC,QAAA,EAAK,GAAE,iCAAgC,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACvF;AAAA,MAAA,IAEA;AAAA,IAAA,EAAA,CACN,IACE;AAAA,IACJ,gBAAAA,EAACC,GAAA,EAAQ,GAAGN,EAAA,CAAa;AAAA,EAAA,GAC3B;AAEJ;"}
|
|
@@ -7,7 +7,7 @@ export type MenuSubmenuProps = Pick<MenuFloatingProps, "placement" | "onClose">
|
|
|
7
7
|
/** Open the submenu on pointer hover in addition to click. */
|
|
8
8
|
openOnHover?: boolean;
|
|
9
9
|
};
|
|
10
|
-
export declare const MenuSubmenu: React.ForwardRefExoticComponent<Pick<MenuFloatingProps, "
|
|
10
|
+
export declare const MenuSubmenu: React.ForwardRefExoticComponent<Pick<MenuFloatingProps, "placement" | "onClose"> & React.HTMLAttributes<HTMLDivElement> & {
|
|
11
11
|
toggleElement?: React.ReactElement;
|
|
12
12
|
/** Items and/or nested `MenuSubmenu` elements (multi-level supported). */
|
|
13
13
|
children: React.ReactNode;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { Placement } from "@floating-ui/react";
|
|
3
|
+
export interface OverflowMenuItem {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
icon?: React.ReactNode | string;
|
|
7
|
+
danger?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
onSelect?: () => void;
|
|
10
|
+
}
|
|
11
|
+
export interface OverflowMenuProps {
|
|
12
|
+
items: OverflowMenuItem[];
|
|
13
|
+
/** Trigger icon name (default `more_vert`). */
|
|
14
|
+
icon?: string;
|
|
15
|
+
placement?: Placement;
|
|
16
|
+
"aria-label"?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* A one-shot kebab / overflow menu: a trigger icon button wired to a floating
|
|
22
|
+
* `Menu` over an `items` array, with open/close state baked in. The card 3-dot
|
|
23
|
+
* menu every app hand-builds (button + surface + open state) collapses to
|
|
24
|
+
* passing an items list.
|
|
25
|
+
*/
|
|
26
|
+
export declare function OverflowMenu({ items, icon, placement, "aria-label": ariaLabel, disabled, className, }: OverflowMenuProps): React.ReactElement;
|
|
27
|
+
export default OverflowMenu;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsxs as f, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import '../../../assets/styles/less/components/overflowMenu/overflowMenu.entry.css';/* empty css */
|
|
3
|
+
import { useRef as h, useState as b } from "react";
|
|
4
|
+
import t from "clsx";
|
|
5
|
+
import { Button as v } from "../../inputs/button/button.js";
|
|
6
|
+
import { Menu as w } from "../menu/menu.js";
|
|
7
|
+
import { MenuItem as x } from "../menu/menuItem.js";
|
|
8
|
+
import { Icon as M } from "../../base/icon/icon.js";
|
|
9
|
+
function R({
|
|
10
|
+
items: p,
|
|
11
|
+
icon: u = "more_vert",
|
|
12
|
+
placement: e,
|
|
13
|
+
"aria-label": n,
|
|
14
|
+
disabled: i,
|
|
15
|
+
className: d
|
|
16
|
+
}) {
|
|
17
|
+
const s = h(null), [m, l] = b(!1), c = () => l(!1);
|
|
18
|
+
return /* @__PURE__ */ f("span", { className: t("smwb-overflow-menu", d), children: [
|
|
19
|
+
/* @__PURE__ */ r(
|
|
20
|
+
v,
|
|
21
|
+
{
|
|
22
|
+
ref: s,
|
|
23
|
+
variant: "text",
|
|
24
|
+
size: "small",
|
|
25
|
+
icon: u,
|
|
26
|
+
"aria-label": n != null ? n : "More actions",
|
|
27
|
+
"aria-haspopup": "menu",
|
|
28
|
+
disabled: !!i,
|
|
29
|
+
onClick: () => l((o) => !o)
|
|
30
|
+
}
|
|
31
|
+
),
|
|
32
|
+
/* @__PURE__ */ r(w, { isOpen: m, onClose: c, anchorElement: s.current, ...e ? { placement: e } : {}, children: p.map((o) => /* @__PURE__ */ f(
|
|
33
|
+
x,
|
|
34
|
+
{
|
|
35
|
+
className: t({ "smwb-overflow-menu__item--danger": o.danger }),
|
|
36
|
+
disabled: o.disabled,
|
|
37
|
+
onClick: () => {
|
|
38
|
+
var a;
|
|
39
|
+
o.disabled || ((a = o.onSelect) == null || a.call(o), c());
|
|
40
|
+
},
|
|
41
|
+
children: [
|
|
42
|
+
o.icon ? typeof o.icon == "string" ? /* @__PURE__ */ r(M, { name: o.icon }) : o.icon : null,
|
|
43
|
+
o.label
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
o.id
|
|
47
|
+
)) })
|
|
48
|
+
] });
|
|
49
|
+
}
|
|
50
|
+
export {
|
|
51
|
+
R as OverflowMenu,
|
|
52
|
+
R as default
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=overflowMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overflowMenu.js","sources":["../../../../src/components/navigation/overflowMenu/overflowMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport type { Placement } from \"@floating-ui/react\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { Menu, MenuItem } from \"../menu\";\n\nexport interface OverflowMenuItem {\n id: string;\n label: string;\n icon?: React.ReactNode | string;\n danger?: boolean;\n disabled?: boolean;\n onSelect?: () => void;\n}\n\nexport interface OverflowMenuProps {\n items: OverflowMenuItem[];\n /** Trigger icon name (default `more_vert`). */\n icon?: string;\n placement?: Placement;\n \"aria-label\"?: string;\n disabled?: boolean;\n className?: string;\n}\n\n/**\n * A one-shot kebab / overflow menu: a trigger icon button wired to a floating\n * `Menu` over an `items` array, with open/close state baked in. The card 3-dot\n * menu every app hand-builds (button + surface + open state) collapses to\n * passing an items list.\n */\nexport function OverflowMenu({\n items,\n icon = \"more_vert\",\n placement,\n \"aria-label\": ariaLabel,\n disabled,\n className,\n}: OverflowMenuProps): React.ReactElement {\n const anchorRef = useRef<HTMLButtonElement | HTMLAnchorElement | null>(null);\n const [open, setOpen] = useState(false);\n const close = (): void => setOpen(false);\n\n return (\n <span className={cn(\"smwb-overflow-menu\", className)}>\n <Button\n ref={anchorRef}\n variant=\"text\"\n size=\"small\"\n icon={icon}\n aria-label={ariaLabel ?? \"More actions\"}\n aria-haspopup=\"menu\"\n disabled={!!disabled}\n onClick={() => setOpen((value) => !value)}\n />\n <Menu isOpen={open} onClose={close} anchorElement={anchorRef.current} {...(placement ? { placement } : {})}>\n {items.map((item) => (\n <MenuItem\n key={item.id}\n className={cn({ \"smwb-overflow-menu__item--danger\": item.danger })}\n disabled={item.disabled}\n onClick={() => {\n if (item.disabled) return;\n item.onSelect?.();\n close();\n }}\n >\n {item.icon ? typeof item.icon === \"string\" ? <Icon name={item.icon} /> : item.icon : null}\n {item.label}\n </MenuItem>\n ))}\n </Menu>\n </span>\n );\n}\n\nexport default OverflowMenu;\n"],"names":["OverflowMenu","items","icon","placement","ariaLabel","disabled","className","anchorRef","useRef","open","setOpen","useState","close","cn","jsx","Button","value","Menu","item","jsxs","MenuItem","_a","Icon"],"mappings":";;;;;;;;AAiCO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0C;AACxC,QAAMC,IAAYC,EAAqD,IAAI,GACrE,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAQ,MAAYF,EAAQ,EAAK;AAEvC,2BACG,QAAA,EAAK,WAAWG,EAAG,sBAAsBP,CAAS,GACjD,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,cAAYE,KAAA,OAAAA,IAAa;AAAA,QACzB,iBAAc;AAAA,QACd,UAAU,CAAC,CAACC;AAAA,QACZ,SAAS,MAAMK,EAAQ,CAACM,MAAU,CAACA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEzCC,GAAA,EAAK,QAAQR,GAAM,SAASG,GAAO,eAAeL,EAAU,SAAU,GAAIJ,IAAY,EAAE,WAAAA,MAAc,CAAA,GACpG,UAAAF,EAAM,IAAI,CAACiB,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,WAAWP,EAAG,EAAE,oCAAoCK,EAAK,QAAQ;AAAA,QACjE,UAAUA,EAAK;AAAA,QACf,SAAS,MAAM;;AACb,UAAIA,EAAK,cACTG,IAAAH,EAAK,aAAL,QAAAG,EAAA,KAAAH,IACAN,EAAA;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,UAAAM,EAAK,OAAO,OAAOA,EAAK,QAAS,WAAW,gBAAAJ,EAACQ,GAAA,EAAK,MAAMJ,EAAK,KAAA,CAAM,IAAKA,EAAK,OAAO;AAAA,UACpFA,EAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAVDA,EAAK;AAAA,IAAA,CAYb,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import _, { useRef as H, useState as h, useEffect as I, useMemo as O } from "react";
|
|
3
|
+
import T from "clsx";
|
|
4
|
+
import { useVirtualList as W } from "../../../hooks/useVirtualList.js";
|
|
5
|
+
function G({
|
|
6
|
+
items: l,
|
|
7
|
+
renderItem: f,
|
|
8
|
+
minColumn: d = 160,
|
|
9
|
+
rowHeight: a,
|
|
10
|
+
gap: r = 8,
|
|
11
|
+
overscan: v = 2,
|
|
12
|
+
loading: b,
|
|
13
|
+
loadingCount: w = 12,
|
|
14
|
+
emptyLabel: x,
|
|
15
|
+
className: N,
|
|
16
|
+
style: R
|
|
17
|
+
}) {
|
|
18
|
+
const g = H(null), [c, A] = h(0), [M, S] = h(0), [z, $] = h(!1);
|
|
19
|
+
I(() => {
|
|
20
|
+
const s = g.current;
|
|
21
|
+
if (!s || typeof ResizeObserver == "undefined") return;
|
|
22
|
+
const t = new ResizeObserver(() => {
|
|
23
|
+
A(s.clientWidth), S(s.clientHeight), $(!0);
|
|
24
|
+
});
|
|
25
|
+
return t.observe(s), () => t.disconnect();
|
|
26
|
+
}, []);
|
|
27
|
+
const o = O(
|
|
28
|
+
() => c <= 0 ? 1 : Math.max(1, Math.floor((c + r) / (d + r))),
|
|
29
|
+
[c, r, d]
|
|
30
|
+
), C = Math.ceil(l.length / o), i = W({
|
|
31
|
+
itemCount: C,
|
|
32
|
+
itemHeight: a + r,
|
|
33
|
+
viewportHeight: M || 1,
|
|
34
|
+
overscan: v
|
|
35
|
+
}), u = {
|
|
36
|
+
display: "grid",
|
|
37
|
+
gridTemplateColumns: `repeat(auto-fill, minmax(${d}px, 1fr))`,
|
|
38
|
+
gap: r,
|
|
39
|
+
gridAutoRows: a
|
|
40
|
+
}, F = {
|
|
41
|
+
display: "grid",
|
|
42
|
+
gridTemplateColumns: `repeat(${o}, minmax(0, 1fr))`,
|
|
43
|
+
gap: r,
|
|
44
|
+
height: a,
|
|
45
|
+
marginBottom: r
|
|
46
|
+
};
|
|
47
|
+
let n;
|
|
48
|
+
return b ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: Array.from({ length: w }).map((s, t) => /* @__PURE__ */ e("div", { className: "smwb-asset-grid__skeleton", style: { height: a } }, t)) }) : l.length === 0 ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__empty", children: x }) : z ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__sizer", style: { height: i.totalHeight, position: "relative" }, children: /* @__PURE__ */ e(
|
|
49
|
+
"div",
|
|
50
|
+
{
|
|
51
|
+
className: "smwb-asset-grid__band",
|
|
52
|
+
style: { position: "absolute", top: 0, left: 0, right: 0, transform: `translateY(${i.offsetY}px)` },
|
|
53
|
+
children: Array.from({ length: Math.max(0, i.endIndex - i.startIndex) }).map((s, t) => {
|
|
54
|
+
const p = i.startIndex + t;
|
|
55
|
+
return /* @__PURE__ */ e("div", { className: "smwb-asset-grid__row", style: F, children: Array.from({ length: o }).map((Y, y) => {
|
|
56
|
+
const m = p * o + y;
|
|
57
|
+
return m < l.length ? /* @__PURE__ */ e(_.Fragment, { children: f(l[m], m) }, y) : null;
|
|
58
|
+
}) }, p);
|
|
59
|
+
})
|
|
60
|
+
}
|
|
61
|
+
) }) : n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: l.map((s, t) => /* @__PURE__ */ e(_.Fragment, { children: f(s, t) }, t)) }), /* @__PURE__ */ e("div", { ref: g, className: T("smwb-asset-grid", N), style: R, onScroll: i.onScroll, children: n });
|
|
62
|
+
}
|
|
63
|
+
export {
|
|
64
|
+
G as AssetGrid,
|
|
65
|
+
G as default
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=assetGrid.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"assetGrid.js","sources":["../../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\n\nexport interface AssetGridProps<T> {\n items: T[];\n /** Render one cell. `index` is the absolute index into `items`. */\n renderItem: (item: T, index: number) => React.ReactNode;\n /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n minColumn?: number;\n /** Fixed cell height (px). */\n rowHeight: number;\n /** Gap (px) between cells on both axes. Default 8. */\n gap?: number;\n /** Extra rows rendered above/below the viewport. Default 2. */\n overscan?: number;\n loading?: boolean;\n /** Skeleton tile count while loading. Default 12. */\n loadingCount?: number;\n emptyLabel?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `useVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>({\n items,\n renderItem,\n minColumn = 160,\n rowHeight,\n gap = 8,\n overscan = 2,\n loading,\n loadingCount = 12,\n emptyLabel,\n className,\n style,\n}: AssetGridProps<T>): React.ReactElement {\n const viewportRef = useRef<HTMLDivElement | null>(null);\n const [width, setWidth] = useState(0);\n const [height, setHeight] = useState(0);\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n const el = viewportRef.current;\n if (!el || typeof ResizeObserver === \"undefined\") return;\n const ro = new ResizeObserver(() => {\n setWidth(el.clientWidth);\n setHeight(el.clientHeight);\n setReady(true);\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n\n const cols = useMemo(\n () => (width <= 0 ? 1 : Math.max(1, Math.floor((width + gap) / (minColumn + gap)))),\n [width, gap, minColumn]\n );\n const rowCount = Math.ceil(items.length / cols);\n const vl = useVirtualList({\n itemCount: rowCount,\n itemHeight: rowHeight + gap,\n viewportHeight: height || 1,\n overscan,\n });\n\n const plainStyle: React.CSSProperties = {\n display: \"grid\",\n gridTemplateColumns: `repeat(auto-fill, minmax(${minColumn}px, 1fr))`,\n gap,\n gridAutoRows: rowHeight,\n };\n const rowStyle: React.CSSProperties = {\n display: \"grid\",\n gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n gap,\n height: rowHeight,\n marginBottom: gap,\n };\n\n let body: React.ReactNode;\n if (loading) {\n body = (\n <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n {Array.from({ length: loadingCount }).map((_, i) => (\n <div key={i} className=\"smwb-asset-grid__skeleton\" style={{ height: rowHeight }} />\n ))}\n </div>\n );\n } else if (items.length === 0) {\n body = <div className=\"smwb-asset-grid__empty\">{emptyLabel}</div>;\n } else if (!ready) {\n body = (\n <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n {items.map((item, index) => (\n <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n ))}\n </div>\n );\n } else {\n body = (\n <div className=\"smwb-asset-grid__sizer\" style={{ height: vl.totalHeight, position: \"relative\" }}>\n <div\n className=\"smwb-asset-grid__band\"\n style={{ position: \"absolute\", top: 0, left: 0, right: 0, transform: `translateY(${vl.offsetY}px)` }}\n >\n {Array.from({ length: Math.max(0, vl.endIndex - vl.startIndex) }).map((_, r) => {\n const row = vl.startIndex + r;\n return (\n <div key={row} className=\"smwb-asset-grid__row\" style={rowStyle}>\n {Array.from({ length: cols }).map((_, c) => {\n const index = row * cols + c;\n return index < items.length ? (\n <React.Fragment key={c}>{renderItem(items[index], index)}</React.Fragment>\n ) : null;\n })}\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n\n return (\n <div ref={viewportRef} className={cn(\"smwb-asset-grid\", className)} style={style} onScroll={vl.onScroll}>\n {body}\n </div>\n );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","items","renderItem","minColumn","rowHeight","gap","overscan","loading","loadingCount","emptyLabel","className","style","viewportRef","useRef","width","setWidth","useState","height","setHeight","ready","setReady","useEffect","el","ro","cols","useMemo","rowCount","vl","useVirtualList","plainStyle","rowStyle","body","jsx","_","i","r","row","c","index","React","item","cn"],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import A from "clsx";
|
|
3
|
+
import { Chip as j } from "../chip/chip.js";
|
|
4
|
+
function N({
|
|
5
|
+
options: d,
|
|
6
|
+
value: e,
|
|
7
|
+
multiple: t,
|
|
8
|
+
onChange: l,
|
|
9
|
+
size: m = "medium",
|
|
10
|
+
color: f = "primary",
|
|
11
|
+
disabled: a,
|
|
12
|
+
className: b,
|
|
13
|
+
...p
|
|
14
|
+
}) {
|
|
15
|
+
const c = () => e == null ? [] : Array.isArray(e) ? e : [e], i = (r) => c().includes(r), v = (r) => {
|
|
16
|
+
if (t) {
|
|
17
|
+
const s = c(), x = s.includes(r) ? s.filter((y) => y !== r) : [...s, r];
|
|
18
|
+
l == null || l(x);
|
|
19
|
+
} else
|
|
20
|
+
l == null || l(r);
|
|
21
|
+
};
|
|
22
|
+
return /* @__PURE__ */ u("div", { ...p, role: "group", className: A("smwb-chip-group", b), children: d.map((r) => /* @__PURE__ */ u(
|
|
23
|
+
j,
|
|
24
|
+
{
|
|
25
|
+
label: r.label,
|
|
26
|
+
icon: r.icon,
|
|
27
|
+
size: m,
|
|
28
|
+
color: f,
|
|
29
|
+
selected: i(r.value),
|
|
30
|
+
variant: i(r.value) ? "filled" : "outlined",
|
|
31
|
+
disabled: !!(a || r.disabled),
|
|
32
|
+
onClick: () => v(r.value)
|
|
33
|
+
},
|
|
34
|
+
r.value
|
|
35
|
+
)) });
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
N as ChipGroup,
|
|
39
|
+
N as default
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=chipGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chipGroup.js","sources":["../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n value: string;\n label: string;\n icon?: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n options: ChipGroupOption[];\n /** Selected value (single) or values (when `multiple`). */\n value?: string | string[];\n /** Allow more than one selected chip (value becomes a string[]). */\n multiple?: boolean;\n onChange?: (value: string | string[]) => void;\n size?: \"small\" | \"medium\";\n color?: ChipColor;\n disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) apps re-hand-roll for\n * filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup({\n options,\n value,\n multiple,\n onChange,\n size = \"medium\",\n color = \"primary\",\n disabled,\n className,\n ...rest\n}: ChipGroupProps): React.ReactElement {\n const selectedValues = (): string[] => {\n if (value == null) return [];\n return Array.isArray(value) ? value : [value];\n };\n const isSelected = (option: string): boolean => selectedValues().includes(option);\n\n const toggle = (option: string): void => {\n if (multiple) {\n const current = selectedValues();\n const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option];\n onChange?.(next);\n } else {\n onChange?.(option);\n }\n };\n\n return (\n <div {...rest} role=\"group\" className={cn(\"smwb-chip-group\", className)}>\n {options.map((option) => (\n <Chip\n key={option.value}\n label={option.label}\n icon={option.icon}\n size={size}\n color={color}\n selected={isSelected(option.value)}\n variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n disabled={!!(disabled || option.disabled)}\n onClick={() => toggle(option.value)}\n />\n ))}\n </div>\n );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","options","value","multiple","onChange","size","color","disabled","className","rest","selectedValues","isSelected","option","toggle","current","next","v","jsx","cn","Chip"],"mappings":";;;AA6BO,SAASA,EAAU;AAAA,EACxB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuC;AACrC,QAAMC,IAAiB,MACjBR,KAAS,OAAa,CAAA,IACnB,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAExCS,IAAa,CAACC,MAA4BF,EAAA,EAAiB,SAASE,CAAM,GAE1EC,IAAS,CAACD,MAAyB;AACvC,QAAIT,GAAU;AACZ,YAAMW,IAAUJ,EAAA,GACVK,IAAOD,EAAQ,SAASF,CAAM,IAAIE,EAAQ,OAAO,CAACE,MAAMA,MAAMJ,CAAM,IAAI,CAAC,GAAGE,GAASF,CAAM;AACjG,MAAAR,KAAA,QAAAA,EAAWW;AAAA,IACb;AACE,MAAAX,KAAA,QAAAA,EAAWQ;AAAA,EAEf;AAEA,SACE,gBAAAK,EAAC,OAAA,EAAK,GAAGR,GAAM,MAAK,SAAQ,WAAWS,EAAG,mBAAmBV,CAAS,GACnE,UAAAP,EAAQ,IAAI,CAACW,MACZ,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MAEC,OAAOP,EAAO;AAAA,MACd,MAAMA,EAAO;AAAA,MACb,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,UAAUK,EAAWC,EAAO,KAAK;AAAA,MACjC,SAASD,EAAWC,EAAO,KAAK,IAAI,WAAW;AAAA,MAC/C,UAAU,CAAC,EAAEL,KAAYK,EAAO;AAAA,MAChC,SAAS,MAAMC,EAAOD,EAAO,KAAK;AAAA,IAAA;AAAA,IAR7BA,EAAO;AAAA,EAAA,CAUf,GACH;AAEJ;"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsxs as z, jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as _, useState as d, useRef as x, useEffect as F } from "react";
|
|
3
|
+
import N from "clsx";
|
|
4
|
+
import { useForkRef as j } from "../../../hooks/useForkRef.js";
|
|
5
|
+
const q = _(function({ src: c, alt: n, fallback: a, lazy: e = !0, aspectRatio: m, className: g, onError: t, ...b }, p) {
|
|
6
|
+
const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(p, f);
|
|
7
|
+
F(() => {
|
|
8
|
+
if (!e || i) return;
|
|
9
|
+
const s = f.current;
|
|
10
|
+
if (!s) return;
|
|
11
|
+
if (typeof IntersectionObserver == "undefined") {
|
|
12
|
+
l(!0);
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
const o = new IntersectionObserver((R) => {
|
|
16
|
+
R.some((h) => h.isIntersecting) && (l(!0), o.disconnect());
|
|
17
|
+
});
|
|
18
|
+
return o.observe(s), () => o.disconnect();
|
|
19
|
+
}, [e, i]);
|
|
20
|
+
const r = y || !c, I = (s) => {
|
|
21
|
+
v(!0), t == null || t(s);
|
|
22
|
+
};
|
|
23
|
+
return /* @__PURE__ */ z(
|
|
24
|
+
"span",
|
|
25
|
+
{
|
|
26
|
+
className: N("smwb-lazy-image", g, { "smwb-lazy-image--empty": r }),
|
|
27
|
+
style: m != null ? { aspectRatio: String(m) } : void 0,
|
|
28
|
+
children: [
|
|
29
|
+
r && a ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: a }) : null,
|
|
30
|
+
r ? null : /* @__PURE__ */ u(
|
|
31
|
+
"img",
|
|
32
|
+
{
|
|
33
|
+
...b,
|
|
34
|
+
ref: w,
|
|
35
|
+
className: "smwb-lazy-image__img",
|
|
36
|
+
src: i ? c : void 0,
|
|
37
|
+
alt: n != null ? n : "",
|
|
38
|
+
loading: e ? "lazy" : void 0,
|
|
39
|
+
decoding: "async",
|
|
40
|
+
onError: I
|
|
41
|
+
}
|
|
42
|
+
)
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
});
|
|
47
|
+
export {
|
|
48
|
+
q as LazyImage,
|
|
49
|
+
q as default
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=lazyImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n src?: string | undefined;\n alt?: string | undefined;\n /** Rendered in place of the image when it is missing or fails to load. */\n fallback?: React.ReactNode;\n /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n lazy?: boolean;\n /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n aspectRatio?: string | number;\n /** Fires on a load error (after the fallback is swapped in). */\n onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n ref\n) {\n const [failed, setFailed] = useState(false);\n const [visible, setVisible] = useState(!lazy);\n const imgRef = useRef<HTMLImageElement | null>(null);\n const setRefs = useForkRef(ref, imgRef);\n\n useEffect(() => {\n if (!lazy || visible) return;\n const el = imgRef.current;\n if (!el) return;\n if (typeof IntersectionObserver === \"undefined\") {\n setVisible(true);\n return;\n }\n const io = new IntersectionObserver((entries) => {\n if (entries.some((entry) => entry.isIntersecting)) {\n setVisible(true);\n io.disconnect();\n }\n });\n io.observe(el);\n return () => io.disconnect();\n }, [lazy, visible]);\n\n const showFallback = failed || !src;\n const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n setFailed(true);\n onError?.(event);\n };\n\n return (\n <span\n className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n >\n {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n {!showFallback ? (\n <img\n {...rest}\n ref={setRefs}\n className=\"smwb-lazy-image__img\"\n src={visible ? src : undefined}\n alt={alt ?? \"\"}\n loading={lazy ? \"lazy\" : undefined}\n decoding=\"async\"\n onError={handleError}\n />\n ) : null}\n </span>\n );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx"],"mappings":";;;;AAwBO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAWE,OAVF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YACZ,SAASE,IAAO,SAAS;AAAA,YACzB,UAAS;AAAA,YACT,SAASqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsxs as p, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as L, useRef as _, useState as j, useEffect as D } from "react";
|
|
3
|
+
import { createPortal as I } from "react-dom";
|
|
4
|
+
import M from "clsx";
|
|
5
|
+
import { useForkRef as z } from "../../../hooks/useForkRef.js";
|
|
6
|
+
import { LazyImage as B } from "../lazyImage/lazyImage.js";
|
|
7
|
+
const O = L(function({
|
|
8
|
+
src: w,
|
|
9
|
+
caption: c,
|
|
10
|
+
selected: a,
|
|
11
|
+
onSelect: r,
|
|
12
|
+
fallback: v,
|
|
13
|
+
hoverPreview: i,
|
|
14
|
+
topStart: d,
|
|
15
|
+
topEnd: l,
|
|
16
|
+
lazy: y = !0,
|
|
17
|
+
disabled: n,
|
|
18
|
+
hoverDelay: g = 350,
|
|
19
|
+
className: N,
|
|
20
|
+
...R
|
|
21
|
+
}, x) {
|
|
22
|
+
const f = _(null), T = z(x, f), [o, b] = j(null), u = _(null), e = () => {
|
|
23
|
+
u.current && (clearTimeout(u.current), u.current = null);
|
|
24
|
+
}, k = () => {
|
|
25
|
+
i == null || n || (e(), u.current = setTimeout(() => {
|
|
26
|
+
var h;
|
|
27
|
+
const t = (h = f.current) == null ? void 0 : h.getBoundingClientRect();
|
|
28
|
+
t && b({ top: t.top, left: t.right + 8 });
|
|
29
|
+
}, g));
|
|
30
|
+
}, C = () => {
|
|
31
|
+
e(), b(null);
|
|
32
|
+
};
|
|
33
|
+
D(() => e, []);
|
|
34
|
+
const m = !!r && !n, E = (t) => {
|
|
35
|
+
m && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r());
|
|
36
|
+
};
|
|
37
|
+
return /* @__PURE__ */ p(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
...R,
|
|
41
|
+
ref: T,
|
|
42
|
+
className: M("smwb-thumb-card", N, {
|
|
43
|
+
"smwb-thumb-card--selected": a,
|
|
44
|
+
"smwb-thumb-card--disabled": n,
|
|
45
|
+
"smwb-thumb-card--interactive": m
|
|
46
|
+
}),
|
|
47
|
+
role: m ? "button" : void 0,
|
|
48
|
+
tabIndex: m ? 0 : void 0,
|
|
49
|
+
"aria-pressed": r ? a != null ? a : !1 : void 0,
|
|
50
|
+
"aria-disabled": n || void 0,
|
|
51
|
+
onClick: m ? () => r == null ? void 0 : r() : void 0,
|
|
52
|
+
onKeyDown: E,
|
|
53
|
+
onMouseEnter: k,
|
|
54
|
+
onMouseLeave: C,
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ p("div", { className: "smwb-thumb-card__media", children: [
|
|
57
|
+
/* @__PURE__ */ s(B, { src: w, lazy: y, fallback: v }),
|
|
58
|
+
d ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--start", children: d }) : null,
|
|
59
|
+
l ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--end", children: l }) : null
|
|
60
|
+
] }),
|
|
61
|
+
c ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__caption", children: c }) : null,
|
|
62
|
+
o && typeof document != "undefined" ? I(
|
|
63
|
+
/* @__PURE__ */ s(
|
|
64
|
+
"div",
|
|
65
|
+
{
|
|
66
|
+
className: "smwb-thumb-card__preview",
|
|
67
|
+
style: { position: "fixed", top: o.top, left: o.left },
|
|
68
|
+
children: typeof i == "string" ? /* @__PURE__ */ s("img", { src: i, alt: "" }) : i
|
|
69
|
+
}
|
|
70
|
+
),
|
|
71
|
+
document.body
|
|
72
|
+
) : null
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
});
|
|
77
|
+
export {
|
|
78
|
+
O as ThumbCard,
|
|
79
|
+
O as default
|
|
80
|
+
};
|
|
81
|
+
//# sourceMappingURL=thumbCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"thumbCard.js","sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { LazyImage } from \"../lazyImage\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ThumbCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n src?: string;\n caption?: React.ReactNode;\n selected?: boolean;\n /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n onSelect?: () => void;\n /** Shown in place of the image when `src` is missing / fails. */\n fallback?: React.ReactNode;\n /** A larger preview shown in a floating popup after a hover delay. */\n hoverPreview?: React.ReactNode | string;\n /** Top-left overlay slot (e.g. a favourite star). */\n topStart?: React.ReactNode;\n /** Top-right overlay slot (e.g. a kebab menu). */\n topEnd?: React.ReactNode;\n lazy?: boolean;\n disabled?: boolean;\n /** Delay (ms) before the hover preview appears. Default 350. */\n hoverDelay?: number;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport const ThumbCard = forwardRef<HTMLDivElement, ThumbCardProps>(function ThumbCard(\n {\n src,\n caption,\n selected,\n onSelect,\n fallback,\n hoverPreview,\n topStart,\n topEnd,\n lazy = true,\n disabled,\n hoverDelay = 350,\n className,\n ...rest\n },\n ref\n) {\n const cardRef = useRef<HTMLDivElement | null>(null);\n const setRefs = useForkRef(ref, cardRef);\n const [preview, setPreview] = useState<{ top: number; left: number } | null>(null);\n const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const clearTimer = (): void => {\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = null;\n }\n };\n const onEnter = (): void => {\n if (hoverPreview == null || disabled) return;\n clearTimer();\n timer.current = setTimeout(() => {\n const rect = cardRef.current?.getBoundingClientRect();\n if (rect) setPreview({ top: rect.top, left: rect.right + 8 });\n }, hoverDelay);\n };\n const onLeave = (): void => {\n clearTimer();\n setPreview(null);\n };\n useEffect(() => clearTimer, []);\n\n const interactive = !!onSelect && !disabled;\n const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (interactive && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n onSelect?.();\n }\n };\n\n return (\n <div\n {...rest}\n ref={setRefs}\n className={cn(\"smwb-thumb-card\", className, {\n \"smwb-thumb-card--selected\": selected,\n \"smwb-thumb-card--disabled\": disabled,\n \"smwb-thumb-card--interactive\": interactive,\n })}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n aria-pressed={onSelect ? (selected ?? false) : undefined}\n aria-disabled={disabled || undefined}\n onClick={interactive ? () => onSelect?.() : undefined}\n onKeyDown={onKeyDown}\n onMouseEnter={onEnter}\n onMouseLeave={onLeave}\n >\n <div className=\"smwb-thumb-card__media\">\n <LazyImage src={src} lazy={lazy} fallback={fallback} />\n {topStart ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart}</div> : null}\n {topEnd ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd}</div> : null}\n </div>\n {caption ? <div className=\"smwb-thumb-card__caption\">{caption}</div> : null}\n {preview && typeof document !== \"undefined\"\n ? createPortal(\n <div\n className=\"smwb-thumb-card__preview\"\n style={{ position: \"fixed\", top: preview.top, left: preview.left }}\n >\n {typeof hoverPreview === \"string\" ? <img src={hoverPreview} alt=\"\" /> : hoverPreview}\n </div>,\n document.body\n )\n : null}\n </div>\n );\n});\n\nexport default ThumbCard;\n"],"names":["ThumbCard","forwardRef","src","caption","selected","onSelect","fallback","hoverPreview","topStart","topEnd","lazy","disabled","hoverDelay","className","rest","ref","cardRef","useRef","setRefs","useForkRef","preview","setPreview","useState","timer","clearTimer","onEnter","rect","_a","onLeave","useEffect","interactive","onKeyDown","event","jsxs","cn","jsx","LazyImage","createPortal"],"mappings":";;;;;;AAiCO,MAAMA,IAAYC,EAA2C,SAClE;AAAA,EACE,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAA8B,IAAI,GAC5CC,IAAUC,EAAWJ,GAAKC,CAAO,GACjC,CAACI,GAASC,CAAU,IAAIC,EAA+C,IAAI,GAC3EC,IAAQN,EAA6C,IAAI,GAEzDO,IAAa,MAAY;AAC7B,IAAID,EAAM,YACR,aAAaA,EAAM,OAAO,GAC1BA,EAAM,UAAU;AAAA,EAEpB,GACME,IAAU,MAAY;AAC1B,IAAIlB,KAAgB,QAAQI,MAC5Ba,EAAA,GACAD,EAAM,UAAU,WAAW,MAAM;;AAC/B,YAAMG,KAAOC,IAAAX,EAAQ,YAAR,gBAAAW,EAAiB;AAC9B,MAAID,KAAML,EAAW,EAAE,KAAKK,EAAK,KAAK,MAAMA,EAAK,QAAQ,GAAG;AAAA,IAC9D,GAAGd,CAAU;AAAA,EACf,GACMgB,IAAU,MAAY;AAC1B,IAAAJ,EAAA,GACAH,EAAW,IAAI;AAAA,EACjB;AACA,EAAAQ,EAAU,MAAML,GAAY,EAAE;AAE9B,QAAMM,IAAc,CAAC,CAACzB,KAAY,CAACM,GAC7BoB,IAAY,CAACC,MAAqD;AACtE,IAAIF,MAAgBE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzDA,EAAM,eAAA,GACN3B,KAAA,QAAAA;AAAA,EAEJ;AAEA,SACE,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGnB;AAAA,MACJ,KAAKI;AAAA,MACL,WAAWgB,EAAG,mBAAmBrB,GAAW;AAAA,QAC1C,6BAA6BT;AAAA,QAC7B,6BAA6BO;AAAA,QAC7B,gCAAgCmB;AAAA,MAAA,CACjC;AAAA,MACD,MAAMA,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,gBAAczB,IAAYD,KAAA,OAAAA,IAAY,KAAS;AAAA,MAC/C,iBAAeO,KAAY;AAAA,MAC3B,SAASmB,IAAc,MAAMzB,KAAA,gBAAAA,MAAe;AAAA,MAC5C,WAAA0B;AAAA,MACA,cAAcN;AAAA,MACd,cAAcG;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAA,EAAU,KAAAlC,GAAU,MAAAQ,GAAY,UAAAJ,EAAA,CAAoB;AAAA,UACpDE,IAAW,gBAAA2B,EAAC,OAAA,EAAI,WAAU,sDAAsD,aAAS,IAAS;AAAA,UAClG1B,IAAS,gBAAA0B,EAAC,OAAA,EAAI,WAAU,oDAAoD,aAAO,IAAS;AAAA,QAAA,GAC/F;AAAA,QACChC,IAAU,gBAAAgC,EAAC,OAAA,EAAI,WAAU,4BAA4B,aAAQ,IAAS;AAAA,QACtEf,KAAW,OAAO,YAAa,cAC5BiB;AAAA,UACE,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,UAAU,SAAS,KAAKf,EAAQ,KAAK,MAAMA,EAAQ,KAAA;AAAA,cAE3D,UAAA,OAAOb,KAAiB,WAAW,gBAAA4B,EAAC,SAAI,KAAK5B,GAAc,KAAI,GAAA,CAAG,IAAKA;AAAA,YAAA;AAAA,UAAA;AAAA,UAE1E,SAAS;AAAA,QAAA,IAEX;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsxs as w, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import c from "clsx";
|
|
3
|
+
import { Modal as r } from "../modal/modal.js";
|
|
4
|
+
import { TextField as e } from "../../inputs/textField/textField.js";
|
|
5
|
+
import { Button as _ } from "../../inputs/button/button.js";
|
|
6
|
+
function D({
|
|
7
|
+
open: p,
|
|
8
|
+
title: o,
|
|
9
|
+
nameLabel: t,
|
|
10
|
+
name: d,
|
|
11
|
+
onNameChange: s,
|
|
12
|
+
previewSrc: f,
|
|
13
|
+
onCapture: h,
|
|
14
|
+
captureLabel: v,
|
|
15
|
+
busy: l,
|
|
16
|
+
confirmLabel: x,
|
|
17
|
+
cancelLabel: u,
|
|
18
|
+
onConfirm: F,
|
|
19
|
+
onClose: k,
|
|
20
|
+
children: j,
|
|
21
|
+
className: z
|
|
22
|
+
}) {
|
|
23
|
+
const S = s !== void 0 || d !== void 0;
|
|
24
|
+
return /* @__PURE__ */ w(r, { open: p, onClose: k, size: "small", children: [
|
|
25
|
+
/* @__PURE__ */ i(r.Header, { children: o != null ? o : "Save" }),
|
|
26
|
+
/* @__PURE__ */ i(r.Content, { children: /* @__PURE__ */ w("div", { className: c("smwb-save-asset-dialog__body", z), children: [
|
|
27
|
+
S ? /* @__PURE__ */ i(
|
|
28
|
+
e,
|
|
29
|
+
{
|
|
30
|
+
label: t != null ? t : "Name",
|
|
31
|
+
value: d != null ? d : "",
|
|
32
|
+
disabled: !!l,
|
|
33
|
+
onChange: (T) => s == null ? void 0 : s(T.currentTarget.value)
|
|
34
|
+
}
|
|
35
|
+
) : null,
|
|
36
|
+
f ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: f, alt: "" }) }) : null,
|
|
37
|
+
h ? /* @__PURE__ */ i(
|
|
38
|
+
_,
|
|
39
|
+
{
|
|
40
|
+
variant: "outlined",
|
|
41
|
+
size: "small",
|
|
42
|
+
disabled: !!l,
|
|
43
|
+
onClick: () => h(),
|
|
44
|
+
label: v != null ? v : "Capture preview"
|
|
45
|
+
}
|
|
46
|
+
) : null,
|
|
47
|
+
j
|
|
48
|
+
] }) }),
|
|
49
|
+
/* @__PURE__ */ w(r.Footer, { children: [
|
|
50
|
+
/* @__PURE__ */ i(_, { variant: "text", disabled: !!l, onClick: () => k(), label: u != null ? u : "Cancel" }),
|
|
51
|
+
/* @__PURE__ */ i(_, { variant: "contained", disabled: !!l, onClick: () => F(), label: x != null ? x : "Save" })
|
|
52
|
+
] })
|
|
53
|
+
] });
|
|
54
|
+
}
|
|
55
|
+
export {
|
|
56
|
+
D as SaveAssetDialog,
|
|
57
|
+
D as default
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=saveAssetDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"saveAssetDialog.js","sources":["../../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n open: boolean;\n title?: string;\n /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n nameLabel?: string;\n name?: string;\n onNameChange?: (name: string) => void;\n /** Preview image URL (e.g. a freshly captured thumbnail). */\n previewSrc?: string;\n /** Shows a Capture button when provided. */\n onCapture?: () => void;\n captureLabel?: string;\n /** Disables the actions + name field while a save/capture is in flight. */\n busy?: boolean;\n confirmLabel?: string;\n cancelLabel?: string;\n onConfirm: () => void;\n onClose: () => void;\n /** Extra content between the name field/preview and the actions. */\n children?: React.ReactNode;\n className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n open,\n title,\n nameLabel,\n name,\n onNameChange,\n previewSrc,\n onCapture,\n captureLabel,\n busy,\n confirmLabel,\n cancelLabel,\n onConfirm,\n onClose,\n children,\n className,\n}: SaveAssetDialogProps): React.ReactElement {\n const showNameField = onNameChange !== undefined || name !== undefined;\n\n return (\n <Modal open={open} onClose={onClose} size=\"small\">\n <Modal.Header>{title ?? \"Save\"}</Modal.Header>\n <Modal.Content>\n <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n {showNameField ? (\n <TextField\n label={nameLabel ?? \"Name\"}\n value={name ?? \"\"}\n disabled={!!busy}\n onChange={(event) => onNameChange?.(event.currentTarget.value)}\n />\n ) : null}\n {previewSrc ? (\n <div className=\"smwb-save-asset-dialog__preview\">\n <img src={previewSrc} alt=\"\" />\n </div>\n ) : null}\n {onCapture ? (\n <Button\n variant=\"outlined\"\n size=\"small\"\n disabled={!!busy}\n onClick={() => onCapture()}\n label={captureLabel ?? \"Capture preview\"}\n />\n ) : null}\n {children}\n </div>\n </Modal.Content>\n <Modal.Footer>\n <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n </Modal.Footer>\n </Modal>\n );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","jsxs","Modal","jsx","cn","TextField","event","Button"],"mappings":";;;;;AAkCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,SACxC,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAM,QAAN,EAAc,UAAAhB,KAAA,OAAAA,IAAS,QAAO;AAAA,IAC/B,gBAAAiB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,gCAAgCL,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACa,MAAUjB,KAAA,gBAAAA,EAAeiB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHhB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACd;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAG,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACI,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsxs as t, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import c from "clsx";
|
|
3
|
+
import { Slider as m } from "../slider/slider.js";
|
|
4
|
+
function h(r, l) {
|
|
5
|
+
return typeof r == "function" ? r(l) : Array.isArray(l) ? `${l[0]} – ${l[1]}` : l == null ? "" : String(l);
|
|
6
|
+
}
|
|
7
|
+
function w({
|
|
8
|
+
readout: r,
|
|
9
|
+
endAdornment: l,
|
|
10
|
+
onReset: i,
|
|
11
|
+
resetLabel: s,
|
|
12
|
+
label: e,
|
|
13
|
+
className: u,
|
|
14
|
+
...a
|
|
15
|
+
}) {
|
|
16
|
+
const d = r !== void 0 && r !== !1, o = e != null || d || l != null || i != null;
|
|
17
|
+
return /* @__PURE__ */ t("div", { className: c("smwb-value-slider", u), children: [
|
|
18
|
+
o ? /* @__PURE__ */ t("div", { className: "smwb-value-slider__header", children: [
|
|
19
|
+
e != null ? /* @__PURE__ */ n("span", { className: "smwb-value-slider__label", children: e }) : null,
|
|
20
|
+
/* @__PURE__ */ n("span", { className: "smwb-value-slider__spacer" }),
|
|
21
|
+
d ? /* @__PURE__ */ n("span", { className: "smwb-value-slider__readout", children: h(r, a.value) }) : null,
|
|
22
|
+
l,
|
|
23
|
+
i != null ? /* @__PURE__ */ n(
|
|
24
|
+
"button",
|
|
25
|
+
{
|
|
26
|
+
type: "button",
|
|
27
|
+
className: "smwb-value-slider__reset",
|
|
28
|
+
"aria-label": s != null ? s : "Reset",
|
|
29
|
+
disabled: !!a.disabled,
|
|
30
|
+
onClick: () => i(),
|
|
31
|
+
children: /* @__PURE__ */ n(
|
|
32
|
+
"svg",
|
|
33
|
+
{
|
|
34
|
+
viewBox: "0 0 24 24",
|
|
35
|
+
width: "16",
|
|
36
|
+
height: "16",
|
|
37
|
+
"aria-hidden": "true",
|
|
38
|
+
fill: "none",
|
|
39
|
+
stroke: "currentColor",
|
|
40
|
+
strokeWidth: "2",
|
|
41
|
+
children: /* @__PURE__ */ n("path", { d: "M3 12a9 9 0 1 0 3-6.7M3 4v4h4", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
42
|
+
}
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
) : null
|
|
46
|
+
] }) : null,
|
|
47
|
+
/* @__PURE__ */ n(m, { ...a })
|
|
48
|
+
] });
|
|
49
|
+
}
|
|
50
|
+
export {
|
|
51
|
+
w as ValueSlider,
|
|
52
|
+
w as default
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=valueSlider.js.map
|