@cimpress-ui/react 1.21.0 → 1.23.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/app-shell/app-shell.d.ts +5 -4
- package/dist/commonjs/components/app-shell/app-shell.d.ts.map +1 -1
- package/dist/commonjs/components/app-shell/app-shell.js +4 -4
- package/dist/commonjs/components/app-shell/app-shell.js.map +1 -1
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js +3 -2
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/commonjs/components/combo-box/combo-box.d.ts +7 -1
- package/dist/commonjs/components/combo-box/combo-box.d.ts.map +1 -1
- package/dist/commonjs/components/combo-box/combo-box.js +6 -2
- package/dist/commonjs/components/combo-box/combo-box.js.map +1 -1
- package/dist/commonjs/components/date-picker/views/view-grid-cell.js +5 -5
- package/dist/commonjs/components/date-picker/views/view-grid-cell.js.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.js +4 -3
- package/dist/commonjs/components/file-picker/file-picker.js.map +1 -1
- package/dist/commonjs/components/internal/focusable-container/focusable-container.js +4 -4
- package/dist/commonjs/components/internal/focusable-container/focusable-container.js.map +1 -1
- package/dist/commonjs/components/link-tabs/link-tabs.d.ts.map +1 -1
- package/dist/commonjs/components/link-tabs/link-tabs.js +4 -4
- package/dist/commonjs/components/link-tabs/link-tabs.js.map +1 -1
- package/dist/commonjs/components/progress-bar/progress-bar.js +2 -2
- package/dist/commonjs/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/commonjs/components/slider/slider.js +2 -2
- package/dist/commonjs/components/slider/slider.js.map +1 -1
- package/dist/commonjs/components/table/contexts/table-state.d.ts.map +1 -1
- package/dist/commonjs/components/table/contexts/table-state.js +2 -1
- package/dist/commonjs/components/table/contexts/table-state.js.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table-cell.js +3 -2
- package/dist/commonjs/components/table/hooks/use-table-cell.js.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table.d.ts.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table.js +4 -3
- package/dist/commonjs/components/table/hooks/use-table.js.map +1 -1
- package/dist/commonjs/components/table/table-body-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-body-cell.js +3 -3
- package/dist/commonjs/components/table/table-body-cell.js.map +1 -1
- package/dist/commonjs/components/table/table-body-row.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-body-row.js +2 -3
- package/dist/commonjs/components/table/table-body-row.js.map +1 -1
- package/dist/commonjs/components/table/table-empty-state.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-empty-state.js +4 -4
- package/dist/commonjs/components/table/table-empty-state.js.map +1 -1
- package/dist/commonjs/components/table/table-header-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-header-cell.js +4 -4
- package/dist/commonjs/components/table/table-header-cell.js.map +1 -1
- package/dist/commonjs/components/table/table-header-row.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-header-row.js +2 -2
- package/dist/commonjs/components/table/table-header-row.js.map +1 -1
- package/dist/commonjs/components/table/table.d.ts.map +1 -1
- package/dist/commonjs/components/table/table.js +3 -3
- package/dist/commonjs/components/table/table.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field-input.js +8 -15
- package/dist/commonjs/components/tag-field/tag-field-input.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field-list-box.js +2 -36
- package/dist/commonjs/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.d.ts +1 -1
- package/dist/commonjs/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.js +17 -92
- package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
- package/dist/commonjs/components/text-inputs/text-field.js +4 -4
- package/dist/commonjs/components/text-inputs/text-field.js.map +1 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js +2 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/dist/commonjs/components/typography/link.d.ts +1 -1
- package/dist/commonjs/components/typography/link.d.ts.map +1 -1
- package/dist/commonjs/components/typography/link.js.map +1 -1
- package/dist/esm/components/app-shell/app-shell.d.ts +5 -4
- package/dist/esm/components/app-shell/app-shell.d.ts.map +1 -1
- package/dist/esm/components/app-shell/app-shell.js +4 -4
- package/dist/esm/components/app-shell/app-shell.js.map +1 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.js +2 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/esm/components/combo-box/combo-box.d.ts +7 -1
- package/dist/esm/components/combo-box/combo-box.d.ts.map +1 -1
- package/dist/esm/components/combo-box/combo-box.js +6 -2
- package/dist/esm/components/combo-box/combo-box.js.map +1 -1
- package/dist/esm/components/date-picker/views/view-grid-cell.js +3 -3
- package/dist/esm/components/date-picker/views/view-grid-cell.js.map +1 -1
- package/dist/esm/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/esm/components/file-picker/file-picker.js +2 -1
- package/dist/esm/components/file-picker/file-picker.js.map +1 -1
- package/dist/esm/components/internal/focusable-container/focusable-container.js +2 -2
- package/dist/esm/components/internal/focusable-container/focusable-container.js.map +1 -1
- package/dist/esm/components/link-tabs/link-tabs.d.ts.map +1 -1
- package/dist/esm/components/link-tabs/link-tabs.js +1 -1
- package/dist/esm/components/link-tabs/link-tabs.js.map +1 -1
- package/dist/esm/components/progress-bar/progress-bar.js +1 -1
- package/dist/esm/components/progress-bar/progress-bar.js.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/components/table/contexts/table-state.d.ts.map +1 -1
- package/dist/esm/components/table/contexts/table-state.js +2 -1
- package/dist/esm/components/table/contexts/table-state.js.map +1 -1
- package/dist/esm/components/table/hooks/use-table-cell.d.ts.map +1 -1
- package/dist/esm/components/table/hooks/use-table-cell.js +3 -2
- package/dist/esm/components/table/hooks/use-table-cell.js.map +1 -1
- package/dist/esm/components/table/hooks/use-table.d.ts.map +1 -1
- package/dist/esm/components/table/hooks/use-table.js +4 -3
- package/dist/esm/components/table/hooks/use-table.js.map +1 -1
- package/dist/esm/components/table/table-body-cell.d.ts.map +1 -1
- package/dist/esm/components/table/table-body-cell.js +1 -1
- package/dist/esm/components/table/table-body-cell.js.map +1 -1
- package/dist/esm/components/table/table-body-row.d.ts.map +1 -1
- package/dist/esm/components/table/table-body-row.js +1 -2
- package/dist/esm/components/table/table-body-row.js.map +1 -1
- package/dist/esm/components/table/table-empty-state.d.ts.map +1 -1
- package/dist/esm/components/table/table-empty-state.js +1 -1
- package/dist/esm/components/table/table-empty-state.js.map +1 -1
- package/dist/esm/components/table/table-header-cell.d.ts.map +1 -1
- package/dist/esm/components/table/table-header-cell.js +1 -1
- package/dist/esm/components/table/table-header-cell.js.map +1 -1
- package/dist/esm/components/table/table-header-row.d.ts.map +1 -1
- package/dist/esm/components/table/table-header-row.js +1 -1
- package/dist/esm/components/table/table-header-row.js.map +1 -1
- package/dist/esm/components/table/table.d.ts.map +1 -1
- package/dist/esm/components/table/table.js +1 -1
- package/dist/esm/components/table/table.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field-input.js +9 -16
- package/dist/esm/components/tag-field/tag-field-input.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field-list-box.js +4 -38
- package/dist/esm/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field.d.ts +1 -1
- package/dist/esm/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/esm/components/tag-field/tag-field.js +19 -94
- package/dist/esm/components/tag-field/tag-field.js.map +1 -1
- package/dist/esm/components/text-inputs/text-field.js +1 -1
- package/dist/esm/components/text-inputs/text-field.js.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.js +2 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/dist/esm/components/typography/link.d.ts +1 -1
- package/dist/esm/components/typography/link.d.ts.map +1 -1
- package/dist/esm/components/typography/link.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +12 -12
- package/dist/commonjs/components/tag-field/tag-field-tags.d.ts +0 -2
- package/dist/commonjs/components/tag-field/tag-field-tags.d.ts.map +0 -1
- package/dist/commonjs/components/tag-field/tag-field-tags.js +0 -31
- package/dist/commonjs/components/tag-field/tag-field-tags.js.map +0 -1
- package/dist/esm/components/tag-field/tag-field-tags.d.ts +0 -2
- package/dist/esm/components/tag-field/tag-field-tags.d.ts.map +0 -1
- package/dist/esm/components/tag-field/tag-field-tags.js +0 -28
- package/dist/esm/components/tag-field/tag-field-tags.js.map +0 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
|
|
2
|
+
import type { CommonProps } from '../types.js';
|
|
3
|
+
export interface UNSTABLE_AppShellProps extends CommonProps {
|
|
3
4
|
children: ReactNode;
|
|
4
5
|
}
|
|
5
|
-
export declare function UNSTABLE_AppShell({ children }: UNSTABLE_AppShellProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
export interface UNSTABLE_AppShellBodyProps {
|
|
6
|
+
export declare function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export interface UNSTABLE_AppShellBodyProps extends CommonProps {
|
|
7
8
|
children: ReactNode;
|
|
8
9
|
}
|
|
9
|
-
export declare function UNSTABLE_AppShellBody({ children }: UNSTABLE_AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
//# sourceMappingURL=app-shell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAM/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAM5B"}
|
|
@@ -7,10 +7,10 @@ exports.UNSTABLE_AppShell = UNSTABLE_AppShell;
|
|
|
7
7
|
exports.UNSTABLE_AppShellBody = UNSTABLE_AppShellBody;
|
|
8
8
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
9
|
const clsx_1 = __importDefault(require("clsx"));
|
|
10
|
-
function UNSTABLE_AppShell({ children }) {
|
|
11
|
-
return (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell'), children: children });
|
|
10
|
+
function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
|
|
11
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
|
|
12
12
|
}
|
|
13
|
-
function UNSTABLE_AppShellBody({ children }) {
|
|
14
|
-
return (0, jsx_runtime_1.jsx)("div", { className:
|
|
13
|
+
function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
|
|
14
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
|
|
15
15
|
}
|
|
16
16
|
//# sourceMappingURL=app-shell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;AAQA,8CAMC;AAMD,sDAWC;;AA/BD,gDAAwB;AAQxB,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAMD,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACzF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n return (\n <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n {children}\n </div>\n );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n children,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n}: UNSTABLE_AppShellBodyProps) {\n return (\n <div className={clsx('cim-app-shell-body', UNSAFE_className)} style={UNSAFE_style} {...props}>\n {children}\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,WAAW,EAGX,GAAG,EACH,eAAe,EAEf,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,iBAAiB;CAAG;AAiE/D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IACzG,6CAA6C;IAC7C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,6DAA6D;IAC7D,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,wDAAwD;AACxD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EAGZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,EACH,aAAa,EACb,MAAM,EAEN,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAmBrB;yBAnCe,cAAc;;;AAuC9B;;;;GAIG;AACH,QAAA,MAAM,YAAY,GAnHG,CAAC,SAAS,cAAc,kLAmH8B,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}
|
|
@@ -10,6 +10,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
10
10
|
const utils_1 = require("@react-aria/utils");
|
|
11
11
|
const clsx_1 = __importDefault(require("clsx"));
|
|
12
12
|
const react_1 = require("react");
|
|
13
|
+
const react_aria_1 = require("react-aria");
|
|
13
14
|
const react_aria_components_1 = require("react-aria-components");
|
|
14
15
|
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
15
16
|
const index_js_1 = require("../../icons/index.js");
|
|
@@ -19,9 +20,9 @@ const link_js_1 = require("../typography/link.js");
|
|
|
19
20
|
function Breadcrumbs({ children, items, UNSAFE_className, UNSAFE_style,
|
|
20
21
|
// Aria labeling props
|
|
21
22
|
'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, ...props }, ref) {
|
|
22
|
-
const listRef = (0,
|
|
23
|
+
const listRef = (0, react_aria_1.useObjectRef)(ref);
|
|
23
24
|
const router = (0, utils_1.useRouter)();
|
|
24
|
-
const breadcrumbsId = (0,
|
|
25
|
+
const breadcrumbsId = (0, react_aria_1.useId)();
|
|
25
26
|
const navigationInterceptor = (0, react_1.useCallback)((path, routerOptions) => {
|
|
26
27
|
// Breadcrumbs navigation causes the activated link to become disabled.
|
|
27
28
|
// Blur the link beforehand so that the browser can decide where to place focus next.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;
|
|
1
|
+
{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAoGb,wCAmCC;;AArID,6CAA8C;AAC9C,gDAAwB;AACxB,iCAAuD;AACvD,2CAAiD;AACjD,iEAAmG;AACnG,yDAAkD;AAClD,mDAAwD;AACxD,kFAA2E;AAC3E,mEAA2D;AAc3D,mDAA6C;AAK7C,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY;AAEZ,sBAAsB;AACtB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,GAAG,KAAK,EACY,EACtB,GAA8B;IAE9B,MAAM,OAAO,GAAG,IAAA,yBAAY,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,MAAM,GAAG,IAAA,iBAAS,GAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,IAAA,kBAAK,GAAE,CAAC;IAE9B,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EACvC,CAAC,IAAU,EAAE,aAA6B,EAAE,EAAE;QAC5C,uEAAuE;QACvE,qFAAqF;QAErF,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAE,CAAC;QAClE,OAA4B,CAAC,IAAI,EAAE,CAAC;QAErC,+DAA+D;QAC/D,yHAAyH;QACzH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,MAAM,EAAE,OAAO,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,uBAAC,mCAAc,IAAC,QAAQ,EAAE,qBAAqB,YAC7C,mCACM,KAAK,EACT,GAAG,EAAE,OAAO,qBAEK,cAAc,IAAI,aAAa,sBAC9B,eAAe,kBACnB,WAAW,YAEzB,uBAAC,mCAAc,IACb,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,gBACP,SAAS,YAEpB,QAAQ,GACM,GACb,GACS,CAClB,CAAC;AACJ,CAAC;AASD,wDAAwD;AACxD,SAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,gBAAgB,EAChB,YAAY;AAEZ,mBAAmB;AACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,EACH,aAAa,EACb,MAAM,EAEN,GAAG,KAAK,EACY;IACpB,OAAO,CACL,wBAAC,kCAAa,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACrG,uBAAC,cAAI,IACH,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,YAEb,QAAQ,GACJ,EACP,uBAAC,2BAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAChB,CACjB,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAEnD,mCAAW","sourcesContent":["'use client';\n\nimport { useRouter } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useCallback, type ForwardedRef } from 'react';\nimport { useId, useObjectRef } from 'react-aria';\nimport { Breadcrumbs as RACBreadcrumbs, Breadcrumb as RACBreadcrumb } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronRight } from '../../icons/index.js';\nimport { RouterProvider } from '../../providers/router/router-provider.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n AriaLabelingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FocusableElement,\n Href,\n Key,\n NavigationProps,\n RouterOptions,\n StringLikeChildren,\n WithRequired,\n} from '../types.js';\nimport { Link } from '../typography/link.js';\n\nexport interface BreadcrumbsProps<T extends CollectionItem = CollectionItem>\n extends CommonProps, CollectionProps<T>, AriaLabelingProps {}\n\nfunction Breadcrumbs<T extends CollectionItem = CollectionItem>(\n {\n children,\n items,\n UNSAFE_className,\n UNSAFE_style,\n\n // Aria labeling props\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n ...props\n }: BreadcrumbsProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n const listRef = useObjectRef(ref);\n const router = useRouter();\n const breadcrumbsId = useId();\n\n const navigationInterceptor = useCallback(\n (path: Href, routerOptions?: RouterOptions) => {\n // Breadcrumbs navigation causes the activated link to become disabled.\n // Blur the link beforehand so that the browser can decide where to place focus next.\n\n if (!listRef.current) {\n return;\n }\n\n const element = listRef.current.querySelector(`[href='${path}']`)!;\n (element as FocusableElement).blur();\n\n // We don't have access to the modifiers of the original event.\n // However, this function wouldn't run if the original modifiers impacted routing, so it is safe to pass an empty object.\n router.open(element, {}, path, routerOptions);\n },\n [router, listRef],\n );\n\n return (\n <RouterProvider navigate={navigationInterceptor}>\n <nav\n {...props}\n ref={listRef}\n // RAC puts a localized `aria-label` on `Breadcrumbs`, so we refer to it unless a custom label is provided\n aria-labelledby={ariaLabelledby ?? breadcrumbsId}\n aria-describedby={ariaDescribedby}\n aria-details={ariaDetails}\n >\n <RACBreadcrumbs\n id={breadcrumbsId}\n items={items}\n className={clsx('cim-breadcrumbs', UNSAFE_className)}\n style={UNSAFE_style}\n aria-label={ariaLabel}\n >\n {children}\n </RACBreadcrumbs>\n </nav>\n </RouterProvider>\n );\n}\n\nexport interface BreadcrumbItemProps extends Omit<CommonProps, 'id'>, WithRequired<NavigationProps, 'href'> {\n /** The text to display as the breadcrumb. */\n children: StringLikeChildren;\n /** The ID of the item. Has to be unique across all items. */\n id?: Key;\n}\n\n/** Renders a single breadcrumb within `Breadcrumbs`. */\nexport function BreadcrumbItem({\n children,\n UNSAFE_className,\n UNSAFE_style,\n\n // Navigation props\n href,\n hrefLang,\n download,\n ping,\n referrerPolicy,\n rel,\n routerOptions,\n target,\n\n ...props\n}: BreadcrumbItemProps) {\n return (\n <RACBreadcrumb {...props} className={clsx('cim-breadcrumb-item', UNSAFE_className)} style={UNSAFE_style}>\n <Link\n variant=\"body\"\n href={href}\n hrefLang={hrefLang}\n download={download}\n ping={ping}\n referrerPolicy={referrerPolicy}\n rel={rel}\n routerOptions={routerOptions}\n target={target}\n >\n {children}\n </Link>\n <IconChevronRight size={16} />\n </RACBreadcrumb>\n );\n}\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\n/**\n * Displays a list of breadcrumbs to help users navigate through a website.\n *\n * See [breadcrumbs usage guidelines](https://ui.cimpress.io/components/breadcrumbs/).\n */\nconst _Breadcrumbs = withStyleProps(forwardRef(Breadcrumbs), 'Breadcrumbs');\n\nexport { _Breadcrumbs as Breadcrumbs };\n"]}
|
|
@@ -8,7 +8,13 @@ export interface ComboBoxValidationValue {
|
|
|
8
8
|
/** The value of the ComboBox input. */
|
|
9
9
|
inputValue: string;
|
|
10
10
|
}
|
|
11
|
-
export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, AsyncItemLoadingProps, ApiProps<ComboBoxApi>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | '
|
|
11
|
+
export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, AsyncItemLoadingProps, ApiProps<ComboBoxApi>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'> {
|
|
12
|
+
/** The currently selected key in the collection (controlled). */
|
|
13
|
+
selectedKey?: Key | null;
|
|
14
|
+
/** The initial selected key in the collection (uncontrolled). */
|
|
15
|
+
defaultSelectedKey?: Key;
|
|
16
|
+
/** Handler that is called when the selection changes. */
|
|
17
|
+
onSelectionChange?: (key: Key | null) => void;
|
|
12
18
|
/**
|
|
13
19
|
* Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
|
|
14
20
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAeL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EACV,QAAQ,EACR,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAWrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,qBAAqB,EACrB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,
|
|
1
|
+
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAeL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EACV,QAAQ,EACR,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAWrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,qBAAqB,EACrB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB;IACH,iEAAiE;IACjE,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAuGD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA1GG,CAAC,SAAS,cAAc,iKA0GwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAwDjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
|
|
@@ -29,7 +29,7 @@ const VIRTUAL_LAYOUT_OPTIONS = {
|
|
|
29
29
|
padding: 0,
|
|
30
30
|
gap: 0,
|
|
31
31
|
};
|
|
32
|
-
function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, apiRef, ...props }, ref) {
|
|
32
|
+
function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, apiRef, selectedKey, defaultSelectedKey, onSelectionChange, validate, ...props }, ref) {
|
|
33
33
|
const inputRef = (0, react_1.useRef)(null);
|
|
34
34
|
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
|
|
35
35
|
(0, use_production_warning_js_1.useProductionWarning)(() => {
|
|
@@ -45,7 +45,11 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
|
|
|
45
45
|
select: () => inputRef.current?.select(),
|
|
46
46
|
}), []);
|
|
47
47
|
const listBox = ((0, jsx_runtime_1.jsx)(ComboBoxList, { items: items, isLoading: isLoading, onLoadMore: onLoadMore, onScroll: onScroll, children: children }));
|
|
48
|
-
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style,
|
|
48
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, selectionMode: "single", value: selectedKey, defaultValue: defaultSelectedKey, onChange: onSelectionChange, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, validate: validate
|
|
49
|
+
? ({ inputValue, value }) => {
|
|
50
|
+
return validate({ inputValue, selectedKey: value });
|
|
51
|
+
}
|
|
52
|
+
: undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { inputRef: inputRef, isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_2.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
|
|
49
53
|
}
|
|
50
54
|
/**
|
|
51
55
|
* Allows users to filter a collapsible list and select one item from it.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type MutableRefObject,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { usePreventScroll } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n ComboBoxStateContext as RACComboBoxStateContext,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBox as RACListBox,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n /** The selected key in the ComboBox. */\n selectedKey: Key | null;\n /** The value of the ComboBox input. */\n inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<ComboBoxValidationValue>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<ComboBoxApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'isReadOnly'\n | 'selectedKey'\n | 'defaultSelectedKey'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onSelectionChange'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `ComboBox` component. */\nexport interface ComboBoxApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n /** Selects the contents of the input field. */\n select: () => void;\n}\n\nfunction ComboBox<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n onScroll,\n isVirtualized = false,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n apiRef,\n ...props\n }: ComboBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n select: () => inputRef.current?.select(),\n }),\n [],\n );\n\n const listBox = (\n <ComboBoxList<T> items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </ComboBoxList>\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', UNSAFE_className)}\n style={UNSAFE_style}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-combo-box-input-group\">\n <ComboBoxInput inputRef={inputRef} isReadOnly={isReadOnly} placeholder={placeholder} />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.io/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n inputRef,\n isReadOnly,\n placeholder,\n}: {\n inputRef: MutableRefObject<HTMLInputElement | null>;\n isReadOnly: boolean | undefined;\n placeholder: string | undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n return (\n <RACInput\n ref={inputRef}\n className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n // Ensure the popover opens when the input is clicked.\n // By default, React Aria only opens the popover when the input is focused.\n onClick={() => !isReadOnly && comboBoxState!.open()}\n placeholder={placeholder}\n />\n );\n}\n\nfunction ComboBoxList<T extends CollectionItem = CollectionItem>({\n items,\n children,\n isLoading,\n onLoadMore,\n onScroll,\n}: Pick<ComboBoxProps<T>, 'items' | 'children' | 'onScroll'> & {\n isLoading: ComboBoxProps['UNSTABLE_isLoading'];\n onLoadMore: ComboBoxProps['UNSTABLE_onLoadMore'];\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n return (\n <RACListBox\n className=\"cim-combo-box-listbox\"\n onScroll={onScroll}\n renderEmptyState={() =>\n isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n }\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\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}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<T extends 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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: ComboBoxSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}
|
|
1
|
+
{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type MutableRefObject,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { usePreventScroll } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n ComboBoxStateContext as RACComboBoxStateContext,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBox as RACListBox,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n /** The selected key in the ComboBox. */\n selectedKey: Key | null;\n /** The value of the ComboBox input. */\n inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<ComboBoxValidationValue>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<ComboBoxApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `ComboBox` component. */\nexport interface ComboBoxApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n /** Selects the contents of the input field. */\n select: () => void;\n}\n\nfunction ComboBox<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n onScroll,\n isVirtualized = false,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n apiRef,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n validate,\n ...props\n }: ComboBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n select: () => inputRef.current?.select(),\n }),\n [],\n );\n\n const listBox = (\n <ComboBoxList<T> items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </ComboBoxList>\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', UNSAFE_className)}\n style={UNSAFE_style}\n selectionMode=\"single\"\n value={selectedKey}\n defaultValue={defaultSelectedKey}\n onChange={onSelectionChange}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n validate={\n validate\n ? ({ inputValue, value }) => {\n return validate({ inputValue, selectedKey: value });\n }\n : undefined\n }\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-combo-box-input-group\">\n <ComboBoxInput inputRef={inputRef} isReadOnly={isReadOnly} placeholder={placeholder} />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.io/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n inputRef,\n isReadOnly,\n placeholder,\n}: {\n inputRef: MutableRefObject<HTMLInputElement | null>;\n isReadOnly: boolean | undefined;\n placeholder: string | undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n return (\n <RACInput\n ref={inputRef}\n className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n // Ensure the popover opens when the input is clicked.\n // By default, React Aria only opens the popover when the input is focused.\n onClick={() => !isReadOnly && comboBoxState!.open()}\n placeholder={placeholder}\n />\n );\n}\n\nfunction ComboBoxList<T extends CollectionItem = CollectionItem>({\n items,\n children,\n isLoading,\n onLoadMore,\n onScroll,\n}: Pick<ComboBoxProps<T>, 'items' | 'children' | 'onScroll'> & {\n isLoading: ComboBoxProps['UNSTABLE_isLoading'];\n onLoadMore: ComboBoxProps['UNSTABLE_onLoadMore'];\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n return (\n <RACListBox\n className=\"cim-combo-box-listbox\"\n onScroll={onScroll}\n renderEmptyState={() =>\n isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n }\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\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}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<T extends 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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: ComboBoxSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}
|
|
@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ViewGridCell = ViewGridCell;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const focus_1 = require("@react-aria/focus");
|
|
9
8
|
const interactions_1 = require("@react-aria/interactions");
|
|
10
9
|
const utils_1 = require("@react-aria/utils");
|
|
11
10
|
const clsx_1 = __importDefault(require("clsx"));
|
|
12
11
|
const react_1 = require("react");
|
|
12
|
+
const react_aria_1 = require("react-aria");
|
|
13
13
|
const utils_js_1 = require("../../typography/utils.js");
|
|
14
14
|
/** @internal */
|
|
15
15
|
function ViewGridCell({ cellData, state }) {
|
|
@@ -18,7 +18,7 @@ function ViewGridCell({ cellData, state }) {
|
|
|
18
18
|
const isSelected = cellData ? !isDisabled && state.isCellSelected(cellData.date) : false;
|
|
19
19
|
const isTabbable = cellData ? state.isCellTabbable(cellData.date) : false;
|
|
20
20
|
const isFocused = state.isFocused && isTabbable;
|
|
21
|
-
const { pressProps, isPressed } = (0,
|
|
21
|
+
const { pressProps, isPressed } = (0, react_aria_1.usePress)({
|
|
22
22
|
preventFocusOnPress: true,
|
|
23
23
|
isDisabled: isDisabled || state.isReadOnly,
|
|
24
24
|
onPress: () => {
|
|
@@ -42,8 +42,8 @@ function ViewGridCell({ cellData, state }) {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
}, [isFocused]);
|
|
45
|
-
const { hoverProps, isHovered } = (0,
|
|
46
|
-
const { focusProps, isFocusVisible } = (0,
|
|
45
|
+
const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
|
|
46
|
+
const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
|
|
47
47
|
const cellProps = {
|
|
48
48
|
role: 'gridcell',
|
|
49
49
|
'aria-disabled': isDisabled || undefined,
|
|
@@ -53,7 +53,7 @@ function ViewGridCell({ cellData, state }) {
|
|
|
53
53
|
return (0, jsx_runtime_1.jsx)("td", { ...cellProps });
|
|
54
54
|
}
|
|
55
55
|
const { date, content, ariaLabel, isCurrent } = cellData;
|
|
56
|
-
const buttonProps = (0,
|
|
56
|
+
const buttonProps = (0, react_aria_1.mergeProps)(pressProps, hoverProps, focusProps, {
|
|
57
57
|
onFocus() {
|
|
58
58
|
if (!isDisabled) {
|
|
59
59
|
state.setFocusedDate(date);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-grid-cell.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid-cell.tsx"],"names":[],"mappings":";;;;;AAUA,oCAsFC;;AAhGD,
|
|
1
|
+
{"version":3,"file":"view-grid-cell.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid-cell.tsx"],"names":[],"mappings":";;;;;AAUA,oCAsFC;;AAhGD,2DAAkE;AAClE,6CAA+F;AAC/F,gDAAwB;AACxB,iCAA8D;AAC9D,2CAA0E;AAE1E,wDAAsD;AAGtD,gBAAgB;AAChB,SAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,EAA+D;IAC3G,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7F,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACzF,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1E,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,UAAU,CAAC;IAEhD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,qBAAQ,EAAC;QACzC,mBAAmB,EAAE,IAAI;QACzB,UAAU,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU;QAC1C,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,QAAQ,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACpC,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAuB,SAAS,CAAC;IAC7C,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED,sDAAsD;IACtD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YAC7B,IAAA,6BAAqB,EAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAEnC,iDAAiD;YACjD,IAAI,IAAA,qCAAsB,GAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,aAAa,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;gBACrF,IAAA,0BAAkB,EAAC,GAAG,CAAC,OAAO,EAAE,EAAE,iBAAiB,EAAE,IAAA,uBAAe,EAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACvF,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,qBAAQ,EAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,yBAAY,GAAE,CAAC;IAEtD,MAAM,SAAS,GAA6C;QAC1D,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,UAAU,IAAI,SAAS;QACxC,eAAe,EAAE,UAAU,IAAI,SAAS;KACzC,CAAC;IAEF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,kCAAQ,SAAS,GAAI,CAAC;IAC/B,CAAC;IAED,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC;IAEzD,MAAM,WAAW,GAAG,IAAA,uBAAU,EAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE;QACjE,OAAO;YACL,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;QACD,QAAQ;QACR,IAAI,EAAE,QAAQ;QACd,eAAe,EAAE,UAAU,IAAI,SAAS;QACxC,YAAY,EAAE,SAAS;QACvB,aAAa,CAAC,CAAC;YACb,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;KAC+B,CAAC,CAAC;IAEpC,OAAO,CACL,kCAAQ,SAAS,YACf,mCACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EACb,+BAA+B,EAC/B,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CACjE,mBACc,UAAU,IAAI,SAAS,kBACxB,SAAS,IAAI,SAAS,kBACtB,SAAS,IAAI,SAAS,mBACrB,UAAU,IAAI,SAAS,wBAClB,CAAC,cAAc,IAAI,SAAS,CAAC,IAAI,SAAS,kBAChD,SAAS,IAAI,SAAS,YAEnC,OAAO,GACJ,GACH,CACN,CAAC;AACJ,CAAC","sourcesContent":["import { getInteractionModality } from '@react-aria/interactions';\nimport { focusWithoutScrolling, getScrollParent, scrollIntoViewport } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { type DOMAttributes, useEffect, useRef } from 'react';\nimport { useFocusRing, useHover, usePress, mergeProps } from 'react-aria';\nimport type { NativeElementProps } from '../../types.js';\nimport { textStyle } from '../../typography/utils.js';\nimport type { ViewGridCellData, ViewGridState } from './types.js';\n\n/** @internal */\nexport function ViewGridCell({ cellData, state }: { cellData: ViewGridCellData | null; state: ViewGridState }) {\n const ref = useRef<HTMLDivElement>(null);\n\n const isDisabled = cellData ? state.isDisabled || state.isCellDisabled(cellData.date) : true;\n const isSelected = cellData ? !isDisabled && state.isCellSelected(cellData.date) : false;\n const isTabbable = cellData ? state.isCellTabbable(cellData.date) : false;\n const isFocused = state.isFocused && isTabbable;\n\n const { pressProps, isPressed } = usePress({\n preventFocusOnPress: true,\n isDisabled: isDisabled || state.isReadOnly,\n onPress: () => {\n if (!state.isReadOnly && cellData) {\n state.setFocusedDate(cellData.date);\n state.selectFocusedDate();\n }\n },\n });\n\n let tabIndex: number | undefined = undefined;\n if (!isDisabled) {\n tabIndex = isTabbable ? 0 : -1;\n }\n\n // Focus the button in the DOM when the state updates.\n useEffect(() => {\n if (isFocused && ref.current) {\n focusWithoutScrolling(ref.current);\n\n // Scroll into view if navigating with a keyboard\n if (getInteractionModality() !== 'pointer' && document.activeElement === ref.current) {\n scrollIntoViewport(ref.current, { containingElement: getScrollParent(ref.current) });\n }\n }\n }, [isFocused]);\n\n const { hoverProps, isHovered } = useHover({ isDisabled });\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const cellProps: NativeElementProps<HTMLTableCellElement> = {\n role: 'gridcell',\n 'aria-disabled': isDisabled || undefined,\n 'aria-selected': isSelected || undefined,\n };\n\n if (!cellData) {\n return <td {...cellProps} />;\n }\n\n const { date, content, ariaLabel, isCurrent } = cellData;\n\n const buttonProps = mergeProps(pressProps, hoverProps, focusProps, {\n onFocus() {\n if (!isDisabled) {\n state.setFocusedDate(date);\n }\n },\n tabIndex,\n role: 'button',\n 'aria-disabled': isDisabled || undefined,\n 'aria-label': ariaLabel,\n onContextMenu(e) {\n e.preventDefault();\n },\n } as DOMAttributes<HTMLDivElement>);\n\n return (\n <td {...cellProps}>\n <div\n {...buttonProps}\n ref={ref}\n className={clsx(\n 'cim-date-picker-calendar-cell',\n textStyle({ variant: isCurrent ? 'medium-semibold' : 'medium' }),\n )}\n data-disabled={isDisabled || undefined}\n data-hovered={isHovered || undefined}\n data-pressed={isPressed || undefined}\n data-selected={isSelected || undefined}\n data-focus-visible={(isFocusVisible && isFocused) || undefined}\n data-current={isCurrent || undefined}\n >\n {content}\n </div>\n </td>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"file-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAI7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,MAAM,WAAW,wBACf,SACE,WAAW,EACX,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,EACtC,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,eAAe,CAAC;IACzG,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAqID,QAAA,MAAM,oBAAoB,0KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}
|
|
@@ -10,6 +10,7 @@ const utils_1 = require("@react-aria/utils");
|
|
|
10
10
|
const form_2 = require("@react-stately/form");
|
|
11
11
|
const clsx_1 = __importDefault(require("clsx"));
|
|
12
12
|
const react_1 = require("react");
|
|
13
|
+
const react_aria_1 = require("react-aria");
|
|
13
14
|
const react_aria_components_1 = require("react-aria-components");
|
|
14
15
|
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
15
16
|
const index_js_1 = require("../../i18n/index.js");
|
|
@@ -19,9 +20,9 @@ const form_field_js_1 = require("../internal/form-field/form-field.js");
|
|
|
19
20
|
const text_js_1 = require("../typography/text.js");
|
|
20
21
|
const visually_hidden_js_1 = require("../visually-hidden/visually-hidden.js");
|
|
21
22
|
function UNSTABLE_FilePicker({ id, label, description, isDisabled, isRequired, isInvalid, onSelect, acceptedFileTypes, allowsMultiple, acceptDirectory, defaultCamera, error, form, name, validate, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
22
|
-
const buttonId = (0,
|
|
23
|
-
const labelId = (0,
|
|
24
|
-
const fileTextId = (0,
|
|
23
|
+
const buttonId = (0, react_aria_1.useId)(id);
|
|
24
|
+
const labelId = (0, react_aria_1.useId)();
|
|
25
|
+
const fileTextId = (0, react_aria_1.useId)();
|
|
25
26
|
const [files, setFiles] = (0, react_1.useState)(null);
|
|
26
27
|
const fileInputRef = (0, react_1.useRef)(null);
|
|
27
28
|
const handleSelect = (files) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-picker.js","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport clsx from 'clsx';\nimport { type ForwardedRef, useRef, useState } from 'react';\nimport {\n FieldErrorContext as RACFieldErrorContext,\n FileTrigger as RACFileTrigger,\n type FileTriggerProps as RACFileTriggerProps,\n LabelContext as RACLabelContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport interface UNSTABLE_FilePickerProps\n extends\n CommonProps,\n Omit<FieldProps<File[]>, 'aria-label'>,\n Pick<RACFileTriggerProps, 'acceptedFileTypes' | 'allowsMultiple' | 'acceptDirectory' | 'defaultCamera'> {\n /** Whether the field is disabled. */\n isDisabled?: boolean;\n /** Whether the field is required. */\n isRequired?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** The allowed file types that can be selected. */\n acceptedFileTypes?: string[];\n /** Whether multiple files can be selected. */\n allowsMultiple?: boolean;\n /** Handler called when files are selected. */\n onSelect?: (files: File[] | null) => void;\n}\n\nfunction UNSTABLE_FilePicker(\n {\n id,\n label,\n description,\n isDisabled,\n isRequired,\n isInvalid,\n onSelect,\n acceptedFileTypes,\n allowsMultiple,\n acceptDirectory,\n defaultCamera,\n error,\n form,\n name,\n validate,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_FilePickerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const buttonId = useId(id);\n const labelId = useId();\n const fileTextId = useId();\n\n const [files, setFiles] = useState<File[] | null>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const handleSelect = (files: FileList | null) => {\n // Commit validation to clear any previous validation errors when new files are selected\n validationState.commitValidation();\n\n const filesArray = files?.length ? Array.from(files) : null;\n setFiles(filesArray);\n onSelect?.(filesArray);\n\n if (fileInputRef.current) {\n fileInputRef.current.files = files;\n }\n };\n\n const labelMessages = useLocalizedMessages('label');\n const messages = useLocalizedMessages('filePicker');\n const labelText =\n files?.length != null\n ? files.length === 1\n ? files[0]?.name\n : messages.format('multipleFilesSelected', { fileCount: files.length })\n : messages.format('noFilesSelected', { allowsMultiple: allowsMultiple ?? false });\n\n const validationBehavior = 'native';\n const validationState = useFormValidationState({\n value: files,\n isInvalid,\n isRequired,\n name,\n validate,\n validationBehavior,\n });\n useFormValidation({ isInvalid, isRequired, validate, validationBehavior }, validationState, fileInputRef);\n useFormReset(fileInputRef, null, setFiles);\n\n const descriptionId = useSlotId([Boolean(description)]);\n const errorMessageId = useSlotId([\n Boolean(error || validationState.displayValidation.validationErrors),\n validationState.displayValidation.isInvalid,\n ]);\n\n return (\n <RACProvider\n values={[\n [RACLabelContext, label != null ? { id: labelId, htmlFor: buttonId } : {}],\n [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n [RACFieldErrorContext, validationState.displayValidation],\n ]}\n >\n <div {...props} className={clsx('cim-file-picker', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n {label && (\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n {/*\n * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n */}\n {isRequired && <UNSTABLE_VisuallyHidden>{labelMessages.format('required')}</UNSTABLE_VisuallyHidden>}\n </FormFieldLabel>\n )}\n <div className=\"cim-file-picker-button-container\">\n <RACFileTrigger\n onSelect={handleSelect}\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={allowsMultiple}\n acceptDirectory={acceptDirectory}\n defaultCamera={defaultCamera}\n >\n <Button\n id={buttonId}\n isDisabled={isDisabled}\n aria-labelledby={[buttonId, label != null ? labelId : null, ariaLabelledBy].filter(Boolean).join(' ')}\n aria-describedby={[fileTextId, descriptionId, errorMessageId, ariaDescribedBy].join(' ')}\n aria-details={ariaDetails}\n >\n {messages.format('chooseFile')}\n </Button>\n </RACFileTrigger>\n <Text id={fileTextId} as=\"p\" variant=\"medium\" tone=\"base\">\n {labelText}\n </Text>\n </div>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </div>\n {name && (\n <input\n type=\"file\"\n className=\"cim-file-picker-hidden-input\"\n form={form}\n name={name}\n multiple={allowsMultiple}\n required={isRequired}\n ref={fileInputRef}\n />\n )}\n </RACProvider>\n );\n}\n\nconst _UNSTABLE_FilePicker = withStyleProps(forwardRef(UNSTABLE_FilePicker), 'FilePicker');\n\nexport { _UNSTABLE_FilePicker as UNSTABLE_FilePicker };\n"]}
|
|
1
|
+
{"version":3,"file":"file-picker.js","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport clsx from 'clsx';\nimport { type ForwardedRef, useRef, useState } from 'react';\nimport { useId } from 'react-aria';\nimport {\n FieldErrorContext as RACFieldErrorContext,\n FileTrigger as RACFileTrigger,\n type FileTriggerProps as RACFileTriggerProps,\n LabelContext as RACLabelContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport interface UNSTABLE_FilePickerProps\n extends\n CommonProps,\n Omit<FieldProps<File[]>, 'aria-label'>,\n Pick<RACFileTriggerProps, 'acceptedFileTypes' | 'allowsMultiple' | 'acceptDirectory' | 'defaultCamera'> {\n /** Whether the field is disabled. */\n isDisabled?: boolean;\n /** Whether the field is required. */\n isRequired?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** The allowed file types that can be selected. */\n acceptedFileTypes?: string[];\n /** Whether multiple files can be selected. */\n allowsMultiple?: boolean;\n /** Handler called when files are selected. */\n onSelect?: (files: File[] | null) => void;\n}\n\nfunction UNSTABLE_FilePicker(\n {\n id,\n label,\n description,\n isDisabled,\n isRequired,\n isInvalid,\n onSelect,\n acceptedFileTypes,\n allowsMultiple,\n acceptDirectory,\n defaultCamera,\n error,\n form,\n name,\n validate,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_FilePickerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const buttonId = useId(id);\n const labelId = useId();\n const fileTextId = useId();\n\n const [files, setFiles] = useState<File[] | null>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const handleSelect = (files: FileList | null) => {\n // Commit validation to clear any previous validation errors when new files are selected\n validationState.commitValidation();\n\n const filesArray = files?.length ? Array.from(files) : null;\n setFiles(filesArray);\n onSelect?.(filesArray);\n\n if (fileInputRef.current) {\n fileInputRef.current.files = files;\n }\n };\n\n const labelMessages = useLocalizedMessages('label');\n const messages = useLocalizedMessages('filePicker');\n const labelText =\n files?.length != null\n ? files.length === 1\n ? files[0]?.name\n : messages.format('multipleFilesSelected', { fileCount: files.length })\n : messages.format('noFilesSelected', { allowsMultiple: allowsMultiple ?? false });\n\n const validationBehavior = 'native';\n const validationState = useFormValidationState({\n value: files,\n isInvalid,\n isRequired,\n name,\n validate,\n validationBehavior,\n });\n useFormValidation({ isInvalid, isRequired, validate, validationBehavior }, validationState, fileInputRef);\n useFormReset(fileInputRef, null, setFiles);\n\n const descriptionId = useSlotId([Boolean(description)]);\n const errorMessageId = useSlotId([\n Boolean(error || validationState.displayValidation.validationErrors),\n validationState.displayValidation.isInvalid,\n ]);\n\n return (\n <RACProvider\n values={[\n [RACLabelContext, label != null ? { id: labelId, htmlFor: buttonId } : {}],\n [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n [RACFieldErrorContext, validationState.displayValidation],\n ]}\n >\n <div {...props} className={clsx('cim-file-picker', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n {label && (\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n {/*\n * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n */}\n {isRequired && <UNSTABLE_VisuallyHidden>{labelMessages.format('required')}</UNSTABLE_VisuallyHidden>}\n </FormFieldLabel>\n )}\n <div className=\"cim-file-picker-button-container\">\n <RACFileTrigger\n onSelect={handleSelect}\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={allowsMultiple}\n acceptDirectory={acceptDirectory}\n defaultCamera={defaultCamera}\n >\n <Button\n id={buttonId}\n isDisabled={isDisabled}\n aria-labelledby={[buttonId, label != null ? labelId : null, ariaLabelledBy].filter(Boolean).join(' ')}\n aria-describedby={[fileTextId, descriptionId, errorMessageId, ariaDescribedBy].join(' ')}\n aria-details={ariaDetails}\n >\n {messages.format('chooseFile')}\n </Button>\n </RACFileTrigger>\n <Text id={fileTextId} as=\"p\" variant=\"medium\" tone=\"base\">\n {labelText}\n </Text>\n </div>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </div>\n {name && (\n <input\n type=\"file\"\n className=\"cim-file-picker-hidden-input\"\n form={form}\n name={name}\n multiple={allowsMultiple}\n required={isRequired}\n ref={fileInputRef}\n />\n )}\n </RACProvider>\n );\n}\n\nconst _UNSTABLE_FilePicker = withStyleProps(forwardRef(UNSTABLE_FilePicker), 'FilePicker');\n\nexport { _UNSTABLE_FilePicker as UNSTABLE_FilePicker };\n"]}
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.FocusableContainer = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const focus_1 = require("@react-aria/focus");
|
|
6
5
|
const utils_1 = require("@react-aria/utils");
|
|
7
6
|
const react_1 = require("react");
|
|
7
|
+
const react_aria_1 = require("react-aria");
|
|
8
8
|
const forward_ref_js_1 = require("../../../forward-ref.js");
|
|
9
9
|
function FocusableContainer({ children, scrollDirection, ...props }, ref) {
|
|
10
|
-
const containerRef = (0,
|
|
10
|
+
const containerRef = (0, react_aria_1.useObjectRef)(ref);
|
|
11
11
|
const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
|
|
12
|
-
const { focusProps, isFocusVisible } = (0,
|
|
12
|
+
const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
|
|
13
13
|
(0, utils_1.useLayoutEffect)(() => {
|
|
14
14
|
const containerElement = containerRef.current;
|
|
15
15
|
const isSSR = typeof window === 'undefined';
|
|
@@ -37,7 +37,7 @@ function FocusableContainer({ children, scrollDirection, ...props }, ref) {
|
|
|
37
37
|
'data-focus-visible': isFocusVisible || undefined,
|
|
38
38
|
'data-direction': scrollDirection,
|
|
39
39
|
};
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)("div", { ...(0,
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)("div", { ...(0, react_aria_1.mergeProps)(props, focusProps, containerProps), ref: containerRef, children: children }));
|
|
41
41
|
}
|
|
42
42
|
// TODO: export this component from the package?
|
|
43
43
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusable-container.js","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"focusable-container.js","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":";;;;AAAA,6CAAoD;AACpD,iCAAoE;AACpE,2CAAoE;AACpE,4DAAqD;AAUrD,SAAS,kBAAkB,CACzB,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAA2B,EAChE,GAAiC;IAEjC,MAAM,YAAY,GAAG,IAAA,yBAAY,EAAC,GAAG,CAAC,CAAC;IACvC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,yBAAY,GAAE,CAAC;IAEtD,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC;QAC9C,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;QAE5C,IAAI,uBAAmD,CAAC;QAExD,IAAI,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/B,uBAAuB,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC9D,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;oBACf,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC9B,eAAe,CACb,eAAe,KAAK,YAAY;wBAC9B,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW;wBACzC,CAAC,CAAC,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAC9C,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,uBAAuB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QACpD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,IAAI,uBAAuB,EAAE,CAAC;gBAChD,uBAAuB,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpC,MAAM,cAAc,GAAuC;QACzD,SAAS,EAAE,yBAAyB;QACpC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,oBAAoB,EAAE,cAAc,IAAI,SAAS;QACjD,gBAAgB,EAAE,eAAe;KAClC,CAAC;IAEF,OAAO,CACL,mCAAS,IAAA,uBAAU,EAAC,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,EAAE,GAAG,EAAE,YAAY,YACtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,gDAAgD;AAChD;;;GAGG;AACH,MAAM,mBAAmB,GAAG,IAAA,2BAAU,EAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC;AAEjD,iDAAkB","sourcesContent":["import { useLayoutEffect } from '@react-aria/utils';\nimport { type ForwardedRef, type ReactNode, useState } from 'react';\nimport { useFocusRing, mergeProps, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../../forward-ref.js';\nimport type { NativeElementProps } from '../../types.js';\n\ninterface FocusableContainerProps extends NativeElementProps<HTMLDivElement> {\n /** The contents of the container. */\n children: ReactNode;\n /** The expected scrolling direction. */\n scrollDirection: 'horizontal' | 'vertical';\n}\n\nfunction FocusableContainer(\n { children, scrollDirection, ...props }: FocusableContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const containerRef = useObjectRef(ref);\n const [isScrollable, setIsScrollable] = useState(false);\n const { focusProps, isFocusVisible } = useFocusRing();\n\n useLayoutEffect(() => {\n const containerElement = containerRef.current;\n const isSSR = typeof window === 'undefined';\n\n let containerResizeObserver: ResizeObserver | undefined;\n\n if (containerElement && !isSSR) {\n containerResizeObserver = new window.ResizeObserver((entries) => {\n if (entries[0]) {\n const { target } = entries[0];\n setIsScrollable(\n scrollDirection === 'horizontal'\n ? target.scrollWidth > target.clientWidth\n : target.scrollHeight > target.clientHeight,\n );\n }\n });\n\n containerResizeObserver.observe(containerElement);\n }\n\n return () => {\n if (containerElement && containerResizeObserver) {\n containerResizeObserver.unobserve(containerElement);\n }\n };\n }, [containerRef, scrollDirection]);\n\n const containerProps: NativeElementProps<HTMLDivElement> = {\n className: 'cim-focusable-container',\n tabIndex: isScrollable ? 0 : -1,\n 'data-focus-visible': isFocusVisible || undefined,\n 'data-direction': scrollDirection,\n };\n\n return (\n <div {...mergeProps(props, focusProps, containerProps)} ref={containerRef}>\n {children}\n </div>\n );\n}\n\n// TODO: export this component from the package?\n/**\n * Renders a container that can be focused if it becomes scrollable.\n * @internal\n */\nconst _FocusableContainer = forwardRef(FocusableContainer, 'FocusableContainer');\n\nexport { _FocusableContainer as FocusableContainer };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"link-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIxF,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACX,IAAI,EACJ,eAAe,EACf,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,iEAAiE;IACjE,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5C;AA6CD;;;;GAIG;AACH,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EACvB,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/E,4CAA4C;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,8CAA8C;AAC9C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,GAAG,KAAK,EACT,EAAE,YAAY,2CA8Bd;yBAvCe,OAAO"}
|
|
@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
7
7
|
exports.LinkTabs = void 0;
|
|
8
8
|
exports.LinkTab = LinkTab;
|
|
9
9
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
10
|
-
const utils_1 = require("@react-
|
|
11
|
-
const utils_2 = require("@react-stately/utils");
|
|
10
|
+
const utils_1 = require("@react-stately/utils");
|
|
12
11
|
const clsx_1 = __importDefault(require("clsx"));
|
|
13
12
|
const react_1 = require("react");
|
|
13
|
+
const react_aria_1 = require("react-aria");
|
|
14
14
|
const react_aria_components_1 = require("react-aria-components");
|
|
15
15
|
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
16
16
|
const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
|
|
@@ -24,8 +24,8 @@ function LinkTabs({ children, currentHref, defaultHref, onHrefChange, UNSAFE_cla
|
|
|
24
24
|
console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');
|
|
25
25
|
}
|
|
26
26
|
}, [ariaLabel, ariaLabelledBy]);
|
|
27
|
-
const linkTabsId = (0,
|
|
28
|
-
const [href, setHref] = (0,
|
|
27
|
+
const linkTabsId = (0, react_aria_1.useId)(id);
|
|
28
|
+
const [href, setHref] = (0, utils_1.useControlledState)(currentHref, defaultHref ?? null, onHrefChange);
|
|
29
29
|
const linkTabsContext = (0, react_1.useMemo)(() => ({
|
|
30
30
|
isDisabled,
|
|
31
31
|
currentHref: href,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-tabs.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAoGb,0BAuCC;;AAzID,
|
|
1
|
+
{"version":3,"file":"link-tabs.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, type ForwardedRef, useMemo, useContext } from 'react';\nimport { useId } from 'react-aria';\nimport { Link as RACLink, type LinkProps as RACLinkProps } 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 type {\n AriaLabelingProps,\n CommonProps,\n Href,\n NavigationProps,\n StringLikeChildren,\n WithRequired,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { LinkTabsContext, type LinkTabsContextValue } from './context.js';\n\nexport interface LinkTabsProps extends CommonProps, AriaLabelingProps {\n /** Link tabs belonging to the group. */\n children: ReactNode;\n /** Whether the link tabs are disabled. */\n isDisabled?: boolean;\n /** The currently selected key in the collection (controlled). */\n currentHref?: Href | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultHref?: Href | null;\n /** Handler that is called when the selection changes. */\n onHrefChange?: (href: Href | null) => void;\n}\n\nfunction LinkTabs(\n {\n children,\n currentHref,\n defaultHref,\n onHrefChange,\n UNSAFE_className,\n UNSAFE_style,\n id,\n isDisabled,\n ...props\n }: LinkTabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n const linkTabsId = useId(id);\n const [href, setHref] = useControlledState(currentHref, defaultHref ?? null, onHrefChange);\n\n const linkTabsContext: LinkTabsContextValue = useMemo(\n () => ({\n isDisabled,\n currentHref: href,\n setCurrentHref: setHref,\n }),\n [isDisabled, href, setHref],\n );\n\n return (\n <nav {...props} ref={ref} id={linkTabsId} className={clsx('cim-link-tabs', UNSAFE_className)}>\n <ul style={UNSAFE_style} aria-labelledby={linkTabsId} data-disabled={isDisabled} className=\"cim-tab-list\">\n <LinkTabsContext.Provider value={linkTabsContext}>{children}</LinkTabsContext.Provider>\n </ul>\n </nav>\n );\n}\n\n/**\n * Displays a list of tabs to help users navigate through a website.\n *\n * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n */\nconst _LinkTabs = withStyleProps(forwardRef(LinkTabs), 'LinkTabs');\n\nexport { _LinkTabs as LinkTabs };\n\nexport interface LinkTabProps\n extends\n Omit<CommonProps, 'id'>,\n WithRequired<NavigationProps, 'href'>,\n Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The text to display as the tab title. */\n children: StringLikeChildren;\n /** An icon displayed before the tab title. */\n iconStart?: ReactNode;\n /** A badge displayed after the tab title. */\n badge?: ReactNode;\n}\n\n/** Renders a single tab within `LinkTabs`. */\nexport function LinkTab({\n children,\n href,\n iconStart,\n badge,\n UNSAFE_className,\n UNSAFE_style,\n isDisabled,\n ...props\n}: LinkTabProps) {\n const linkTabsContext = useContext(LinkTabsContext);\n if (!linkTabsContext) {\n throw new Error('Cannot use link tab outside of link tabs');\n }\n\n const { isDisabled: isGroupDisabled, currentHref, setCurrentHref } = linkTabsContext;\n\n const isCurrent = href === currentHref;\n\n return (\n <li>\n <RACLink\n {...props}\n className={clsx('cim-tab-item', 'cim-link-tab-item', UNSAFE_className)}\n style={UNSAFE_style}\n href={href}\n onPress={() => setCurrentHref(href)}\n aria-current={isCurrent ? 'page' : undefined}\n data-selected={isCurrent || undefined}\n isDisabled={isDisabled || isGroupDisabled}\n >\n {iconStart}\n <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n {children}\n </Text>\n {badge}\n </RACLink>\n </li>\n );\n}\n\nLinkTab.displayName = 'LinkTab';\n"]}
|
|
@@ -6,15 +6,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
7
|
exports.ProgressBar = void 0;
|
|
8
8
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
-
const utils_1 = require("@react-aria/utils");
|
|
10
9
|
const clsx_1 = __importDefault(require("clsx"));
|
|
10
|
+
const react_aria_1 = require("react-aria");
|
|
11
11
|
const react_aria_components_1 = require("react-aria-components");
|
|
12
12
|
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
13
13
|
const with_style_props_js_1 = require("../../with-style-props.js");
|
|
14
14
|
const form_field_js_1 = require("../internal/form-field/form-field.js");
|
|
15
15
|
const utils_js_1 = require("../typography/utils.js");
|
|
16
16
|
function ProgressBar({ label, description, tone = 'base', showValue = true, UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
17
|
-
const descriptionId = (0,
|
|
17
|
+
const descriptionId = (0, react_aria_1.useId)();
|
|
18
18
|
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Provider, { values: [[react_aria_components_1.TextContext, { slots: { description: { id: descriptionId } } }]], children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ProgressBar, { ...props, ref: ref, className: (0, clsx_1.default)('cim-progress-bar', UNSAFE_className), style: UNSAFE_style, "aria-describedby": [description && descriptionId, props['aria-describedby']].filter(Boolean).join(' '), children: ({ percentage, valueText }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: false, children: label }), showValue && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)('cim-progress-bar-value', (0, utils_js_1.textStyle)({ variant: 'medium', tone: 'base' })), children: valueText })), (0, jsx_runtime_1.jsx)("div", { className: "cim-progress-bar-track", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-progress-bar-fill", style: {
|
|
19
19
|
'--cim-progress-bar-percentage': percentage + '%',
|
|
20
20
|
'--cim-progress-bar-fill-color': `var(--cim-bg-${tone === 'base' ? 'accent' : tone})`,
|