@cimpress-ui/react 1.11.0 → 1.12.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/commonjs/components/alert-dialog/alert-dialog.d.ts +28 -24
- package/dist/commonjs/components/alert-dialog/alert-dialog.d.ts.map +1 -1
- package/dist/commonjs/components/alert-dialog/alert-dialog.js +23 -4
- package/dist/commonjs/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/commonjs/components/app-header/app-header.js +1 -1
- package/dist/commonjs/components/app-header/app-header.js.map +1 -1
- package/dist/commonjs/components/menu/menu.d.ts +6 -1
- package/dist/commonjs/components/menu/menu.d.ts.map +1 -1
- package/dist/commonjs/components/menu/menu.js +2 -2
- package/dist/commonjs/components/menu/menu.js.map +1 -1
- package/dist/commonjs/components/slider/slider.d.ts +1 -1
- package/dist/commonjs/components/slider/slider.d.ts.map +1 -1
- package/dist/commonjs/components/slider/slider.js +1 -1
- package/dist/commonjs/components/slider/slider.js.map +1 -1
- package/dist/commonjs/index.d.ts +1 -1
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -1
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/components/alert-dialog/alert-dialog.d.ts +28 -24
- package/dist/esm/components/alert-dialog/alert-dialog.d.ts.map +1 -1
- package/dist/esm/components/alert-dialog/alert-dialog.js +21 -4
- package/dist/esm/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/esm/components/app-header/app-header.js +1 -1
- package/dist/esm/components/app-header/app-header.js.map +1 -1
- package/dist/esm/components/menu/menu.d.ts +6 -1
- package/dist/esm/components/menu/menu.d.ts.map +1 -1
- package/dist/esm/components/menu/menu.js +2 -2
- package/dist/esm/components/menu/menu.js.map +1 -1
- package/dist/esm/components/slider/slider.d.ts +1 -1
- package/dist/esm/components/slider/slider.d.ts.map +1 -1
- package/dist/esm/components/slider/slider.js +1 -1
- package/dist/esm/components/slider/slider.js.map +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import type { CommonProps } from '../types.js';
|
|
3
|
-
export interface
|
|
3
|
+
export interface AlertDialogRenderProps {
|
|
4
4
|
/** Closes the alert dialog when called. */
|
|
5
5
|
close: () => void;
|
|
6
6
|
}
|
|
7
|
-
export interface
|
|
8
|
-
/** Closes the alert dialog when called. */
|
|
9
|
-
close: () => void;
|
|
10
|
-
}
|
|
11
|
-
export interface UNSTABLE_AlertDialogProps extends CommonProps {
|
|
7
|
+
export interface AlertDialogProps extends CommonProps {
|
|
12
8
|
/** The title of the alert dialog. */
|
|
13
9
|
title: string;
|
|
14
10
|
/** The contents of the alert dialog. A function may be provided to access a function to close the dialog. */
|
|
15
|
-
children: ReactNode | ((renderProps:
|
|
11
|
+
children: ReactNode | ((renderProps: AlertDialogRenderProps) => ReactNode);
|
|
16
12
|
/** The tone of the alert dialog. */
|
|
17
13
|
tone: 'info' | 'success' | 'warning' | 'critical';
|
|
18
14
|
/**
|
|
@@ -30,22 +26,30 @@ export interface UNSTABLE_AlertDialogProps extends CommonProps {
|
|
|
30
26
|
* If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.
|
|
31
27
|
*/
|
|
32
28
|
onOpenChange?: (isOpen: boolean) => void;
|
|
33
|
-
/**
|
|
34
|
-
* Handler that is called when the primary action is pressed.
|
|
35
|
-
*/
|
|
36
|
-
onPrimaryActionPress: (args: UNSTABLE_AlertDialogActionArgs) => void;
|
|
37
|
-
/**
|
|
38
|
-
* The label of the primary action.
|
|
39
|
-
*/
|
|
40
|
-
primaryActionLabel: string;
|
|
41
|
-
/**
|
|
42
|
-
* Handler that is called when the secondary action is pressed.
|
|
43
|
-
*/
|
|
44
|
-
onSecondaryActionPress?: (args: UNSTABLE_AlertDialogActionArgs) => void;
|
|
45
|
-
/**
|
|
46
|
-
* The label of the secondary action.
|
|
47
|
-
*/
|
|
48
|
-
secondaryActionLabel: string;
|
|
49
29
|
}
|
|
50
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Renders an overlay that interrupts user activity and requires a user action.
|
|
32
|
+
*
|
|
33
|
+
* See [alert dialog usage guidelines](https://ui.cimpress.io/components/alert-dialog/).
|
|
34
|
+
*/
|
|
35
|
+
declare const _AlertDialog: (props: AlertDialogProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
|
|
36
|
+
export { _AlertDialog as AlertDialog };
|
|
37
|
+
export interface AlertDialogBodyProps {
|
|
38
|
+
/** The content to render within the alert dialog. */
|
|
39
|
+
children: ReactNode;
|
|
40
|
+
}
|
|
41
|
+
/** Renders content within `AlertDialog`. */
|
|
42
|
+
export declare function AlertDialogBody(props: AlertDialogBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare namespace AlertDialogBody {
|
|
44
|
+
var displayName: string;
|
|
45
|
+
}
|
|
46
|
+
export interface AlertDialogActionsProps {
|
|
47
|
+
/** Actions that should be available in the alert dialog. */
|
|
48
|
+
children: ReactNode;
|
|
49
|
+
}
|
|
50
|
+
/** Renders actions within `AlertDialog`. */
|
|
51
|
+
export declare function AlertDialogActions({ children, ...props }: AlertDialogActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
export declare namespace AlertDialogActions {
|
|
53
|
+
var displayName: string;
|
|
54
|
+
}
|
|
51
55
|
//# sourceMappingURL=alert-dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAWrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAU/C,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,6GAA6G;IAC7G,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;IAC3E,oCAAoC;IACpC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAoDD;;;;GAIG;AACH,QAAA,MAAM,YAAY,8GAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAQ1D;yBARe,eAAe;;;AAY/B,MAAM,WAAW,uBAAuB;IACtC,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAMjF;yBANe,kBAAkB"}
|
|
@@ -4,12 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.
|
|
7
|
+
exports.AlertDialog = void 0;
|
|
8
|
+
exports.AlertDialogBody = AlertDialogBody;
|
|
9
|
+
exports.AlertDialogActions = AlertDialogActions;
|
|
8
10
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
11
|
const clsx_1 = __importDefault(require("clsx"));
|
|
10
12
|
const react_aria_components_1 = require("react-aria-components");
|
|
13
|
+
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
11
14
|
const index_js_1 = require("../../icons/index.js");
|
|
12
|
-
const button_js_1 = require("../button/button.js");
|
|
13
15
|
const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
|
|
14
16
|
const stack_js_1 = require("../spacing/stack/stack.js");
|
|
15
17
|
const utils_js_1 = require("../typography/utils.js");
|
|
@@ -19,8 +21,25 @@ const iconMap = {
|
|
|
19
21
|
warning: index_js_1.IconWarning,
|
|
20
22
|
critical: index_js_1.IconWarningCircleFill,
|
|
21
23
|
};
|
|
22
|
-
function
|
|
24
|
+
function AlertDialog({ children, title, tone, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
|
|
23
25
|
const Icon = iconMap[tone];
|
|
24
|
-
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-modal-overlay", isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-alert-dialog-modal', UNSAFE_className), style: UNSAFE_style, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, role: "alertdialog", className: "cim-alert-dialog", "data-tone": tone, children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-alert-dialog-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 32 }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-alert-dialog-title', (0, utils_js_1.textStyle)({ variant: 'title-6', tone: 'base' })), children: title }),
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-modal-overlay", isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-alert-dialog-modal', UNSAFE_className), style: UNSAFE_style, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, role: "alertdialog", className: "cim-alert-dialog", "data-tone": tone, children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-alert-dialog-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 32 }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-alert-dialog-title', (0, utils_js_1.textStyle)({ variant: 'title-6', tone: 'base' })), children: title }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
|
|
25
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* Renders an overlay that interrupts user activity and requires a user action.
|
|
30
|
+
*
|
|
31
|
+
* See [alert dialog usage guidelines](https://ui.cimpress.io/components/alert-dialog/).
|
|
32
|
+
*/
|
|
33
|
+
const _AlertDialog = (0, forward_ref_js_1.forwardRef)(AlertDialog, 'AlertDialog');
|
|
34
|
+
exports.AlertDialog = _AlertDialog;
|
|
35
|
+
/** Renders content within `AlertDialog`. */
|
|
36
|
+
function AlertDialogBody(props) {
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, className: (0, clsx_1.default)('cim-alert-dialog-content', (0, utils_js_1.textStyle)({ variant: 'medium', tone: 'base' })), scrollDirection: "vertical" }));
|
|
38
|
+
}
|
|
39
|
+
AlertDialogBody.displayName = 'AlertDialogBody';
|
|
40
|
+
/** Renders actions within `AlertDialog`. */
|
|
41
|
+
function AlertDialogActions({ children, ...props }) {
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)(stack_js_1.Stack, { ...props, gap: 16, direction: "horizontal", justify: "end", marginTop: 24, children: children }));
|
|
43
|
+
}
|
|
44
|
+
AlertDialogActions.displayName = 'AlertDialogActions';
|
|
26
45
|
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.js","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAsHb,0CAQC;AAUD,gDAMC;;AA5ID,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,mDAA2G;AAC3G,mGAA4F;AAC5F,wDAAkD;AAElD,qDAAmD;AAEnD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,yBAAc;IACpB,OAAO,EAAE,0BAAe;IACxB,OAAO,EAAE,sBAAW;IACpB,QAAQ,EAAE,gCAAqB;CAChC,CAAC;AA+BF,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAA8B;IAE9B,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3B,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAE,KAAK,EACpB,yBAAyB,QACzB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACxF,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,kBAAkB,eAAY,IAAI,YAC5F,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACE,gCAAK,SAAS,EAAC,uBAAuB,YACpC,uBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACd,EAEN,uBAAC,+BAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAEzF,KAAK,GACK,EAEZ,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,IACjE,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,2BAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAEnC,mCAAW;AAOpC,4CAA4C;AAC5C,SAAgB,eAAe,CAAC,KAA2B;IACzD,OAAO,CACL,uBAAC,2CAAkB,OACb,KAAK,EACT,SAAS,EAAE,IAAA,cAAI,EAAC,0BAA0B,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EAC3F,eAAe,EAAC,UAAU,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAOhD,4CAA4C;AAC5C,SAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B;IAChF,OAAO,CACL,uBAAC,gBAAK,OAAK,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAC,YAAY,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAE,EAAE,YAC1E,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n Dialog as RACDialog,\n Heading as RACHeading,\n Modal as RACModal,\n ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst iconMap = {\n info: IconInfoCircle,\n success: IconCheckCircle,\n warning: IconWarning,\n critical: IconWarningCircleFill,\n};\n\nexport interface AlertDialogRenderProps {\n /** Closes the alert dialog when called. */\n close: () => void;\n}\n\nexport interface AlertDialogProps extends CommonProps {\n /** The title of the alert dialog. */\n title: string;\n /** The contents of the alert dialog. A function may be provided to access a function to close the dialog. */\n children: ReactNode | ((renderProps: AlertDialogRenderProps) => ReactNode);\n /** The tone of the alert dialog. */\n tone: 'info' | 'success' | 'warning' | 'critical';\n /**\n * Whether the dialog is open (controlled).\n * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the dialog is open by default (uncontrolled).\n * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the dialog's open state changes.\n * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction AlertDialog(\n {\n children,\n title,\n tone,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n ...props\n }: AlertDialogProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const Icon = iconMap[tone];\n\n return (\n <RACModalOverlay\n className=\"cim-modal-overlay\"\n isDismissable={false}\n isKeyboardDismissDisabled\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-cim-style-root\n >\n <RACModal className={clsx('cim-alert-dialog-modal', UNSAFE_className)} style={UNSAFE_style}>\n <RACDialog {...props} ref={ref} role=\"alertdialog\" className=\"cim-alert-dialog\" data-tone={tone}>\n {(renderProps) => (\n <>\n <div className=\"cim-alert-dialog-icon\">\n <Icon size={32} />\n </div>\n\n <RACHeading\n slot=\"title\"\n className={clsx('cim-alert-dialog-title', textStyle({ variant: 'title-6', tone: 'base' }))}\n >\n {title}\n </RACHeading>\n\n {typeof children === 'function' ? children(renderProps) : children}\n </>\n )}\n </RACDialog>\n </RACModal>\n </RACModalOverlay>\n );\n}\n\n/**\n * Renders an overlay that interrupts user activity and requires a user action.\n *\n * See [alert dialog usage guidelines](https://ui.cimpress.io/components/alert-dialog/).\n */\nconst _AlertDialog = forwardRef(AlertDialog, 'AlertDialog');\n\nexport { _AlertDialog as AlertDialog };\n\nexport interface AlertDialogBodyProps {\n /** The content to render within the alert dialog. */\n children: ReactNode;\n}\n\n/** Renders content within `AlertDialog`. */\nexport function AlertDialogBody(props: AlertDialogBodyProps) {\n return (\n <FocusableContainer\n {...props}\n className={clsx('cim-alert-dialog-content', textStyle({ variant: 'medium', tone: 'base' }))}\n scrollDirection=\"vertical\"\n />\n );\n}\n\nAlertDialogBody.displayName = 'AlertDialogBody';\n\nexport interface AlertDialogActionsProps {\n /** Actions that should be available in the alert dialog. */\n children: ReactNode;\n}\n\n/** Renders actions within `AlertDialog`. */\nexport function AlertDialogActions({ children, ...props }: AlertDialogActionsProps) {\n return (\n <Stack {...props} gap={16} direction=\"horizontal\" justify=\"end\" marginTop={24}>\n {children}\n </Stack>\n );\n}\n\nAlertDialogActions.displayName = 'AlertDialogActions';\n"]}
|
|
@@ -19,7 +19,7 @@ const cimpress_logo_js_1 = require("./cimpress-logo.js");
|
|
|
19
19
|
function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNSTABLE_postTitle: postTitle, UNSTABLE_search: search, UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
20
20
|
const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
|
|
21
21
|
const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
25
25
|
* Displays a basic application header.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAgBlD,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAgBlD,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n title: string;\n /** The props of the link that is rendered around the header title. */\n titleLink: Href | AppHeaderTitleLinkProps;\n /** The tools to render at the end of the header. */\n tools?: ReactNode;\n UNSTABLE_navButton?: ReactNode;\n UNSTABLE_postTitle?: ReactNode;\n UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n {\n title,\n titleLink,\n tools,\n UNSTABLE_navButton: navButton,\n UNSTABLE_postTitle: postTitle,\n UNSTABLE_search: search,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: AppHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const isMobile = useIsMobile();\n\n const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n return (\n <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n <div className=\"cim-app-header-title\">\n {navButton}\n <CimpressLogo height={24} />\n <Divider orientation=\"vertical\" />\n <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n {title}\n </Link>\n </Text>\n\n {postTitle}\n </div>\n\n {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n <div className=\"cim-app-header-tools\">\n {isMobile && tools ? (\n <PopoverRoot>\n <IconButton\n icon={<IconMenuMoreVertical />}\n // TODO: i18n\n aria-label=\"Expand/collapse header\"\n variant=\"tertiary\"\n size=\"small\"\n />\n <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n </Popover>\n </PopoverRoot>\n ) : (\n tools\n )}\n </div>\n </header>\n );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}
|
|
@@ -15,13 +15,18 @@ export declare namespace MenuRoot {
|
|
|
15
15
|
var displayName: string;
|
|
16
16
|
}
|
|
17
17
|
export interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
|
|
18
|
+
/**
|
|
19
|
+
* The alignment of the menu overlay relative to its trigger.
|
|
20
|
+
* @default 'start'
|
|
21
|
+
*/
|
|
22
|
+
align?: 'start' | 'end';
|
|
18
23
|
/** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */
|
|
19
24
|
onAction?: (key: Key) => void;
|
|
20
25
|
/** Handler that is called when the list of items is scrolled. */
|
|
21
26
|
onScroll?: UIEventHandler<HTMLDivElement>;
|
|
22
27
|
}
|
|
23
28
|
/** Displays a collapsible list of options and actions that users can choose from. */
|
|
24
|
-
export declare function Menu<T extends CollectionItem>(props: MenuProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare function Menu<T extends CollectionItem>({ align, ...props }: MenuProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
25
30
|
export declare namespace Menu {
|
|
26
31
|
var displayName: string;
|
|
27
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EAGtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC9F,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EAGtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC9F;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAczF;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ"}
|
|
@@ -24,11 +24,11 @@ function MenuRoot(props) {
|
|
|
24
24
|
}
|
|
25
25
|
MenuRoot.displayName = 'MenuRoot';
|
|
26
26
|
/** Displays a collapsible list of options and actions that users can choose from. */
|
|
27
|
-
function Menu(props) {
|
|
27
|
+
function Menu({ align = 'start', ...props }) {
|
|
28
28
|
if (!(0, is_production_js_1.isProduction)() && props.items != null && typeof props.children !== 'function') {
|
|
29
29
|
console.warn('`Menu` requires `children` to be a function when using `items` prop');
|
|
30
30
|
}
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { placement:
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { placement: `bottom ${align}`, offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { ...props, className: "cim-menu" }) }));
|
|
32
32
|
}
|
|
33
33
|
Menu.displayName = 'Menu';
|
|
34
34
|
/** Groups list items within `Menu` into a section. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AA8Bb,4BAEC;
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, UIEventHandler } from 'react';\nimport {\n Collection as RACCollection,\n Header as RACHeader,\n Menu as RACMenu,\n MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuSection as RACMenuSection,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n Text as RACText,\n} from 'react-aria-components';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n /**\n * The alignment of the menu overlay relative to its trigger.\n * @default 'start'\n */\n align?: 'start' | 'end';\n /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n onAction?: (key: Key) => void;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n console.warn('`Menu` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <CollapsibleList\n placement={`bottom ${align}`}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <RACMenu {...props} className=\"cim-menu\" />\n </CollapsibleList>\n );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuSection {...props} className=\"cim-menu-section\">\n <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACMenuSection>\n );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n extends NavigationProps,\n Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** Additional description for the menu item. */\n description?: string;\n /** An icon representing the menu item. */\n icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n {icon}\n\n <div className=\"cim-menu-item-text\">\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n\n {description && (\n <RACText\n slot=\"description\"\n className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n >\n {description}\n </RACText>\n )}\n </div>\n </>\n )}\n </RACMenuItem>\n );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type SliderProps as RACSliderProps } from 'react-aria-components';
|
|
2
2
|
import type { CommonProps, LabellableProps } from '../types.js';
|
|
3
|
-
export interface UNSTABLE_SliderProps<T extends number | number[] = number> extends CommonProps, LabellableProps, Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step'> {
|
|
3
|
+
export interface UNSTABLE_SliderProps<T extends number | number[] = number> extends CommonProps, LabellableProps, Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {
|
|
4
4
|
/** A description for the field. Provides a hint such as specific requirements for what to choose. */
|
|
5
5
|
description?: string;
|
|
6
6
|
/** The current value (controlled). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAShE,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CACxE,SAAQ,WAAW,EACjB,eAAe,EACf,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAShE,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CACxE,SAAQ,WAAW,EACjB,eAAe,EACf,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAC;IAC5F,qGAAqG;IACrG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IAC9C,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkKD;;GAEG;AACH,QAAA,MAAM,gBAAgB,GAnKG,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,iLAmK0B,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
|
|
@@ -38,7 +38,7 @@ function UNSTABLE_Slider({ label, description, UNSAFE_className, UNSAFE_style, f
|
|
|
38
38
|
'--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',
|
|
39
39
|
'--cim-slider-fill-size': (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',
|
|
40
40
|
}
|
|
41
|
-
: {}) }), trackState.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderThumb, { index: i, name: typeof name === 'string' ? name : name?.[i], form: form }, i)))] })) }), showLabels && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-slider-label-max", children: state.getThumbMaxValue(state.values.length - 1) })), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-wide", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, style: { order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, { width: "fit-content" }) }, i))) }))] }), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-narrow", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, {}) }, i))) })), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
|
|
41
|
+
: {}) }), trackState.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderThumb, { index: i, name: typeof name === 'string' ? name : name?.[i], form: form }, i)))] })) }), showLabels && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-slider-label-max", children: state.getThumbMaxValue(state.values.length - 1) })), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-wide", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, style: { order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }, formatOptions: props.formatOptions, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, { width: "fit-content" }) }, i))) }))] }), withInput && ((0, jsx_runtime_1.jsx)("div", { className: "cim-slider-inputs-container-narrow", children: state.values.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderNumberField, { index: i, formatOptions: props.formatOptions, children: (0, jsx_runtime_1.jsx)(input_js_1.Input, {}) }, i))) })), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
|
|
42
42
|
} }) }));
|
|
43
43
|
}
|
|
44
44
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n LabelContext as RACLabelContext,\n NumberField as RACNumberField,\n Provider as RACProvider,\n Slider as RACSlider,\n SliderOutput as RACSliderOutput,\n SliderStateContext as RACSliderStateContext,\n SliderThumb as RACSliderThumb,\n SliderTrack as RACSliderTrack,\n TextContext as RACTextContext,\n useSlottedContext,\n type NumberFieldProps as RACNumberFieldProps,\n type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Input } from '../internal/input/input.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\n// TODO: move to translations when stabilized\nconst sliderStrings = {\n srMinimum: 'minimum',\n srMaximum: 'maximum',\n};\n\nexport interface UNSTABLE_SliderProps<T extends number | number[] = number>\n extends CommonProps,\n LabellableProps,\n Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step'> {\n /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n description?: string;\n /** The current value (controlled). */\n value?: T;\n /** The default value (uncontrolled). */\n defaultValue?: T;\n /** Handler that is called when the value changes. */\n onChange?: (value: T) => void;\n /** Handler that is called when the slider stops moving. */\n onChangeEnd?: (value: T) => void;\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: T extends number[] ? string[] : string;\n /** Show input fields for slider values. */\n withInput?: boolean;\n /** Show static labels for minimum and maximum values. */\n showLabels?: boolean;\n}\n\nfunction UNSTABLE_Slider<T extends number | number[] = number>(\n {\n label,\n description,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n withInput,\n showLabels,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...props\n }: UNSTABLE_SliderProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACSlider\n {...props}\n ref={ref}\n className={clsx('cim-slider', UNSAFE_className)}\n style={UNSAFE_style}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n orientation=\"horizontal\"\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ state, isDisabled }) => {\n return (\n <>\n <FormFieldLabel isRequired={false} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n {!withInput && label != null && (\n <RACSliderOutput className=\"cim-slider-output\">\n <Text as=\"span\" variant=\"medium\">\n {state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </Text>\n </RACSliderOutput>\n )}\n <div className=\"cim-slider-track-container\">\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-min\">\n {state.getThumbMinValue(0)}\n </Text>\n )}\n\n <RACSliderTrack className=\"cim-slider-track\">\n {({ state: trackState, isDisabled: trackIsDisabled }) => (\n <>\n <div className=\"cim-slider-track-background\" data-disabled={trackIsDisabled || undefined} />\n <div\n className=\"cim-slider-fill\"\n style={\n (state.values.length === 1\n ? {\n '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',\n }\n : state.values.length === 2\n ? {\n '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',\n '--cim-slider-fill-size':\n (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',\n }\n : {}) as React.CSSProperties\n }\n />\n {trackState.values.map((_, i) => (\n <SliderThumb key={i} index={i} name={typeof name === 'string' ? name : name?.[i]} form={form} />\n ))}\n </>\n )}\n </RACSliderTrack>\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-max\">\n {state.getThumbMaxValue(state.values.length - 1)}\n </Text>\n )}\n {withInput && (\n <div className=\"cim-slider-inputs-container-wide\">\n {state.values.map((_, i) => (\n <SliderNumberField\n key={i}\n index={i}\n style={{ order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }}\n >\n <Input width=\"fit-content\" />\n </SliderNumberField>\n ))}\n </div>\n )}\n </div>\n {withInput && (\n <div className=\"cim-slider-inputs-container-narrow\">\n {state.values.map((_, i) => (\n <SliderNumberField key={i} index={i}>\n <Input />\n </SliderNumberField>\n ))}\n </div>\n )}\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n );\n }}\n </RACSlider>\n </RACProvider>\n );\n}\n\ninterface SliderNumberFieldProps extends RACNumberFieldProps {\n index: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction SliderNumberField({ index, ...props }: SliderNumberFieldProps) {\n const state = useContext(RACSliderStateContext)!;\n const labelProps = useSlottedContext(RACLabelContext)!;\n\n return (\n <RACNumberField\n {...props}\n className=\"cim-slider-input\"\n value={state.values[index]}\n onChange={(value) => state.setThumbValue(index, value ?? 0)}\n aria-labelledby={labelProps.id}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction SliderThumb({ index, name, form }: { index: number; name?: string | string[]; form?: string }) {\n const state = useContext(RACSliderStateContext)!;\n\n return (\n <RACSliderThumb\n index={index}\n className=\"cim-slider-thumb\"\n name={typeof name === 'string' ? name : name?.[index]}\n form={form}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\n/**\n * Allows users to select one or more values within a range.\n */\nconst _UNSTABLE_Slider = withStyleProps(forwardRef(UNSTABLE_Slider), 'Slider');\n\nexport { _UNSTABLE_Slider as UNSTABLE_Slider };\n"]}
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n LabelContext as RACLabelContext,\n NumberField as RACNumberField,\n Provider as RACProvider,\n Slider as RACSlider,\n SliderOutput as RACSliderOutput,\n SliderStateContext as RACSliderStateContext,\n SliderThumb as RACSliderThumb,\n SliderTrack as RACSliderTrack,\n TextContext as RACTextContext,\n useSlottedContext,\n type NumberFieldProps as RACNumberFieldProps,\n type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Input } from '../internal/input/input.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\n// TODO: move to translations when stabilized\nconst sliderStrings = {\n srMinimum: 'minimum',\n srMaximum: 'maximum',\n};\n\nexport interface UNSTABLE_SliderProps<T extends number | number[] = number>\n extends CommonProps,\n LabellableProps,\n Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {\n /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n description?: string;\n /** The current value (controlled). */\n value?: T;\n /** The default value (uncontrolled). */\n defaultValue?: T;\n /** Handler that is called when the value changes. */\n onChange?: (value: T) => void;\n /** Handler that is called when the slider stops moving. */\n onChangeEnd?: (value: T) => void;\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: T extends number[] ? string[] : string;\n /** Show input fields for slider values. */\n withInput?: boolean;\n /** Show static labels for minimum and maximum values. */\n showLabels?: boolean;\n}\n\nfunction UNSTABLE_Slider<T extends number | number[] = number>(\n {\n label,\n description,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n withInput,\n showLabels,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...props\n }: UNSTABLE_SliderProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACSlider\n {...props}\n ref={ref}\n className={clsx('cim-slider', UNSAFE_className)}\n style={UNSAFE_style}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n orientation=\"horizontal\"\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ state, isDisabled }) => {\n return (\n <>\n <FormFieldLabel isRequired={false} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n {!withInput && label != null && (\n <RACSliderOutput className=\"cim-slider-output\">\n <Text as=\"span\" variant=\"medium\">\n {state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </Text>\n </RACSliderOutput>\n )}\n <div className=\"cim-slider-track-container\">\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-min\">\n {state.getThumbMinValue(0)}\n </Text>\n )}\n\n <RACSliderTrack className=\"cim-slider-track\">\n {({ state: trackState, isDisabled: trackIsDisabled }) => (\n <>\n <div className=\"cim-slider-track-background\" data-disabled={trackIsDisabled || undefined} />\n <div\n className=\"cim-slider-fill\"\n style={\n (state.values.length === 1\n ? {\n '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',\n }\n : state.values.length === 2\n ? {\n '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',\n '--cim-slider-fill-size':\n (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',\n }\n : {}) as React.CSSProperties\n }\n />\n {trackState.values.map((_, i) => (\n <SliderThumb key={i} index={i} name={typeof name === 'string' ? name : name?.[i]} form={form} />\n ))}\n </>\n )}\n </RACSliderTrack>\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-max\">\n {state.getThumbMaxValue(state.values.length - 1)}\n </Text>\n )}\n {withInput && (\n <div className=\"cim-slider-inputs-container-wide\">\n {state.values.map((_, i) => (\n <SliderNumberField\n key={i}\n index={i}\n style={{ order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }}\n formatOptions={props.formatOptions}\n >\n <Input width=\"fit-content\" />\n </SliderNumberField>\n ))}\n </div>\n )}\n </div>\n {withInput && (\n <div className=\"cim-slider-inputs-container-narrow\">\n {state.values.map((_, i) => (\n <SliderNumberField key={i} index={i} formatOptions={props.formatOptions}>\n <Input />\n </SliderNumberField>\n ))}\n </div>\n )}\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n );\n }}\n </RACSlider>\n </RACProvider>\n );\n}\n\ninterface SliderNumberFieldProps extends RACNumberFieldProps {\n index: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction SliderNumberField({ index, ...props }: SliderNumberFieldProps) {\n const state = useContext(RACSliderStateContext)!;\n const labelProps = useSlottedContext(RACLabelContext)!;\n\n return (\n <RACNumberField\n {...props}\n className=\"cim-slider-input\"\n value={state.values[index]}\n onChange={(value) => state.setThumbValue(index, value ?? 0)}\n aria-labelledby={labelProps.id}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction SliderThumb({ index, name, form }: { index: number; name?: string | string[]; form?: string }) {\n const state = useContext(RACSliderStateContext)!;\n\n return (\n <RACSliderThumb\n index={index}\n className=\"cim-slider-thumb\"\n name={typeof name === 'string' ? name : name?.[index]}\n form={form}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\n/**\n * Allows users to select one or more values within a range.\n */\nconst _UNSTABLE_Slider = withStyleProps(forwardRef(UNSTABLE_Slider), 'Slider');\n\nexport { _UNSTABLE_Slider as UNSTABLE_Slider };\n"]}
|
package/dist/commonjs/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * from './components/alert/alert.js';
|
|
2
|
+
export * from './components/alert-dialog/alert-dialog.js';
|
|
2
3
|
export * from './components/app-header/app-header.js';
|
|
3
4
|
export * from './components/app-header/simple-auth-tool.js';
|
|
4
5
|
export * from './components/badge/badge.js';
|
|
@@ -76,7 +77,6 @@ export * from './components/toggle/toggle.js';
|
|
|
76
77
|
export * from './components/toast/toast-region.js';
|
|
77
78
|
export { UNSTABLE_toastQueue, type UNSTABLE_ToastQueue } from './components/toast/toast-queue.js';
|
|
78
79
|
export type { UNSTABLE_ToastOptions } from './components/toast/types.js';
|
|
79
|
-
export * from './components/alert-dialog/alert-dialog.js';
|
|
80
80
|
export * from './components/stepper/stepper.js';
|
|
81
81
|
export * from './components/stepper/stepper-item.js';
|
|
82
82
|
export type { StepperStatus } from './components/stepper/types.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/commonjs/index.js
CHANGED
|
@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.UNSTABLE_toastQueue = void 0;
|
|
18
18
|
__exportStar(require("./components/alert/alert.js"), exports);
|
|
19
|
+
__exportStar(require("./components/alert-dialog/alert-dialog.js"), exports);
|
|
19
20
|
__exportStar(require("./components/app-header/app-header.js"), exports);
|
|
20
21
|
__exportStar(require("./components/app-header/simple-auth-tool.js"), exports);
|
|
21
22
|
__exportStar(require("./components/badge/badge.js"), exports);
|
|
@@ -87,7 +88,6 @@ __exportStar(require("./components/toggle/toggle.js"), exports);
|
|
|
87
88
|
__exportStar(require("./components/toast/toast-region.js"), exports);
|
|
88
89
|
var toast_queue_js_1 = require("./components/toast/toast-queue.js");
|
|
89
90
|
Object.defineProperty(exports, "UNSTABLE_toastQueue", { enumerable: true, get: function () { return toast_queue_js_1.UNSTABLE_toastQueue; } });
|
|
90
|
-
__exportStar(require("./components/alert-dialog/alert-dialog.js"), exports);
|
|
91
91
|
__exportStar(require("./components/stepper/stepper.js"), exports);
|
|
92
92
|
__exportStar(require("./components/stepper/stepper-item.js"), exports);
|
|
93
93
|
__exportStar(require("./components/app-shell/app-shell.js"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,8DAA4C;AAC5C,wEAAsD;AACtD,8EAA4D;AAC5D,8DAA4C;AAC5C,gEAA8C;AAC9C,qEAAmD;AACnD,qEAAmD;AACnD,0EAAwD;AACxD,kEAAgD;AAChD,4DAA0C;AAC1C,oEAAkD;AAClD,0EAAwD;AACxD,sEAAoD;AACpD,mEAAiD;AACjD,mEAAiD;AACjD,0EAAwD;AACxD,0EAAwD;AACxD,wEAAsD;AACtD,8EAA4D;AAE5D,kEAAgD;AAChD,gEAA8C;AAC9C,4DAA0C;AAC1C,sEAAoD;AACpD,4DAA0C;AAC1C,4EAA0D;AAC1D,4EAA0D;AAC1D,wEAAsD;AACtD,8DAA4C;AAC5C,oEAAkD;AAClD,gEAA8C;AAC9C,gEAA8C;AAC9C,kEAAgD;AAChD,2EAAyD;AACzD,yEAAuD;AACvD,wEAAsD;AACtD,0EAAwD;AACxD,kEAAgD;AAChD,kEAAgD;AAChD,wEAAsD;AACtD,8DAA4C;AAC5C,qEAAmD;AACnD,yEAAuD;AACvD,0EAAwD;AACxD,mEAAiD;AACjD,uEAAqD;AACrD,wEAAsD;AACtD,2EAAyD;AACzD,gFAA8D;AAC9D,0EAAwD;AAGxD,4DAA0C;AAC1C,0DAAwC;AACxC,gEAA8C;AAC9C,sEAAoD;AACpD,8EAA4D;AAC5D,mFAAiE;AACjE,oFAAkE;AAClE,+DAA6C;AAE7C,kEAAgD;AAChD,sEAAoD;AAEpD,kEAAgD;AAChD,kEAAgD;AAoBhD,kEAAgD;AAChD,wEAAsD;AAEtD,6EAA2D;AAE3D,2BAA2B;AAC3B,kFAAgE;AAChE,0EAAwD;AACxD,sEAAoD;AACpD,gEAA8C;AAC9C,qEAAmD;AACnD,oEAAkG;AAAzF,qHAAA,mBAAmB,OAAA;AAE5B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,8DAA4C;AAC5C,4EAA0D;AAC1D,wEAAsD;AACtD,8EAA4D;AAC5D,8DAA4C;AAC5C,gEAA8C;AAC9C,qEAAmD;AACnD,qEAAmD;AACnD,0EAAwD;AACxD,kEAAgD;AAChD,4DAA0C;AAC1C,oEAAkD;AAClD,0EAAwD;AACxD,sEAAoD;AACpD,mEAAiD;AACjD,mEAAiD;AACjD,0EAAwD;AACxD,0EAAwD;AACxD,wEAAsD;AACtD,8EAA4D;AAE5D,kEAAgD;AAChD,gEAA8C;AAC9C,4DAA0C;AAC1C,sEAAoD;AACpD,4DAA0C;AAC1C,4EAA0D;AAC1D,4EAA0D;AAC1D,wEAAsD;AACtD,8DAA4C;AAC5C,oEAAkD;AAClD,gEAA8C;AAC9C,gEAA8C;AAC9C,kEAAgD;AAChD,2EAAyD;AACzD,yEAAuD;AACvD,wEAAsD;AACtD,0EAAwD;AACxD,kEAAgD;AAChD,kEAAgD;AAChD,wEAAsD;AACtD,8DAA4C;AAC5C,qEAAmD;AACnD,yEAAuD;AACvD,0EAAwD;AACxD,mEAAiD;AACjD,uEAAqD;AACrD,wEAAsD;AACtD,2EAAyD;AACzD,gFAA8D;AAC9D,0EAAwD;AAGxD,4DAA0C;AAC1C,0DAAwC;AACxC,gEAA8C;AAC9C,sEAAoD;AACpD,8EAA4D;AAC5D,mFAAiE;AACjE,oFAAkE;AAClE,+DAA6C;AAE7C,kEAAgD;AAChD,sEAAoD;AAEpD,kEAAgD;AAChD,kEAAgD;AAoBhD,kEAAgD;AAChD,wEAAsD;AAEtD,6EAA2D;AAE3D,2BAA2B;AAC3B,kFAAgE;AAChE,0EAAwD;AACxD,sEAAoD;AACpD,gEAA8C;AAC9C,qEAAmD;AACnD,oEAAkG;AAAzF,qHAAA,mBAAmB,OAAA;AAE5B,kEAAgD;AAChD,uEAAqD;AAErD,sEAAoD;AACpD,sEAAoD;AACpD,gEAA8C;AAC9C,wEAAsD;AACtD,kEAAgD","sourcesContent":["export * from './components/alert/alert.js';\nexport * from './components/alert-dialog/alert-dialog.js';\nexport * from './components/app-header/app-header.js';\nexport * from './components/app-header/simple-auth-tool.js';\nexport * from './components/badge/badge.js';\nexport * from './components/button/button.js';\nexport * from './components/button/link-button.js';\nexport * from './components/button/icon-button.js';\nexport * from './components/button/icon-link-button.js';\nexport * from './components/callout/callout.js';\nexport * from './components/card/card.js';\nexport * from './components/checkbox/checkbox.js';\nexport * from './components/checkbox/checkbox-group.js';\nexport * from './components/combo-box/combo-box.js';\nexport * from './components/copy/copy-button.js';\nexport * from './components/copy/copy-inline.js';\nexport * from './components/date-picker/date-picker.js';\nexport * from './components/dialog-root/dialog-root.js';\nexport * from './components/disclosure/disclosure.js';\nexport * from './components/disclosure/disclosure-group.js';\nexport type { DisclosureSize, DisclosureVariant } from './components/disclosure/context.js';\nexport * from './components/divider/divider.js';\nexport * from './components/drawer/drawer.js';\nexport * from './components/form/form.js';\nexport * from './components/link-tabs/link-tabs.js';\nexport * from './components/menu/menu.js';\nexport * from './components/modal-dialog/modal-dialog.js';\nexport * from './components/number-field/number-field.js';\nexport * from './components/pagination/pagination.js';\nexport * from './components/radio/radio.js';\nexport * from './components/radio/radio-group.js';\nexport * from './components/select/select.js';\nexport * from './components/slider/slider.js';\nexport * from './components/spinner/spinner.js';\nexport * from './components/text-inputs/search-field.js';\nexport * from './components/text-inputs/text-field.js';\nexport * from './components/text-inputs/text-area.js';\nexport * from './components/breadcrumbs/breadcrumbs.js';\nexport * from './components/tooltip/tooltip.js';\nexport * from './components/popover/popover.js';\nexport * from './components/table/table-container.js';\nexport * from './components/table/table.js';\nexport * from './components/table/table-header.js';\nexport * from './components/table/table-header-row.js';\nexport * from './components/table/table-header-cell.js';\nexport * from './components/table/table-body.js';\nexport * from './components/table/table-body-row.js';\nexport * from './components/table/table-body-cell.js';\nexport * from './components/table/table-row-selector.js';\nexport * from './components/table/table-all-rows-selector.js';\nexport * from './components/table/table-empty-state.js';\nexport type { RowSelectionMode as TableRowSelectionMode } from './components/table/contexts/table-state.js';\nexport type { ColumnContentAlignment as TableColumnContentAlignment } from './components/table/contexts/column-collection.js';\nexport * from './components/tabs/tabs.js';\nexport * from './components/tag/tag.js';\nexport * from './components/tag/tag-group.js';\nexport * from './components/tag-field/tag-field.js';\nexport * from './components/toggle-button/toggle-button.js';\nexport * from './components/toggle-button/toggle-icon-button.js';\nexport * from './components/toggle-button/toggle-button-group.js';\nexport * from './components/file-trigger.js';\n\nexport * from './components/spacing/box/box.js';\nexport * from './components/spacing/stack/stack.js';\n\nexport * from './components/typography/text.js';\nexport * from './components/typography/link.js';\n\nexport type { ForegroundTone } from './utils/style/types.js';\n\nexport type {\n CollectionItem,\n Direction,\n FieldError,\n HoverEvent,\n Key,\n Selection,\n PressEvent,\n RouterConfig,\n Href,\n RouterOptions,\n ValidationResult,\n} from './components/types.js';\nexport type { Spacing, Responsive } from './components/spacing/types.js';\nexport type { StyleProps } from './with-style-props.js';\n\nexport * from './providers/ssr/ssr-provider.js';\nexport * from './providers/router/router-provider.js';\n\nexport * from './components/internal/x-button/x-button.js';\n\n// Unfinished exports below\nexport * from './components/visually-hidden/visually-hidden.js';\nexport * from './components/file-picker/file-picker.js';\nexport * from './components/container/container.js';\nexport * from './components/toggle/toggle.js';\nexport * from './components/toast/toast-region.js';\nexport { UNSTABLE_toastQueue, type UNSTABLE_ToastQueue } from './components/toast/toast-queue.js';\nexport type { UNSTABLE_ToastOptions } from './components/toast/types.js';\nexport * from './components/stepper/stepper.js';\nexport * from './components/stepper/stepper-item.js';\nexport type { StepperStatus } from './components/stepper/types.js';\nexport * from './components/app-shell/app-shell.js';\nexport * from './components/app-header/side-nav.js';\nexport * from './components/hidden/hidden.js';\nexport * from './components/app-header/nav-button.js';\nexport * from './components/top-nav/top-nav.js';\n"]}
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import type { CommonProps } from '../types.js';
|
|
3
|
-
export interface
|
|
3
|
+
export interface AlertDialogRenderProps {
|
|
4
4
|
/** Closes the alert dialog when called. */
|
|
5
5
|
close: () => void;
|
|
6
6
|
}
|
|
7
|
-
export interface
|
|
8
|
-
/** Closes the alert dialog when called. */
|
|
9
|
-
close: () => void;
|
|
10
|
-
}
|
|
11
|
-
export interface UNSTABLE_AlertDialogProps extends CommonProps {
|
|
7
|
+
export interface AlertDialogProps extends CommonProps {
|
|
12
8
|
/** The title of the alert dialog. */
|
|
13
9
|
title: string;
|
|
14
10
|
/** The contents of the alert dialog. A function may be provided to access a function to close the dialog. */
|
|
15
|
-
children: ReactNode | ((renderProps:
|
|
11
|
+
children: ReactNode | ((renderProps: AlertDialogRenderProps) => ReactNode);
|
|
16
12
|
/** The tone of the alert dialog. */
|
|
17
13
|
tone: 'info' | 'success' | 'warning' | 'critical';
|
|
18
14
|
/**
|
|
@@ -30,22 +26,30 @@ export interface UNSTABLE_AlertDialogProps extends CommonProps {
|
|
|
30
26
|
* If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.
|
|
31
27
|
*/
|
|
32
28
|
onOpenChange?: (isOpen: boolean) => void;
|
|
33
|
-
/**
|
|
34
|
-
* Handler that is called when the primary action is pressed.
|
|
35
|
-
*/
|
|
36
|
-
onPrimaryActionPress: (args: UNSTABLE_AlertDialogActionArgs) => void;
|
|
37
|
-
/**
|
|
38
|
-
* The label of the primary action.
|
|
39
|
-
*/
|
|
40
|
-
primaryActionLabel: string;
|
|
41
|
-
/**
|
|
42
|
-
* Handler that is called when the secondary action is pressed.
|
|
43
|
-
*/
|
|
44
|
-
onSecondaryActionPress?: (args: UNSTABLE_AlertDialogActionArgs) => void;
|
|
45
|
-
/**
|
|
46
|
-
* The label of the secondary action.
|
|
47
|
-
*/
|
|
48
|
-
secondaryActionLabel: string;
|
|
49
29
|
}
|
|
50
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Renders an overlay that interrupts user activity and requires a user action.
|
|
32
|
+
*
|
|
33
|
+
* See [alert dialog usage guidelines](https://ui.cimpress.io/components/alert-dialog/).
|
|
34
|
+
*/
|
|
35
|
+
declare const _AlertDialog: (props: AlertDialogProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
|
|
36
|
+
export { _AlertDialog as AlertDialog };
|
|
37
|
+
export interface AlertDialogBodyProps {
|
|
38
|
+
/** The content to render within the alert dialog. */
|
|
39
|
+
children: ReactNode;
|
|
40
|
+
}
|
|
41
|
+
/** Renders content within `AlertDialog`. */
|
|
42
|
+
export declare function AlertDialogBody(props: AlertDialogBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare namespace AlertDialogBody {
|
|
44
|
+
var displayName: string;
|
|
45
|
+
}
|
|
46
|
+
export interface AlertDialogActionsProps {
|
|
47
|
+
/** Actions that should be available in the alert dialog. */
|
|
48
|
+
children: ReactNode;
|
|
49
|
+
}
|
|
50
|
+
/** Renders actions within `AlertDialog`. */
|
|
51
|
+
export declare function AlertDialogActions({ children, ...props }: AlertDialogActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
export declare namespace AlertDialogActions {
|
|
53
|
+
var displayName: string;
|
|
54
|
+
}
|
|
51
55
|
//# sourceMappingURL=alert-dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAWrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAU/C,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,6GAA6G;IAC7G,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;IAC3E,oCAAoC;IACpC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAoDD;;;;GAIG;AACH,QAAA,MAAM,YAAY,8GAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAQ1D;yBARe,eAAe;;;AAY/B,MAAM,WAAW,uBAAuB;IACtC,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAMjF;yBANe,kBAAkB"}
|