@cimpress-ui/react 1.20.0 → 1.22.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-header/side-nav.js +1 -1
- package/dist/commonjs/components/app-header/side-nav.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/commonjs/icons/{unstable-expand.d.ts → bookmark-fill.d.ts} +3 -3
- package/dist/commonjs/icons/bookmark-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/{unstable-expand.js → bookmark-fill.js} +6 -6
- package/dist/commonjs/icons/bookmark-fill.js.map +1 -0
- package/dist/{esm/icons/unstable-expand.d.ts → commonjs/icons/bookmark.d.ts} +3 -3
- package/dist/commonjs/icons/bookmark.d.ts.map +1 -0
- package/dist/commonjs/icons/bookmark.js +24 -0
- package/dist/commonjs/icons/bookmark.js.map +1 -0
- package/dist/commonjs/icons/carousel.d.ts +8 -0
- package/dist/commonjs/icons/carousel.d.ts.map +1 -0
- package/dist/commonjs/icons/carousel.js +24 -0
- package/dist/commonjs/icons/carousel.js.map +1 -0
- package/dist/commonjs/icons/cloud-links.d.ts +8 -0
- package/dist/commonjs/icons/cloud-links.d.ts.map +1 -0
- package/dist/commonjs/icons/cloud-links.js +24 -0
- package/dist/commonjs/icons/cloud-links.js.map +1 -0
- package/dist/commonjs/icons/columns.d.ts +8 -0
- package/dist/commonjs/icons/columns.d.ts.map +1 -0
- package/dist/commonjs/icons/columns.js +24 -0
- package/dist/commonjs/icons/columns.js.map +1 -0
- package/dist/commonjs/icons/crop.d.ts +8 -0
- package/dist/commonjs/icons/crop.d.ts.map +1 -0
- package/dist/commonjs/icons/crop.js +24 -0
- package/dist/commonjs/icons/crop.js.map +1 -0
- package/dist/commonjs/icons/expand.d.ts +8 -0
- package/dist/commonjs/icons/expand.d.ts.map +1 -0
- package/dist/commonjs/icons/expand.js +24 -0
- package/dist/commonjs/icons/expand.js.map +1 -0
- package/dist/commonjs/icons/fill.d.ts +8 -0
- package/dist/commonjs/icons/fill.d.ts.map +1 -0
- package/dist/commonjs/icons/fill.js +24 -0
- package/dist/commonjs/icons/fill.js.map +1 -0
- package/dist/commonjs/icons/fit.d.ts +8 -0
- package/dist/commonjs/icons/fit.d.ts.map +1 -0
- package/dist/commonjs/icons/fit.js +24 -0
- package/dist/commonjs/icons/fit.js.map +1 -0
- package/dist/commonjs/icons/flow.d.ts +8 -0
- package/dist/commonjs/icons/flow.d.ts.map +1 -0
- package/dist/commonjs/icons/flow.js +24 -0
- package/dist/commonjs/icons/flow.js.map +1 -0
- package/dist/commonjs/icons/folder-database.d.ts +8 -0
- package/dist/commonjs/icons/folder-database.d.ts.map +1 -0
- package/dist/commonjs/icons/folder-database.js +24 -0
- package/dist/commonjs/icons/folder-database.js.map +1 -0
- package/dist/commonjs/icons/grid.d.ts +8 -0
- package/dist/commonjs/icons/grid.d.ts.map +1 -0
- package/dist/commonjs/icons/grid.js +24 -0
- package/dist/commonjs/icons/grid.js.map +1 -0
- package/dist/commonjs/icons/index.d.ts +19 -1
- package/dist/commonjs/icons/index.d.ts.map +1 -1
- package/dist/commonjs/icons/index.js +43 -7
- package/dist/commonjs/icons/index.js.map +1 -1
- package/dist/commonjs/icons/placement.d.ts +8 -0
- package/dist/commonjs/icons/placement.d.ts.map +1 -0
- package/dist/commonjs/icons/placement.js +24 -0
- package/dist/commonjs/icons/placement.js.map +1 -0
- package/dist/commonjs/icons/query.d.ts +8 -0
- package/dist/commonjs/icons/query.d.ts.map +1 -0
- package/dist/commonjs/icons/query.js +24 -0
- package/dist/commonjs/icons/query.js.map +1 -0
- package/dist/commonjs/icons/rows.d.ts +8 -0
- package/dist/commonjs/icons/rows.d.ts.map +1 -0
- package/dist/commonjs/icons/rows.js +24 -0
- package/dist/commonjs/icons/rows.js.map +1 -0
- package/dist/commonjs/icons/rules.d.ts +8 -0
- package/dist/commonjs/icons/rules.d.ts.map +1 -0
- package/dist/commonjs/icons/rules.js +24 -0
- package/dist/commonjs/icons/rules.js.map +1 -0
- package/dist/commonjs/icons/table.d.ts +8 -0
- package/dist/commonjs/icons/table.d.ts.map +1 -0
- package/dist/commonjs/icons/table.js +24 -0
- package/dist/commonjs/icons/table.js.map +1 -0
- package/dist/commonjs/icons/tags.d.ts +8 -0
- package/dist/commonjs/icons/tags.d.ts.map +1 -0
- package/dist/commonjs/icons/tags.js +24 -0
- package/dist/commonjs/icons/tags.js.map +1 -0
- package/dist/commonjs/icons/variants.d.ts +8 -0
- package/dist/commonjs/icons/variants.d.ts.map +1 -0
- package/dist/commonjs/icons/variants.js +24 -0
- package/dist/commonjs/icons/variants.js.map +1 -0
- package/dist/esm/components/app-header/side-nav.js +2 -2
- package/dist/esm/components/app-header/side-nav.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/esm/icons/bookmark-fill.d.ts +8 -0
- package/dist/esm/icons/bookmark-fill.d.ts.map +1 -0
- package/dist/esm/icons/bookmark-fill.js +19 -0
- package/dist/esm/icons/bookmark-fill.js.map +1 -0
- package/dist/esm/icons/bookmark.d.ts +8 -0
- package/dist/esm/icons/bookmark.d.ts.map +1 -0
- package/dist/esm/icons/bookmark.js +19 -0
- package/dist/esm/icons/bookmark.js.map +1 -0
- package/dist/esm/icons/carousel.d.ts +8 -0
- package/dist/esm/icons/carousel.d.ts.map +1 -0
- package/dist/esm/icons/carousel.js +19 -0
- package/dist/esm/icons/carousel.js.map +1 -0
- package/dist/esm/icons/cloud-links.d.ts +8 -0
- package/dist/esm/icons/cloud-links.d.ts.map +1 -0
- package/dist/esm/icons/cloud-links.js +19 -0
- package/dist/esm/icons/cloud-links.js.map +1 -0
- package/dist/esm/icons/columns.d.ts +8 -0
- package/dist/esm/icons/columns.d.ts.map +1 -0
- package/dist/esm/icons/columns.js +19 -0
- package/dist/esm/icons/columns.js.map +1 -0
- package/dist/esm/icons/crop.d.ts +8 -0
- package/dist/esm/icons/crop.d.ts.map +1 -0
- package/dist/esm/icons/crop.js +19 -0
- package/dist/esm/icons/crop.js.map +1 -0
- package/dist/esm/icons/expand.d.ts +8 -0
- package/dist/esm/icons/expand.d.ts.map +1 -0
- package/dist/esm/icons/expand.js +19 -0
- package/dist/esm/icons/expand.js.map +1 -0
- package/dist/esm/icons/fill.d.ts +8 -0
- package/dist/esm/icons/fill.d.ts.map +1 -0
- package/dist/esm/icons/fill.js +19 -0
- package/dist/esm/icons/fill.js.map +1 -0
- package/dist/esm/icons/fit.d.ts +8 -0
- package/dist/esm/icons/fit.d.ts.map +1 -0
- package/dist/esm/icons/fit.js +19 -0
- package/dist/esm/icons/fit.js.map +1 -0
- package/dist/esm/icons/flow.d.ts +8 -0
- package/dist/esm/icons/flow.d.ts.map +1 -0
- package/dist/esm/icons/flow.js +19 -0
- package/dist/esm/icons/flow.js.map +1 -0
- package/dist/esm/icons/folder-database.d.ts +8 -0
- package/dist/esm/icons/folder-database.d.ts.map +1 -0
- package/dist/esm/icons/folder-database.js +19 -0
- package/dist/esm/icons/folder-database.js.map +1 -0
- package/dist/esm/icons/grid.d.ts +8 -0
- package/dist/esm/icons/grid.d.ts.map +1 -0
- package/dist/esm/icons/grid.js +19 -0
- package/dist/esm/icons/grid.js.map +1 -0
- package/dist/esm/icons/index.d.ts +19 -1
- package/dist/esm/icons/index.d.ts.map +1 -1
- package/dist/esm/icons/index.js +19 -1
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/icons/placement.d.ts +8 -0
- package/dist/esm/icons/placement.d.ts.map +1 -0
- package/dist/esm/icons/placement.js +19 -0
- package/dist/esm/icons/placement.js.map +1 -0
- package/dist/esm/icons/query.d.ts +8 -0
- package/dist/esm/icons/query.d.ts.map +1 -0
- package/dist/esm/icons/query.js +19 -0
- package/dist/esm/icons/query.js.map +1 -0
- package/dist/esm/icons/rows.d.ts +8 -0
- package/dist/esm/icons/rows.d.ts.map +1 -0
- package/dist/esm/icons/rows.js +19 -0
- package/dist/esm/icons/rows.js.map +1 -0
- package/dist/esm/icons/rules.d.ts +8 -0
- package/dist/esm/icons/rules.d.ts.map +1 -0
- package/dist/esm/icons/rules.js +19 -0
- package/dist/esm/icons/rules.js.map +1 -0
- package/dist/esm/icons/table.d.ts +8 -0
- package/dist/esm/icons/table.d.ts.map +1 -0
- package/dist/esm/icons/table.js +19 -0
- package/dist/esm/icons/table.js.map +1 -0
- package/dist/esm/icons/tags.d.ts +8 -0
- package/dist/esm/icons/tags.d.ts.map +1 -0
- package/dist/esm/icons/tags.js +19 -0
- package/dist/esm/icons/tags.js.map +1 -0
- package/dist/esm/icons/variants.d.ts +8 -0
- package/dist/esm/icons/variants.d.ts.map +1 -0
- package/dist/esm/icons/variants.js +19 -0
- package/dist/esm/icons/variants.js.map +1 -0
- 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/commonjs/icons/unstable-expand.d.ts.map +0 -1
- package/dist/commonjs/icons/unstable-expand.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
- package/dist/esm/icons/unstable-expand.d.ts.map +0 -1
- package/dist/esm/icons/unstable-expand.js +0 -19
- package/dist/esm/icons/unstable-expand.js.map +0 -1
|
@@ -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"}
|
|
@@ -21,7 +21,7 @@ const VIRTUAL_LAYOUT_OPTIONS = {
|
|
|
21
21
|
padding: 0,
|
|
22
22
|
gap: 0,
|
|
23
23
|
};
|
|
24
|
-
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) {
|
|
24
|
+
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) {
|
|
25
25
|
const inputRef = useRef(null);
|
|
26
26
|
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
|
|
27
27
|
useProductionWarning(() => {
|
|
@@ -37,7 +37,11 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
|
|
|
37
37
|
select: () => inputRef.current?.select(),
|
|
38
38
|
}), []);
|
|
39
39
|
const listBox = (_jsx(ComboBoxList, { items: items, isLoading: isLoading, onLoadMore: onLoadMore, onScroll: onScroll, children: children }));
|
|
40
|
-
return (_jsxs(RACComboBox, { ...props, ref: ref, className: clsx('cim-combo-box', UNSAFE_className), style: UNSAFE_style,
|
|
40
|
+
return (_jsxs(RACComboBox, { ...props, ref: ref, className: clsx('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
|
|
41
|
+
? ({ inputValue, value }) => {
|
|
42
|
+
return validate({ inputValue, selectedKey: value });
|
|
43
|
+
}
|
|
44
|
+
: undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(ComboBoxInput, { inputRef: inputRef, isReadOnly: isReadOnly, placeholder: placeholder }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
|
|
41
45
|
}
|
|
42
46
|
/**
|
|
43
47
|
* 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"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { focusWithoutScrolling, getScrollParent, mergeProps, scrollIntoViewport } from '@react-aria/utils';
|
|
2
|
+
import { getInteractionModality } from '@react-aria/interactions';
|
|
3
|
+
import { focusWithoutScrolling, getScrollParent, scrollIntoViewport } from '@react-aria/utils';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import { useEffect, useRef } from 'react';
|
|
6
|
+
import { useFocusRing, useHover, usePress, mergeProps } from 'react-aria';
|
|
7
7
|
import { textStyle } from '../../typography/utils.js';
|
|
8
8
|
/** @internal */
|
|
9
9
|
export function ViewGridCell({ cellData, state }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-grid-cell.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid-cell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"view-grid-cell.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid-cell.tsx"],"names":[],"mappings":"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","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"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useFormValidation } from '@react-aria/form';
|
|
3
|
-
import { useFormReset,
|
|
3
|
+
import { useFormReset, useSlotId } from '@react-aria/utils';
|
|
4
4
|
import { useFormValidationState } from '@react-stately/form';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useRef, useState } from 'react';
|
|
7
|
+
import { useId } from 'react-aria';
|
|
7
8
|
import { FieldErrorContext as RACFieldErrorContext, FileTrigger as RACFileTrigger, LabelContext as RACLabelContext, Provider as RACProvider, TextContext as RACTextContext, } from 'react-aria-components';
|
|
8
9
|
import { forwardRef } from '../../forward-ref.js';
|
|
9
10
|
import { useLocalizedMessages } from '../../i18n/index.js';
|
|
@@ -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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { mergeProps, useLayoutEffect, useObjectRef } from '@react-aria/utils';
|
|
2
|
+
import { useLayoutEffect } from '@react-aria/utils';
|
|
4
3
|
import { useState } from 'react';
|
|
4
|
+
import { useFocusRing, mergeProps, useObjectRef } from 'react-aria';
|
|
5
5
|
import { forwardRef } from '../../../forward-ref.js';
|
|
6
6
|
function FocusableContainer({ children, scrollDirection, ...props }, ref) {
|
|
7
7
|
const containerRef = useObjectRef(ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusable-container.js","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"focusable-container.js","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAqC,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAUrD,SAAS,kBAAkB,CACzB,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAA2B,EAChE,GAAiC;IAEjC,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACvC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,eAAe,CAAC,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,iBAAS,UAAU,CAAC,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,UAAU,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC;AAEjF,OAAO,EAAE,mBAAmB,IAAI,kBAAkB,EAAE,CAAC","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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from '@react-aria/utils';
|
|
4
3
|
import { useControlledState } from '@react-stately/utils';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import { useMemo, useContext } from 'react';
|
|
6
|
+
import { useId } from 'react-aria';
|
|
7
7
|
import { Link as RACLink } from 'react-aria-components';
|
|
8
8
|
import { forwardRef } from '../../forward-ref.js';
|
|
9
9
|
import { useProductionWarning } from '../../utils/use-production-warning.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-tabs.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,
|
|
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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from '@react-aria/utils';
|
|
4
3
|
import clsx from 'clsx';
|
|
4
|
+
import { useId } from 'react-aria';
|
|
5
5
|
import { Provider as RACProvider, TextContext as RACTextContext, ProgressBar as RACProgressBar, } from 'react-aria-components';
|
|
6
6
|
import { forwardRef } from '../../forward-ref.js';
|
|
7
7
|
import { withStyleProps } from '../../with-style-props.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,
|
|
1
|
+
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,EAC7B,WAAW,IAAI,cAAc,GAE9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAkBnD,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACnH,GAAiC;IAEjC,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,OAAO,CACL,KAAC,WAAW,IAAC,MAAM,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,YACxF,KAAC,cAAc,OACT,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,sBACD,CAAC,WAAW,IAAI,aAAa,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEpG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,8BACE,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,YAAG,KAAK,GAAkB,EAC1D,SAAS,IAAI,CACZ,eAAM,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAC5F,SAAS,GACL,CACR,EACD,cAAK,SAAS,EAAC,wBAAwB,YACrC,cACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EACH;gCACE,+BAA+B,EAAE,UAAU,GAAG,GAAG;gCACjD,+BAA+B,EAAE,gBAAgB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG;6BACrE,GAEpB,GACE,EACN,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACc,GACL,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Provider as RACProvider,\n TextContext as RACTextContext,\n ProgressBar as RACProgressBar,\n type ProgressBarProps as RACProgressBarProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface ProgressBarProps\n extends CommonProps, LabellableProps, Pick<RACProgressBarProps, 'value' | 'valueLabel' | 'maxValue'> {\n /**\n * The tone of the progress bar.\n * @default 'base'\n */\n tone?: 'base' | 'success' | 'warning' | 'critical';\n /**\n * Whether the value of the progress bar should be displayed above it.\n * @default true\n */\n showValue?: boolean;\n /** A description for the progress bar. */\n description?: string;\n}\n\nfunction ProgressBar(\n { label, description, tone = 'base', showValue = true, UNSAFE_className, UNSAFE_style, ...props }: ProgressBarProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACProgressBar\n {...props}\n ref={ref}\n className={clsx('cim-progress-bar', UNSAFE_className)}\n style={UNSAFE_style}\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ percentage, valueText }) => (\n <>\n <FormFieldLabel isRequired={false}>{label}</FormFieldLabel>\n {showValue && (\n <span className={clsx('cim-progress-bar-value', textStyle({ variant: 'medium', tone: 'base' }))}>\n {valueText}\n </span>\n )}\n <div className=\"cim-progress-bar-track\">\n <div\n className=\"cim-progress-bar-fill\"\n style={\n {\n '--cim-progress-bar-percentage': percentage + '%',\n '--cim-progress-bar-fill-color': `var(--cim-bg-${tone === 'base' ? 'accent' : tone})`,\n } as CSSProperties\n }\n />\n </div>\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n )}\n </RACProgressBar>\n </RACProvider>\n );\n}\n\n/**\n * Visualizes the progress of an operation.\n *\n * See [progress bar usage guidelines](https://ui.cimpress.io/components/progress-bar/).\n */\nconst _ProgressBar = withStyleProps(forwardRef(ProgressBar), 'ProgressBar');\n\nexport { _ProgressBar as ProgressBar };\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from '@react-aria/utils';
|
|
4
3
|
import clsx from 'clsx';
|
|
5
4
|
import { useContext } from 'react';
|
|
5
|
+
import { useId } from 'react-aria';
|
|
6
6
|
import { LabelContext as RACLabelContext, NumberField as RACNumberField, Provider as RACProvider, Slider as RACSlider, SliderOutput as RACSliderOutput, SliderStateContext as RACSliderStateContext, SliderThumb as RACSliderThumb, SliderTrack as RACSliderTrack, TextContext as RACTextContext, useSlottedContext, } from 'react-aria-components';
|
|
7
7
|
import { forwardRef } from '../../forward-ref.js';
|
|
8
8
|
import { useProductionWarning } from '../../utils/use-production-warning.js';
|
|
@@ -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\n 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\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\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 clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\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\n 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\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\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAI7F,mEAAmE;AACnE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,2BAA2B,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACzB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD,2CA8CA;AAGD,wBAAgB,aAAa,IAAI,UAAU,CAO1C"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffectEvent as useRACEffectEvent
|
|
2
|
+
import { useEffectEvent as useRACEffectEvent } from '@react-aria/utils';
|
|
3
3
|
import { createContext, useContext, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { useId } from 'react-aria';
|
|
4
5
|
import { useLocalizedMessages } from '../../../i18n/localization-provider.js';
|
|
5
6
|
const TableStateContext = createContext(null);
|
|
6
7
|
export function TableStateProvider({ children, rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAgB9E,MAAM,iBAAiB,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAEjE,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GAOzB;IACC,+EAA+E;IAC/E,sDAAsD;IACtD,oDAAoD;IACpD,MAAM,2BAA2B,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,MAAM,gCAAgC,GAAG,iBAAiB,CAAC,wBAAwB,CAAC,CAAC;IAErF,MAAM,UAAU,GAAe,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB,EAAE,gCAAgC;QAC1D,IAAI,wBAAwB;YAC1B,OAAO,2BAA2B,CAAC,OAAO,CAAC;QAC7C,CAAC;QACD,2BAA2B,CAAC,wBAA6C;YACvE,2BAA2B,CAAC,OAAO,GAAG,wBAAwB,CAAC;YAC/D,4BAA4B,CAAC,wBAAwB,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD;QACE,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aAC1C,QAAQ,EACT,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,YAC9C,QAAQ,CAAC,MAAM,CAAC,uBAAuB,CAAC,GACpC,IACoB,CAC9B,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa;IAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { useEffectEvent as useRACEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\nimport { useId } from 'react-aria';\nimport { useLocalizedMessages } from '../../../i18n/localization-provider.js';\n\n/** Represents the type of row selection allowed within a table. */\nexport type RowSelectionMode = 'single' | 'multiple' | 'none';\n\nexport interface TableState {\n sortLabelId: string;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n /** The selection state that will be applied to the next focused row. */\n pendingRowSelectionState?: boolean;\n setPendingRowSelectionState: (value: boolean | undefined) => void;\n}\n\nconst TableStateContext = createContext<TableState | null>(null);\n\nexport function TableStateProvider({\n children,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle,\n}: {\n children: ReactNode;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n}) {\n // When the pending selection state is updated, we want to trigger a re-render,\n // but we also want immediate access to the new value.\n // Hence why it is stored as both a ref and a state.\n const pendingRowSelectionStateRef = useRef<boolean | undefined>(undefined);\n const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState<boolean | undefined>(undefined);\n\n const sortLabelId = useId();\n const messages = useLocalizedMessages('table');\n\n const onAllRowsSelectionToggleMemoized = useRACEffectEvent(onAllRowsSelectionToggle);\n\n const tableState: TableState = useMemo(\n () => ({\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,\n get pendingRowSelectionState() {\n return pendingRowSelectionStateRef.current;\n },\n setPendingRowSelectionState(pendingRowSelectionState: boolean | undefined) {\n pendingRowSelectionStateRef.current = pendingRowSelectionState;\n _setPendingRowSelectionState(pendingRowSelectionState);\n },\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggleMemoized,\n _pendingRowSelectionState,\n ],\n );\n\n return (\n <TableStateContext.Provider value={tableState}>\n {children}\n <span style={{ display: 'none' }} id={sortLabelId}>\n {messages.format('toggleColumnSortOrder')}\n </span>\n </TableStateContext.Provider>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableState(): TableState {\n const tableState = useContext(TableStateContext);\n if (!tableState) {\n throw new Error('Cannot use table state outside of a table');\n }\n\n return tableState;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqD,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-table-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqD,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAErG,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAM3E,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,GAChB,YAAY,CAsJd"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { getFocusableTreeWalker
|
|
1
|
+
import { getFocusableTreeWalker } from '@react-aria/focus';
|
|
2
2
|
import { isFocusVisible } from '@react-aria/interactions';
|
|
3
|
-
import {
|
|
3
|
+
import { useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';
|
|
4
4
|
import { useEffect } from 'react';
|
|
5
|
+
import { useFocusRing, mergeProps } from 'react-aria';
|
|
5
6
|
import { useTableFocus } from '../contexts/focus.js';
|
|
6
7
|
import { useTableRowState } from '../contexts/row-state.js';
|
|
7
8
|
import { useTableState } from '../contexts/table-state.js';
|