@caseparts-org/caseblocks 0.0.206 → 0.0.208
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/Availability.css +1 -1
- package/dist/assets/DropdownButton.css +1 -0
- package/dist/atoms/DropdownButton/DropdownButton.d.ts +26 -0
- package/dist/atoms/DropdownButton/DropdownButton.js +133 -0
- package/dist/atoms/DropdownButton/DropdownButton.stories.d.ts +13 -0
- package/dist/atoms/DropdownButton/DropdownButton.stories.js +33 -0
- package/dist/atoms/Popover/Popover.d.ts +1 -0
- package/dist/atoms/Popover/Popover.js +44 -43
- package/dist/main-client.d.ts +2 -0
- package/dist/main-client.js +51 -49
- package/dist/main-server.d.ts +1 -1
- package/dist/molecules/Availability/Availability.d.ts +14 -5
- package/dist/molecules/Availability/Availability.js +61 -30
- package/dist/molecules/Availability/Availability.stories.d.ts +14 -13
- package/dist/molecules/Availability/Availability.stories.js +81 -46
- package/dist/molecules/Cart/Cart.d.ts +3 -3
- package/dist/molecules/Cart/Cart.stories.d.ts +15 -0
- package/dist/molecules/Cart/Cart.stories.js +4 -6
- package/dist/molecules/Cart/CartPart.d.ts +4 -5
- package/dist/molecules/Cart/CartPart.js +41 -42
- package/dist/molecules/Cart/CartPart.stories.d.ts +3 -3
- package/dist/molecules/Cart/CartPart.stories.js +30 -20
- package/dist/molecules/Cart/CartSlideInPanel.d.ts +1 -4
- package/dist/molecules/Cart/CartSlideInPanel.js +12 -16
- package/dist/organisms/MainNav/MainNav.stories.js +6 -8
- package/dist/organisms/Product/Product.d.ts +1 -1
- package/dist/organisms/Product/Product.js +76 -77
- package/dist/organisms/Product/Product.stories.d.ts +0 -11
- package/dist/organisms/Product/Product.stories.js +12 -25
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._availability_9rzvh_1{font-style:italic}._tooltipContent_9rzvh_5{max-width:370px}._tooltipContent_9rzvh_5>ul{padding:0;margin:var(--spacing-spacing-2xs) 0}._tooltipContent_9rzvh_5 li{list-style:none}._available_9rzvh_18,._in-stock_9rzvh_18{color:var(--color-alerts-success)}._limited_9rzvh_21{color:var(--color-alerts-warning)}._discontinued_9rzvh_24{color:var(--color-alerts-error-warning)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._root_1s2i7_1{display:inline-flex;align-items:stretch}._segment_1s2i7_6{height:100%}._segment-sm_1s2i7_10{min-height:22px}._segment-md_1s2i7_14{min-height:32px}._segment-lg_1s2i7_18{min-height:40px}._actionSegment_1s2i7_22{border-top-right-radius:0;border-bottom-right-radius:0}._actionSegment-sm_1s2i7_27{min-width:70px}._actionSegment-md_1s2i7_31{min-width:90px}._actionSegment-lg_1s2i7_35{min-width:112px}._toggleSegment_1s2i7_39{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid white;padding-inline:var(--spacing-spacing-2xs)}._toggleSegment-sm_1s2i7_46{min-width:26px}._toggleSegment-md_1s2i7_50{min-width:32px}._toggleSegment-lg_1s2i7_54{min-width:40px}._menu_1s2i7_58{--menu-item-hover-background: var(--surface-surface-secondary);padding:var(--spacing-spacing-2xs);min-width:0;box-sizing:border-box}._menu-primary_1s2i7_65{--menu-item-hover-background: var(--color-brand-secondary-dark-teal-blue);background-color:var(--surface-surface-primary-btn);color:var(--surface-surface-primary)}._menu-secondary_1s2i7_71{--menu-item-hover-background: var(--surface-surface-secondary);background-color:var(--surface-surface-secondary-btn);color:var(--text-text-links)}._menu-secondary-transparent_1s2i7_77{--menu-item-hover-background: var(--color-neutrals-neutral-2);background-color:var(--color-neutrals-neutral-1);color:#000}._menu-cta-primary_1s2i7_83{--menu-item-hover-background: var(--surface-surface-call-to-action-btn-focus);background-color:var(--surface-surface-call-to-action-btn);color:var(--surface-surface-primary)}._menu-tertiary_1s2i7_89{--menu-item-hover-background: var(--surface-surface-tertiary-btn-focus);background-color:var(--surface-surface-tertiary-btn);color:var(--surface-surface-tertiary-btn-focus)}._menu-destructive_1s2i7_95{--menu-item-hover-background: var(--border-border-error-warning);background-color:var(--surface-surface-error-warning-btn);color:var(--surface-surface-primary)}._menuList_1s2i7_101{display:flex;flex-direction:column;width:100%}._menuItem_1s2i7_107{background:transparent;border:none;border-radius:var(--border-radius-xs);color:inherit;cursor:pointer;display:flex;justify-content:flex-start;padding:var(--spacing-spacing-3xs);text-align:left;width:100%;box-sizing:border-box}._menuItem_1s2i7_107:hover{background:var(--menu-item-hover-background)}._menuItem_1s2i7_107:disabled{color:var(--surface-surface-disabled-btn);cursor:default}._menuItem_1s2i7_107:disabled:hover{background:transparent}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ButtonProps } from '../Button/Button';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type DropdownButtonSize = "sm" | "md" | "lg";
|
|
4
|
+
export interface DropdownButtonOption {
|
|
5
|
+
key: React.Key;
|
|
6
|
+
label: React.ReactNode;
|
|
7
|
+
onClick: () => void;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface DropdownButtonStyles {
|
|
11
|
+
root?: string;
|
|
12
|
+
action?: string;
|
|
13
|
+
toggle?: string;
|
|
14
|
+
menu?: string;
|
|
15
|
+
menuItem?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface DropdownButtonProps extends Omit<ButtonProps, "children" | "size"> {
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
size: DropdownButtonSize;
|
|
20
|
+
options: DropdownButtonOption[];
|
|
21
|
+
menuLabel?: string;
|
|
22
|
+
toggleLabel?: string;
|
|
23
|
+
styles?: DropdownButtonStyles;
|
|
24
|
+
}
|
|
25
|
+
export declare function DropdownButton({ children, options, menuLabel, toggleLabel, styles: styleOverrides, size, variant, hideAt, className, disabled, type, ...otherProps }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { jsxs as R, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import * as i from "react";
|
|
3
|
+
import { c as s } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { getHideAtStyles as $ } from "../HideAt.js";
|
|
5
|
+
import { Icon as k } from "../Icon/Icon.js";
|
|
6
|
+
import { Popover as W } from "../Popover/Popover.js";
|
|
7
|
+
import { buttonClassNames as S } from "../Button/buttonClassName.js";
|
|
8
|
+
import { Text as j } from "../Text/Text.js";
|
|
9
|
+
import '../../assets/DropdownButton.css';const B = "_root_1s2i7_1", D = "_segment_1s2i7_6", M = "_actionSegment_1s2i7_22", T = "_toggleSegment_1s2i7_39", A = "_menu_1s2i7_58", E = "_menuList_1s2i7_101", H = "_menuItem_1s2i7_107", n = {
|
|
10
|
+
root: B,
|
|
11
|
+
segment: D,
|
|
12
|
+
"segment-sm": "_segment-sm_1s2i7_10",
|
|
13
|
+
"segment-md": "_segment-md_1s2i7_14",
|
|
14
|
+
"segment-lg": "_segment-lg_1s2i7_18",
|
|
15
|
+
actionSegment: M,
|
|
16
|
+
"actionSegment-sm": "_actionSegment-sm_1s2i7_27",
|
|
17
|
+
"actionSegment-md": "_actionSegment-md_1s2i7_31",
|
|
18
|
+
"actionSegment-lg": "_actionSegment-lg_1s2i7_35",
|
|
19
|
+
toggleSegment: T,
|
|
20
|
+
"toggleSegment-sm": "_toggleSegment-sm_1s2i7_46",
|
|
21
|
+
"toggleSegment-md": "_toggleSegment-md_1s2i7_50",
|
|
22
|
+
"toggleSegment-lg": "_toggleSegment-lg_1s2i7_54",
|
|
23
|
+
menu: A,
|
|
24
|
+
"menu-primary": "_menu-primary_1s2i7_65",
|
|
25
|
+
"menu-secondary": "_menu-secondary_1s2i7_71",
|
|
26
|
+
"menu-secondary-transparent": "_menu-secondary-transparent_1s2i7_77",
|
|
27
|
+
"menu-cta-primary": "_menu-cta-primary_1s2i7_83",
|
|
28
|
+
"menu-tertiary": "_menu-tertiary_1s2i7_89",
|
|
29
|
+
"menu-destructive": "_menu-destructive_1s2i7_95",
|
|
30
|
+
menuList: E,
|
|
31
|
+
menuItem: H
|
|
32
|
+
};
|
|
33
|
+
function U({
|
|
34
|
+
children: p,
|
|
35
|
+
options: u,
|
|
36
|
+
menuLabel: b = "More actions",
|
|
37
|
+
toggleLabel: d = "Open actions menu",
|
|
38
|
+
styles: t,
|
|
39
|
+
size: e,
|
|
40
|
+
variant: c,
|
|
41
|
+
hideAt: f,
|
|
42
|
+
className: h,
|
|
43
|
+
disabled: _,
|
|
44
|
+
type: N = "button",
|
|
45
|
+
...x
|
|
46
|
+
}) {
|
|
47
|
+
const C = u.length > 0, a = _ || !C, I = e === "sm" ? "xs" : e === "md" ? "sm" : "md", l = i.useRef(null), [w, L] = i.useState();
|
|
48
|
+
return i.useLayoutEffect(() => {
|
|
49
|
+
const g = l.current;
|
|
50
|
+
if (!g) return;
|
|
51
|
+
const m = () => {
|
|
52
|
+
L(g.getBoundingClientRect().width + 2);
|
|
53
|
+
};
|
|
54
|
+
m();
|
|
55
|
+
const r = new ResizeObserver(m);
|
|
56
|
+
return r.observe(g), () => {
|
|
57
|
+
r.disconnect();
|
|
58
|
+
};
|
|
59
|
+
}, []), /* @__PURE__ */ R(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
ref: l,
|
|
63
|
+
className: s(n.root, $(f), h, t == null ? void 0 : t.root),
|
|
64
|
+
role: "group",
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ o(
|
|
67
|
+
"button",
|
|
68
|
+
{
|
|
69
|
+
className: s(
|
|
70
|
+
S({ size: e, variant: c, disabled: _, className: t == null ? void 0 : t.action }),
|
|
71
|
+
n.segment,
|
|
72
|
+
n[`segment-${e}`],
|
|
73
|
+
n[`actionSegment-${e}`],
|
|
74
|
+
n.actionSegment
|
|
75
|
+
),
|
|
76
|
+
disabled: _,
|
|
77
|
+
type: N,
|
|
78
|
+
...x,
|
|
79
|
+
children: p
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
/* @__PURE__ */ o(
|
|
83
|
+
W,
|
|
84
|
+
{
|
|
85
|
+
disabled: a,
|
|
86
|
+
position: "bottom right",
|
|
87
|
+
contentClassName: s(n.menu, n[`menu-${c}`], t == null ? void 0 : t.menu),
|
|
88
|
+
contentStyle: { width: w },
|
|
89
|
+
closeOnOutsideClick: !0,
|
|
90
|
+
trigger: /* @__PURE__ */ o(
|
|
91
|
+
"button",
|
|
92
|
+
{
|
|
93
|
+
type: "button",
|
|
94
|
+
className: s(
|
|
95
|
+
S({
|
|
96
|
+
size: e,
|
|
97
|
+
variant: c,
|
|
98
|
+
disabled: a,
|
|
99
|
+
className: t == null ? void 0 : t.toggle
|
|
100
|
+
}),
|
|
101
|
+
n.segment,
|
|
102
|
+
n[`segment-${e}`],
|
|
103
|
+
n[`toggleSegment-${e}`],
|
|
104
|
+
n.toggleSegment
|
|
105
|
+
),
|
|
106
|
+
"aria-label": d,
|
|
107
|
+
disabled: a,
|
|
108
|
+
children: /* @__PURE__ */ o(k, { iconKey: "fa-solid fa-chevron-down", size: "3xs" })
|
|
109
|
+
}
|
|
110
|
+
),
|
|
111
|
+
children: ({ close: g }) => /* @__PURE__ */ o("div", { className: n.menuList, role: "menu", "aria-label": b, children: u.map((m) => /* @__PURE__ */ o(
|
|
112
|
+
"button",
|
|
113
|
+
{
|
|
114
|
+
type: "button",
|
|
115
|
+
role: "menuitem",
|
|
116
|
+
className: s(n.menuItem, t == null ? void 0 : t.menuItem),
|
|
117
|
+
disabled: m.disabled,
|
|
118
|
+
onClick: () => {
|
|
119
|
+
m.onClick(), g();
|
|
120
|
+
},
|
|
121
|
+
children: /* @__PURE__ */ o(j, { size: I, children: m.label })
|
|
122
|
+
},
|
|
123
|
+
m.key
|
|
124
|
+
)) })
|
|
125
|
+
}
|
|
126
|
+
)
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
export {
|
|
132
|
+
U as DropdownButton
|
|
133
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { DropdownButton } from './DropdownButton';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof DropdownButton;
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
tags: string[];
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const AllProps: Story;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { DropdownButton as o } from "./DropdownButton.js";
|
|
2
|
+
const e = {
|
|
3
|
+
title: "Case Parts/Atoms/DropdownButton",
|
|
4
|
+
component: o,
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: "centered"
|
|
7
|
+
},
|
|
8
|
+
tags: ["autodocs"]
|
|
9
|
+
}, a = {
|
|
10
|
+
args: {
|
|
11
|
+
children: "Save",
|
|
12
|
+
size: "md",
|
|
13
|
+
variant: "primary",
|
|
14
|
+
options: [
|
|
15
|
+
{
|
|
16
|
+
key: "submit",
|
|
17
|
+
label: "Claim and Submit",
|
|
18
|
+
onClick: () => {
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
key: "review",
|
|
23
|
+
label: "Save for review",
|
|
24
|
+
onClick: () => {
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
a as AllProps,
|
|
32
|
+
e as default
|
|
33
|
+
};
|
|
@@ -12,6 +12,7 @@ export type PopoverProps = {
|
|
|
12
12
|
position?: Position;
|
|
13
13
|
popoverClassName?: string;
|
|
14
14
|
contentClassName?: string;
|
|
15
|
+
contentStyle?: React.CSSProperties;
|
|
15
16
|
disabled?: boolean;
|
|
16
17
|
closeOnOutsideClick?: boolean;
|
|
17
18
|
/** If true, clicking any element with `data-popover-close` inside content will close */
|
|
@@ -1,50 +1,51 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as H, Fragment as N, jsx as z } from "react/jsx-runtime";
|
|
2
2
|
import * as f from "react";
|
|
3
|
-
import { r as
|
|
4
|
-
import { c as
|
|
5
|
-
import '../../assets/Popover.css';const
|
|
6
|
-
popover:
|
|
7
|
-
content:
|
|
3
|
+
import { r as W } from "../../index-BkF-BQ3Q.js";
|
|
4
|
+
import { c as P } from "../../clsx-OuTLNxxd.js";
|
|
5
|
+
import '../../assets/Popover.css';const q = "_popover_vlr81_1", D = "_content_vlr81_7", M = {
|
|
6
|
+
popover: q,
|
|
7
|
+
content: D
|
|
8
8
|
};
|
|
9
|
-
function
|
|
9
|
+
function T(r) {
|
|
10
10
|
return r ? r.includes(" ") ? r : `${r} center` : "top center";
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
const d =
|
|
12
|
+
function U(r) {
|
|
13
|
+
const d = T(r).toLowerCase(), [s, c] = d.split(" ");
|
|
14
14
|
return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: c === "left" || c === "top" ? "start" : c === "right" || c === "bottom" ? "end" : "center" };
|
|
15
15
|
}
|
|
16
|
-
function
|
|
17
|
-
const n = r.getBoundingClientRect(),
|
|
18
|
-
let
|
|
19
|
-
s === "top" ?
|
|
20
|
-
const
|
|
21
|
-
return
|
|
16
|
+
function $(r, d, s, c, p = 8) {
|
|
17
|
+
const n = r.getBoundingClientRect(), u = d.getBoundingClientRect();
|
|
18
|
+
let l = 0, a = 0;
|
|
19
|
+
s === "top" ? l = n.top - u.height - p : s === "bottom" ? l = n.bottom + p : s === "left" ? a = n.left - u.width - p : s === "right" && (a = n.right + p), s === "top" || s === "bottom" ? c === "start" ? a = n.left : c === "end" ? a = n.right - u.width : a = n.left + n.width / 2 - u.width / 2 : c === "start" ? l = n.top : c === "end" ? l = n.bottom - u.height : l = n.top + n.height / 2 - u.height / 2;
|
|
20
|
+
const g = window.innerWidth, w = window.innerHeight;
|
|
21
|
+
return l = Math.max(4, Math.min(w - u.height - 4, l)), a = Math.max(4, Math.min(g - u.width - 4, a)), { top: l, left: a };
|
|
22
22
|
}
|
|
23
|
-
const
|
|
23
|
+
const K = ({
|
|
24
24
|
trigger: r,
|
|
25
25
|
children: d,
|
|
26
26
|
position: s,
|
|
27
27
|
popoverClassName: c,
|
|
28
28
|
contentClassName: p,
|
|
29
|
-
|
|
29
|
+
contentStyle: n,
|
|
30
|
+
disabled: u,
|
|
30
31
|
closeOnOutsideClick: l = !0,
|
|
31
32
|
closeOnInsideClickAttr: a = !0,
|
|
32
|
-
open:
|
|
33
|
+
open: g,
|
|
33
34
|
onOpenChange: w
|
|
34
35
|
}) => {
|
|
35
|
-
const { side:
|
|
36
|
+
const { side: y, align: b } = U(s), [S, j] = f.useState(!1), R = typeof g == "boolean", o = R ? g : S, [m, _] = f.useState(null), L = f.useRef(null), v = f.useRef(null), x = (t) => {
|
|
36
37
|
const e = typeof t == "function" ? t(o) : t;
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
}, E = () =>
|
|
38
|
+
R ? w == null || w(e) : j(e);
|
|
39
|
+
}, k = () => {
|
|
40
|
+
u || x((t) => !t);
|
|
41
|
+
}, E = () => x(!1), B = () => x(!0), F = f.cloneElement(r, {
|
|
41
42
|
ref: (t) => {
|
|
42
43
|
const { ref: e } = r;
|
|
43
|
-
typeof e == "function" ? e(t) : e && (e.current = t),
|
|
44
|
+
typeof e == "function" ? e(t) : e && (e.current = t), L.current = t;
|
|
44
45
|
},
|
|
45
46
|
onClick: (t) => {
|
|
46
47
|
var e, i;
|
|
47
|
-
(i = (e = r.props).onClick) == null || i.call(e, t),
|
|
48
|
+
(i = (e = r.props).onClick) == null || i.call(e, t), k();
|
|
48
49
|
},
|
|
49
50
|
"aria-haspopup": "dialog",
|
|
50
51
|
"aria-expanded": o || void 0,
|
|
@@ -53,22 +54,22 @@ const J = ({
|
|
|
53
54
|
});
|
|
54
55
|
return f.useLayoutEffect(() => {
|
|
55
56
|
if (!o) {
|
|
56
|
-
|
|
57
|
+
_(null);
|
|
57
58
|
return;
|
|
58
59
|
}
|
|
59
|
-
const t =
|
|
60
|
+
const t = L.current, e = v.current;
|
|
60
61
|
if (!t || !e) return;
|
|
61
62
|
const i = () => {
|
|
62
|
-
|
|
63
|
+
_($(t, e, y, b, 8));
|
|
63
64
|
};
|
|
64
65
|
return i(), window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), () => {
|
|
65
66
|
window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0);
|
|
66
67
|
};
|
|
67
|
-
}, [o,
|
|
68
|
+
}, [o, y, b, d]), f.useEffect(() => {
|
|
68
69
|
if (!o || !l) return;
|
|
69
70
|
const t = (e) => {
|
|
70
|
-
const i = v.current,
|
|
71
|
-
!i || !
|
|
71
|
+
const i = v.current, h = L.current;
|
|
72
|
+
!i || !h || i.contains(e.target) || h.contains(e.target) || E();
|
|
72
73
|
};
|
|
73
74
|
return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
|
|
74
75
|
}, [o, l]), f.useEffect(() => {
|
|
@@ -76,9 +77,9 @@ const J = ({
|
|
|
76
77
|
const t = v.current;
|
|
77
78
|
if (!t) return;
|
|
78
79
|
const e = (i) => {
|
|
79
|
-
const
|
|
80
|
-
if (!
|
|
81
|
-
|
|
80
|
+
const h = i.target;
|
|
81
|
+
if (!h) return;
|
|
82
|
+
h.closest('[data-popover-close="true"]') && setTimeout(() => E(), 0);
|
|
82
83
|
};
|
|
83
84
|
return t.addEventListener("click", e), () => t.removeEventListener("click", e);
|
|
84
85
|
}, [o, a]), f.useEffect(() => {
|
|
@@ -94,19 +95,19 @@ const J = ({
|
|
|
94
95
|
);
|
|
95
96
|
t == null || t.focus();
|
|
96
97
|
}
|
|
97
|
-
}, [o]), /* @__PURE__ */
|
|
98
|
-
|
|
99
|
-
o && typeof document < "u" &&
|
|
100
|
-
/* @__PURE__ */
|
|
98
|
+
}, [o]), /* @__PURE__ */ H(N, { children: [
|
|
99
|
+
F,
|
|
100
|
+
o && typeof document < "u" && W.createPortal(
|
|
101
|
+
/* @__PURE__ */ z(
|
|
101
102
|
"div",
|
|
102
103
|
{
|
|
103
104
|
id: "popover-panel",
|
|
104
105
|
ref: v,
|
|
105
106
|
role: "dialog",
|
|
106
107
|
"aria-modal": "false",
|
|
107
|
-
className:
|
|
108
|
-
"data-side":
|
|
109
|
-
"data-align":
|
|
108
|
+
className: P(M.popover, c),
|
|
109
|
+
"data-side": y,
|
|
110
|
+
"data-align": b,
|
|
110
111
|
style: {
|
|
111
112
|
position: "absolute",
|
|
112
113
|
top: (m == null ? void 0 : m.top) ?? 0,
|
|
@@ -114,7 +115,7 @@ const J = ({
|
|
|
114
115
|
visibility: m ? "visible" : "hidden",
|
|
115
116
|
zIndex: 20
|
|
116
117
|
},
|
|
117
|
-
children: /* @__PURE__ */
|
|
118
|
+
children: /* @__PURE__ */ z("div", { className: P(M.content, p), style: n, children: typeof d == "function" ? d({ close: E, open: B, toggle: k }) : d })
|
|
118
119
|
}
|
|
119
120
|
),
|
|
120
121
|
document.body
|
|
@@ -122,5 +123,5 @@ const J = ({
|
|
|
122
123
|
] });
|
|
123
124
|
};
|
|
124
125
|
export {
|
|
125
|
-
|
|
126
|
+
K as Popover
|
|
126
127
|
};
|
package/dist/main-client.d.ts
CHANGED
|
@@ -3,6 +3,8 @@ export { HorizontalScroll } from './atoms/HorizontalScroll/HorizontalScroll';
|
|
|
3
3
|
export type { HorizontalScrollProps } from './atoms/HorizontalScroll/HorizontalScroll';
|
|
4
4
|
export { SlideInPanel } from './atoms/SlideInPanel/SlideInPanel';
|
|
5
5
|
export type { SlideInPanelProps } from './atoms/SlideInPanel/SlideInPanel';
|
|
6
|
+
export { DropdownButton } from './atoms/DropdownButton/DropdownButton';
|
|
7
|
+
export type { DropdownButtonProps, DropdownButtonOption, DropdownButtonStyles } from './atoms/DropdownButton/DropdownButton';
|
|
6
8
|
export { Tooltip } from './atoms/Tooltip/Tooltip';
|
|
7
9
|
export { Popover } from './atoms/Popover/Popover';
|
|
8
10
|
export type { PopoverProps } from './atoms/Popover/Popover';
|
package/dist/main-client.js
CHANGED
|
@@ -8,13 +8,13 @@ import { Separator as C } from "./atoms/Separator/Separator.js";
|
|
|
8
8
|
import { Text as S } from "./atoms/Text/Text.js";
|
|
9
9
|
import { Input as A } from "./atoms/Input/Input.js";
|
|
10
10
|
import { ToggleSwitch as k } from "./atoms/ToggleSwitch/ToggleSwitch.js";
|
|
11
|
-
import { Link as
|
|
11
|
+
import { Link as I } from "./atoms/Link/Link.js";
|
|
12
12
|
import { linkClassName as h } from "./atoms/Link/linkClassName.js";
|
|
13
|
-
import { configureLink as
|
|
13
|
+
import { configureLink as w, routerOverride as L } from "./atoms/Link/configureLink.js";
|
|
14
14
|
import { LinkButton as y } from "./atoms/LinkButton/LinkButton.js";
|
|
15
15
|
import { configureImage as H } from "./atoms/Image/configureImage.js";
|
|
16
16
|
import { getHideAtStyles as N } from "./atoms/HideAt.js";
|
|
17
|
-
import { Logo as
|
|
17
|
+
import { Logo as D } from "./molecules/Logo/Logo.js";
|
|
18
18
|
import { SearchBox as E } from "./molecules/SearchBox/SearchBox.js";
|
|
19
19
|
import { QuantityInput as O } from "./molecules/QuantityInput/QuantityInput.js";
|
|
20
20
|
import { Pricing as R } from "./molecules/Pricing/Pricing.js";
|
|
@@ -28,79 +28,81 @@ import { Admonition as eo } from "./molecules/Admonition/Admonition.js";
|
|
|
28
28
|
import { NotFound as mo } from "./organisms/NotFound/NotFound.js";
|
|
29
29
|
import { HorizontalScroll as fo } from "./atoms/HorizontalScroll/HorizontalScroll.js";
|
|
30
30
|
import { SlideInPanel as ao } from "./atoms/SlideInPanel/SlideInPanel.js";
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
31
|
+
import { DropdownButton as no } from "./atoms/DropdownButton/DropdownButton.js";
|
|
32
|
+
import { Tooltip as uo } from "./atoms/Tooltip/Tooltip.js";
|
|
33
|
+
import { Popover as Co } from "./atoms/Popover/Popover.js";
|
|
34
|
+
import { Account as So } from "./molecules/Account/Account.js";
|
|
35
|
+
import { Chip as Ao } from "./molecules/Chip/Chip.js";
|
|
36
|
+
import { ToggleView as ko } from "./molecules/ToggleView/ToggleView.js";
|
|
37
|
+
import { CartPart as Io } from "./molecules/Cart/CartPart.js";
|
|
38
|
+
import { AddToCartPart as ho } from "./molecules/AddToCartPart/AddToCartPart.js";
|
|
39
|
+
import { CartSlideInPanel as wo } from "./molecules/Cart/CartSlideInPanel.js";
|
|
40
|
+
import { StatefulButton as bo } from "./molecules/StatefulButton/StatefulButton.js";
|
|
41
|
+
import { AnimatedCheckMark as Fo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
|
|
42
|
+
import { AddToCart as Mo } from "./molecules/AddToCart/AddToCart.js";
|
|
43
|
+
import { Modal as Vo } from "./molecules/Modal/Modal.js";
|
|
44
|
+
import { ImageViewer as zo } from "./molecules/ImageViewer/ImageViewer.js";
|
|
45
|
+
import { T as Go } from "./Table-BX4PtCNE.js";
|
|
46
|
+
import { Error as Qo } from "./molecules/Error/Error.js";
|
|
47
|
+
import { MainNav as Zo } from "./organisms/MainNav/MainNav.js";
|
|
48
|
+
import { ChipSelector as qo } from "./organisms/ChipSelector/ChipSelector.js";
|
|
49
|
+
import { Product as Ko } from "./organisms/Product/Product.js";
|
|
50
|
+
import { Carousel as Wo } from "./organisms/Carousel/Carousel.js";
|
|
51
|
+
import { Footer as Yo } from "./organisms/Footer/Footer.js";
|
|
52
|
+
import { default as $o } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
|
|
52
53
|
export {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
So as Account,
|
|
55
|
+
Mo as AddToCart,
|
|
56
|
+
ho as AddToCartPart,
|
|
56
57
|
eo as Admonition,
|
|
57
|
-
|
|
58
|
+
Fo as AnimatedCheckMark,
|
|
58
59
|
j as Availability,
|
|
59
60
|
J as Avatar,
|
|
60
61
|
U as BannerCard,
|
|
61
62
|
_ as Breadcrumbs,
|
|
62
63
|
e as Button,
|
|
63
64
|
X as CardLink,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
Wo as Carousel,
|
|
66
|
+
Io as CartPart,
|
|
67
|
+
wo as CartSlideInPanel,
|
|
68
|
+
Ao as Chip,
|
|
69
|
+
qo as ChipSelector,
|
|
69
70
|
f as Column,
|
|
70
71
|
oo as Disclaimer,
|
|
71
|
-
|
|
72
|
+
no as DropdownButton,
|
|
73
|
+
Qo as Error,
|
|
72
74
|
m as Flex,
|
|
73
|
-
|
|
75
|
+
Yo as Footer,
|
|
74
76
|
x as Grid,
|
|
75
77
|
i as Head,
|
|
76
78
|
fo as HorizontalScroll,
|
|
77
79
|
l as Icon,
|
|
78
|
-
|
|
80
|
+
zo as ImageViewer,
|
|
79
81
|
A as Input,
|
|
80
|
-
|
|
82
|
+
I as Link,
|
|
81
83
|
y as LinkButton,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
84
|
+
D as Logo,
|
|
85
|
+
Zo as MainNav,
|
|
86
|
+
Vo as Modal,
|
|
85
87
|
mo as NotFound,
|
|
86
|
-
|
|
88
|
+
Co as Popover,
|
|
87
89
|
R as Pricing,
|
|
88
|
-
|
|
90
|
+
Ko as Product,
|
|
89
91
|
O as QuantityInput,
|
|
90
92
|
u as Root,
|
|
91
93
|
E as SearchBox,
|
|
92
94
|
C as Separator,
|
|
93
95
|
ao as SlideInPanel,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
96
|
+
$o as SpinZoomViewer,
|
|
97
|
+
bo as StatefulButton,
|
|
98
|
+
Go as Table,
|
|
97
99
|
S as Text,
|
|
98
100
|
k as ToggleSwitch,
|
|
99
|
-
|
|
100
|
-
|
|
101
|
+
ko as ToggleView,
|
|
102
|
+
uo as Tooltip,
|
|
101
103
|
H as configureImage,
|
|
102
|
-
|
|
104
|
+
w as configureLink,
|
|
103
105
|
N as getHideAtStyles,
|
|
104
106
|
h as linkClassName,
|
|
105
|
-
|
|
107
|
+
L as routerOverride
|
|
106
108
|
};
|
package/dist/main-server.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ export { QuantityInput } from './molecules/QuantityInput/QuantityInput';
|
|
|
35
35
|
export { Pricing } from './molecules/Pricing/Pricing';
|
|
36
36
|
export type { PricingProps } from './molecules/Pricing/Pricing';
|
|
37
37
|
export { Availability } from './molecules/Availability/Availability';
|
|
38
|
-
export type { AvailabilityProps
|
|
38
|
+
export type { AvailabilityProps } from './molecules/Availability/Availability';
|
|
39
39
|
export { Avatar } from './molecules/Avatar/Avatar';
|
|
40
40
|
export type { AvatarProps } from './molecules/Avatar/Avatar';
|
|
41
41
|
export { BannerCard } from './molecules/BannerCard/BannerCard';
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
export type ContactUsLinkBehavior = "same-tab" | "new-tab";
|
|
2
1
|
export interface AvailabilityProps {
|
|
3
|
-
availId:
|
|
2
|
+
availId: AvailabilityId;
|
|
4
3
|
availDescription: string;
|
|
5
|
-
contactHref: string;
|
|
6
|
-
contactLinkBehavior: ContactUsLinkBehavior;
|
|
7
4
|
availClassName?: string;
|
|
5
|
+
enableTooltip?: boolean;
|
|
6
|
+
inventory?: Inventory;
|
|
8
7
|
}
|
|
9
|
-
export
|
|
8
|
+
export interface WarehouseInventory {
|
|
9
|
+
Unreserved: number;
|
|
10
|
+
Available: number;
|
|
11
|
+
}
|
|
12
|
+
export interface Inventory {
|
|
13
|
+
MPK?: WarehouseInventory;
|
|
14
|
+
SEA?: WarehouseInventory;
|
|
15
|
+
STL?: WarehouseInventory;
|
|
16
|
+
}
|
|
17
|
+
export type AvailabilityId = "in-stock" | "limited" | "discontinued" | "available" | "not-found";
|
|
18
|
+
export declare function Availability({ availId: id, availDescription: description, availClassName: className, enableTooltip, inventory }: AvailabilityProps): import("react/jsx-runtime").JSX.Element;
|