@cube-dev/ui-kit 0.193.1 → 0.194.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/CHANGELOG.md +28 -0
- package/dist/_internal/hooks/use-debounced-value.js +1 -1
- package/dist/_internal/hooks/use-deprecation-warning.js +1 -1
- package/dist/_internal/hooks/use-event.js +1 -1
- package/dist/_internal/hooks/use-is-first-render.js +1 -1
- package/dist/_internal/hooks/use-sync-ref.js +1 -1
- package/dist/_internal/hooks/use-timer/timer.js +1 -1
- package/dist/_internal/hooks/use-timer/use-timer.js +1 -1
- package/dist/_internal/hooks/use-warn.js +1 -1
- package/dist/components/Block.js +1 -1
- package/dist/components/CollectionItem.d.ts +25 -12
- package/dist/components/CollectionItem.js +59 -4
- package/dist/components/CollectionItem.js.map +1 -1
- package/dist/components/GlobalStyles.js +1 -1
- package/dist/components/GridProvider.js +1 -1
- package/dist/components/HiddenInput.js +1 -1
- package/dist/components/Root.js +2 -2
- package/dist/components/actions/Action/Action.js +1 -1
- package/dist/components/actions/Banner/Banner.d.ts +1 -1
- package/dist/components/actions/Banner/Banner.js +6 -6
- package/dist/components/actions/Banner/Banner.js.map +1 -1
- package/dist/components/actions/Button/Button.js +1 -1
- package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/components/actions/ButtonSplit/ButtonSplit.js +28 -25
- package/dist/components/actions/ButtonSplit/ButtonSplit.js.map +1 -1
- package/dist/components/actions/ButtonSplit/context.js +1 -1
- package/dist/components/actions/CommandMenu/CommandMenu.d.ts +7 -7
- package/dist/components/actions/CommandMenu/CommandMenu.js +232 -239
- package/dist/components/actions/CommandMenu/CommandMenu.js.map +1 -1
- package/dist/components/actions/CommandMenu/styled.js +1 -1
- package/dist/components/actions/ItemAction/ItemAction.js +26 -22
- package/dist/components/actions/ItemAction/ItemAction.js.map +1 -1
- package/dist/components/actions/ItemActionContext.d.ts +3 -0
- package/dist/components/actions/ItemActionContext.js +15 -13
- package/dist/components/actions/ItemActionContext.js.map +1 -1
- package/dist/components/actions/ItemActionsWrapper.js +1 -1
- package/dist/components/actions/ItemButton/ItemButton.d.ts +2 -2
- package/dist/components/actions/ItemButton/ItemButton.js +1 -1
- package/dist/components/actions/Link/Link.js +1 -1
- package/dist/components/actions/Menu/Menu.d.ts +9 -9
- package/dist/components/actions/Menu/Menu.js +88 -64
- package/dist/components/actions/Menu/Menu.js.map +1 -1
- package/dist/components/actions/Menu/MenuCollectionItem.d.ts +18 -0
- package/dist/components/actions/Menu/MenuCollectionItem.js +36 -0
- package/dist/components/actions/Menu/MenuCollectionItem.js.map +1 -0
- package/dist/components/actions/Menu/MenuItem.d.ts +5 -0
- package/dist/components/actions/Menu/MenuItem.js +402 -116
- package/dist/components/actions/Menu/MenuItem.js.map +1 -1
- package/dist/components/actions/Menu/MenuSection.d.ts +3 -1
- package/dist/components/actions/Menu/MenuSection.js +31 -33
- package/dist/components/actions/Menu/MenuSection.js.map +1 -1
- package/dist/components/actions/Menu/MenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.d.ts +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +2 -2
- package/dist/components/actions/Menu/SubMenuTrigger.js.map +1 -1
- package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
- package/dist/components/actions/Menu/context.js +1 -1
- package/dist/components/actions/Menu/index.d.ts +1 -0
- package/dist/components/actions/Menu/styled.js +1 -1
- package/dist/components/actions/actions-run.js +1 -1
- package/dist/components/actions/index.d.ts +3 -2
- package/dist/components/actions/index.js +1 -1
- package/dist/components/actions/use-action.js +60 -36
- package/dist/components/actions/use-action.js.map +1 -1
- package/dist/components/actions/use-anchored-menu.js +1 -1
- package/dist/components/actions/use-context-menu.js +1 -1
- package/dist/components/content/ActiveZone/ActiveZone.js +1 -1
- package/dist/components/content/Alert/Alert.js +1 -1
- package/dist/components/content/Alert/use-alert.js +1 -1
- package/dist/components/content/Avatar/Avatar.js +1 -1
- package/dist/components/content/Badge/Badge.js +1 -1
- package/dist/components/content/Card/Card.js +1 -1
- package/dist/components/content/Content.js +1 -1
- package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
- package/dist/components/content/CopySnippet/CopySnippet.d.ts +19 -19
- package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
- package/dist/components/content/Disclosure/Disclosure.js +1 -1
- package/dist/components/content/Divider.js +1 -1
- package/dist/components/content/Footer.js +1 -1
- package/dist/components/content/Header.js +1 -1
- package/dist/components/content/HotKeys/HotKeys.js +44 -33
- package/dist/components/content/HotKeys/HotKeys.js.map +1 -1
- package/dist/components/content/InfoBadge/InfoBadge.js +1 -1
- package/dist/components/content/InlineInput/InlineInput.js +1 -1
- package/dist/components/content/Item/Item.d.ts +7 -7
- package/dist/components/content/Item/Item.js +205 -67
- package/dist/components/content/Item/Item.js.map +1 -1
- package/dist/components/content/Item/ItemWithNativeLinks.js +314 -0
- package/dist/components/content/Item/ItemWithNativeLinks.js.map +1 -0
- package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
- package/dist/components/content/ItemCard/ItemCard.d.ts +1 -1
- package/dist/components/content/ItemCard/ItemCard.js +1 -1
- package/dist/components/content/Layout/GridLayout.js +1 -1
- package/dist/components/content/Layout/Layout.js +1 -1
- package/dist/components/content/Layout/LayoutBlock.js +1 -1
- package/dist/components/content/Layout/LayoutCenter.js +1 -1
- package/dist/components/content/Layout/LayoutContainer.js +1 -1
- package/dist/components/content/Layout/LayoutContent.js +1 -1
- package/dist/components/content/Layout/LayoutContext.js +1 -1
- package/dist/components/content/Layout/LayoutFlex.js +1 -1
- package/dist/components/content/Layout/LayoutFooter.js +1 -1
- package/dist/components/content/Layout/LayoutGrid.js +1 -1
- package/dist/components/content/Layout/LayoutHeader.js +1 -1
- package/dist/components/content/Layout/LayoutPane.js +18 -15
- package/dist/components/content/Layout/LayoutPane.js.map +1 -1
- package/dist/components/content/Layout/LayoutPanel.js +41 -46
- package/dist/components/content/Layout/LayoutPanel.js.map +1 -1
- package/dist/components/content/Layout/LayoutPanelHeader.js +2 -2
- package/dist/components/content/Layout/LayoutPanelTransition.js +1 -1
- package/dist/components/content/Layout/LayoutToolbar.js +1 -1
- package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
- package/dist/components/content/Layout/index.js +1 -1
- package/dist/components/content/Layout/utils.js +1 -1
- package/dist/components/content/Paragraph.js +1 -1
- package/dist/components/content/Placeholder/Placeholder.js +77 -70
- package/dist/components/content/Placeholder/Placeholder.js.map +1 -1
- package/dist/components/content/PrismCode/PrismCode.js +1 -1
- package/dist/components/content/PrismCode/prismSetup.js +1 -1
- package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
- package/dist/components/content/Result/Result.js +5 -5
- package/dist/components/content/Result/Result.js.map +1 -1
- package/dist/components/content/Skeleton/Skeleton.js +18 -19
- package/dist/components/content/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/content/Tag/Tag.js +2 -2
- package/dist/components/content/Text.d.ts +14 -14
- package/dist/components/content/Text.js +1 -1
- package/dist/components/content/TextItem/TextItem.js +1 -1
- package/dist/components/content/Title.js +66 -48
- package/dist/components/content/Title.js.map +1 -1
- package/dist/components/content/Tree/Tree.js +6 -3
- package/dist/components/content/Tree/Tree.js.map +1 -1
- package/dist/components/content/Tree/TreeNode.js +1 -1
- package/dist/components/content/Tree/styled.js +1 -1
- package/dist/components/content/Tree/tree-index.js +1 -1
- package/dist/components/content/Tree/types.d.ts +2 -2
- package/dist/components/content/Tree/use-checkbox-tree.js +1 -1
- package/dist/components/content/Tree/use-load-data.js +1 -1
- package/dist/components/content/highlightText.js +1 -1
- package/dist/components/content/use-auto-tooltip.js +1 -1
- package/dist/components/data/DataTable/DataTable.js +1 -1
- package/dist/components/data/ItemTable/ItemTable.js +1 -1
- package/dist/components/data/ItemTable/ItemTableBulkBar.js +1 -1
- package/dist/components/data/ItemTable/ItemTableDragPreview.js +1 -1
- package/dist/components/data/ItemTable/ItemTableFooter.js +1 -1
- package/dist/components/data/ItemTable/ItemTableToolbar.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-column-widths.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-drag-drop.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-pagination.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-selection.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-sort.js +1 -1
- package/dist/components/data/ItemTable/use-item-table-tree-model.js +1 -1
- package/dist/components/data/TableBase/ColumnResizer.js +1 -1
- package/dist/components/data/TableBase/RowCollection.js +1 -1
- package/dist/components/data/TableBase/TableHeaderCell.js +1 -1
- package/dist/components/data/TableBase/TableRow.js +1 -1
- package/dist/components/data/TableBase/TableView.js +39 -19
- package/dist/components/data/TableBase/TableView.js.map +1 -1
- package/dist/components/data/TableBase/TreeGridTable.js +1 -1
- package/dist/components/data/TableBase/column-header.js +1 -1
- package/dist/components/data/TableBase/column-menu.js +1 -1
- package/dist/components/data/TableBase/column-styles.js +1 -1
- package/dist/components/data/TableBase/column-tint.js +1 -1
- package/dist/components/data/TableBase/row-menu.js +1 -1
- package/dist/components/data/TableBase/styled.d.ts +1 -1
- package/dist/components/data/TableBase/styled.js +14 -1
- package/dist/components/data/TableBase/styled.js.map +1 -1
- package/dist/components/data/TableBase/table-tree.js +1 -1
- package/dist/components/data/TableBase/types.js +1 -1
- package/dist/components/data/TableBase/use-cell-selection.js +0 -0
- package/dist/components/data/TableBase/use-column-menu.js +1 -1
- package/dist/components/data/TableBase/use-column-order.js +1 -1
- package/dist/components/data/TableBase/use-column-window.js +219 -0
- package/dist/components/data/TableBase/use-column-window.js.map +1 -0
- package/dist/components/data/TableBase/use-container-width.js +1 -1
- package/dist/components/data/TableBase/use-row-move-animation.js +1 -1
- package/dist/components/data/TableBase/use-scrollability.js +1 -1
- package/dist/components/data/TableBase/use-table-columns.js +1 -1
- package/dist/components/data/TableBase/use-table-search.js +1 -1
- package/dist/components/data/TableBase/use-table-selection.js +1 -1
- package/dist/components/data/TableBase/use-table-sort.js +1 -1
- package/dist/components/data/TableBase/use-table-sorts.js +1 -1
- package/dist/components/data/TableBase/use-table-storage.js +1 -1
- package/dist/components/data/TableBase/use-table-tooltip-refresh.js +32 -19
- package/dist/components/data/TableBase/use-table-tooltip-refresh.js.map +1 -1
- package/dist/components/data/TableBase/use-table-tree-state.js +1 -1
- package/dist/components/fields/Checkbox/Checkbox.js +3 -1
- package/dist/components/fields/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/fields/Checkbox/CheckboxGroup.js +13 -13
- package/dist/components/fields/Checkbox/CheckboxGroup.js.map +1 -1
- package/dist/components/fields/Checkbox/context.js +1 -1
- package/dist/components/fields/ColorInput/ColorInput.js +32 -29
- package/dist/components/fields/ColorInput/ColorInput.js.map +1 -1
- package/dist/components/fields/ColorPicker/ColorPicker.d.ts +2 -0
- package/dist/components/fields/ColorPicker/ColorPicker.js +8 -5
- package/dist/components/fields/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/components/fields/ColorSwatch/ColorSwatch.js +1 -1
- package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js +6 -3
- package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js.map +1 -1
- package/dist/components/fields/ComboBox/ComboBox.js +41 -30
- package/dist/components/fields/ComboBox/ComboBox.js.map +1 -1
- package/dist/components/fields/CommandTextArea/CommandTextArea.js +1 -1
- package/dist/components/fields/CommandTextArea/caretPosition.js +1 -1
- package/dist/components/fields/CommandTextArea/useCaretAnchor.js +1 -1
- package/dist/components/fields/DatePicker/DateInput.js +1 -1
- package/dist/components/fields/DatePicker/DateInputBase.js +1 -1
- package/dist/components/fields/DatePicker/DatePicker.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerButton.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerElement.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerInput.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerSegment.js +1 -1
- package/dist/components/fields/DatePicker/DateRangePicker.js +2 -2
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js +246 -238
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js.map +1 -1
- package/dist/components/fields/DatePicker/MonthPicker.js +1 -1
- package/dist/components/fields/DatePicker/PeriodPicker.js +1 -1
- package/dist/components/fields/DatePicker/QuarterPicker.js +1 -1
- package/dist/components/fields/DatePicker/TimeInput.js +1 -1
- package/dist/components/fields/DatePicker/WeekPicker.js +1 -1
- package/dist/components/fields/DatePicker/YearPicker.js +1 -1
- package/dist/components/fields/DatePicker/parseDate.js +1 -1
- package/dist/components/fields/DatePicker/period.js +1 -1
- package/dist/components/fields/DatePicker/props.js +1 -1
- package/dist/components/fields/DatePicker/utils.js +1 -1
- package/dist/components/fields/FileInput/FileInput.js +22 -2
- package/dist/components/fields/FileInput/FileInput.js.map +1 -1
- package/dist/components/fields/FilterListBox/FilterListBox.js +5 -1
- package/dist/components/fields/FilterListBox/FilterListBox.js.map +1 -1
- package/dist/components/fields/FilterPicker/FilterPicker.d.ts +4 -2
- package/dist/components/fields/FilterPicker/FilterPicker.js +3 -2
- package/dist/components/fields/FilterPicker/FilterPicker.js.map +1 -1
- package/dist/components/fields/Input/Input.js +1 -1
- package/dist/components/fields/ListBox/DraggableListBox.js +1 -1
- package/dist/components/fields/ListBox/ListBox.js +8 -7
- package/dist/components/fields/ListBox/ListBox.js.map +1 -1
- package/dist/components/fields/ListBox/optionId.js +1 -1
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js +36 -32
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js.map +1 -1
- package/dist/components/fields/ListBoxPopover/listNavigation.js +1 -1
- package/dist/components/fields/ListBoxPopover/useCompositeFocus.js +1 -1
- package/dist/components/fields/NumberInput/NumberInput.js +1 -1
- package/dist/components/fields/NumberInput/StepButton.js +1 -1
- package/dist/components/fields/PasswordInput/PasswordInput.js +1 -1
- package/dist/components/fields/Picker/Picker.d.ts +4 -2
- package/dist/components/fields/Picker/Picker.js +3 -2
- package/dist/components/fields/Picker/Picker.js.map +1 -1
- package/dist/components/fields/RadioGroup/Radio.d.ts +24 -24
- package/dist/components/fields/RadioGroup/Radio.js +1 -1
- package/dist/components/fields/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/fields/RadioGroup/context.js +1 -1
- package/dist/components/fields/SearchComboBox/SearchComboBox.js +1 -1
- package/dist/components/fields/SearchInput/SearchInput.js +1 -1
- package/dist/components/fields/Select/Select.d.ts +4 -4
- package/dist/components/fields/Select/Select.js +35 -32
- package/dist/components/fields/Select/Select.js.map +1 -1
- package/dist/components/fields/Slider/Gradation.js +1 -1
- package/dist/components/fields/Slider/HueSlider.js +1 -1
- package/dist/components/fields/Slider/RangeSlider.js +1 -1
- package/dist/components/fields/Slider/Slider.js +1 -1
- package/dist/components/fields/Slider/SliderBase.js +1 -1
- package/dist/components/fields/Slider/SliderThumb.js +1 -1
- package/dist/components/fields/Slider/SliderTrack.js +1 -1
- package/dist/components/fields/Slider/elements.js +1 -1
- package/dist/components/fields/Slider/index.js +1 -1
- package/dist/components/fields/Switch/Switch.js +1 -1
- package/dist/components/fields/TagInput/TagInput.js +1 -1
- package/dist/components/fields/TagInput/TagList.js +1 -1
- package/dist/components/fields/TagInput/useActiveOption.js +1 -1
- package/dist/components/fields/TagInput/useTagError.js +1 -1
- package/dist/components/fields/TextArea/TextArea.js +1 -1
- package/dist/components/fields/TextInput/TextInput.js +1 -1
- package/dist/components/fields/TextInput/TextInputBase.js +1 -1
- package/dist/components/fields/TextInput/useAutoSizeTextArea.js +1 -1
- package/dist/components/fields/TextInputMapper/TextInputMapper.js +13 -5
- package/dist/components/fields/TextInputMapper/TextInputMapper.js.map +1 -1
- package/dist/components/fields/TriggerActions.js +1 -1
- package/dist/components/fields/color/ColorPanel.js +62 -53
- package/dist/components/fields/color/ColorPanel.js.map +1 -1
- package/dist/components/fields/color/channels.js +1 -1
- package/dist/components/fields/color/color.js +1 -1
- package/dist/components/fields/color/context.js +1 -1
- package/dist/components/form/FieldWrapper/FieldWrapper.d.ts +1 -0
- package/dist/components/form/FieldWrapper/FieldWrapper.js +133 -109
- package/dist/components/form/FieldWrapper/FieldWrapper.js.map +1 -1
- package/dist/components/form/FieldWrapper/field-description.js +102 -0
- package/dist/components/form/FieldWrapper/field-description.js.map +1 -0
- package/dist/components/form/FieldWrapper/types.d.ts +6 -1
- package/dist/components/form/Form/Field.js +1 -1
- package/dist/components/form/Form/Form.js +1 -1
- package/dist/components/form/Form/ModernFormRoot.js +1 -1
- package/dist/components/form/Form/ResetButton/ResetButton.js +1 -1
- package/dist/components/form/Form/SubmitButton/SubmitButton.js +1 -1
- package/dist/components/form/Form/SubmitError.js +1 -1
- package/dist/components/form/Form/backend.js +1 -1
- package/dist/components/form/Form/index.js +1 -1
- package/dist/components/form/Form/modern/actions.js +1 -1
- package/dist/components/form/Form/modern/context.js +1 -1
- package/dist/components/form/Form/modern/controller.js +1 -1
- package/dist/components/form/Form/modern/field-binding.js +1 -1
- package/dist/components/form/Form/modern/field.js +1 -1
- package/dist/components/form/Form/modern/react.js +1 -1
- package/dist/components/form/Form/modern/store.js +1 -1
- package/dist/components/form/Form/modern/validation.js +1 -1
- package/dist/components/form/Form/modern/values.js +1 -1
- package/dist/components/form/Form/reset-unbound-controls.js +1 -1
- package/dist/components/form/Form/use-field/use-field-binding.js +1 -1
- package/dist/components/form/Form/use-field/use-field-props.js +17 -4
- package/dist/components/form/Form/use-field/use-field-props.js.map +1 -1
- package/dist/components/form/Form/use-field/use-field.js +1 -1
- package/dist/components/form/Form/use-form.js +1 -1
- package/dist/components/form/Form/validation.js +1 -1
- package/dist/components/form/Label.js +27 -24
- package/dist/components/form/Label.js.map +1 -1
- package/dist/components/form/legacy-tooltip.js +1 -1
- package/dist/components/form/validation/ValidationIndicator.js +1 -1
- package/dist/components/form/validation/resolve-validation-props.js +1 -1
- package/dist/components/form/validation/use-validation-props.js +1 -1
- package/dist/components/form/wrapper.js +2 -1
- package/dist/components/form/wrapper.js.map +1 -1
- package/dist/components/helpers/DisplayTransition/DisplayTransition.js +1 -1
- package/dist/components/helpers/IconSwitch/IconSwitch.js +1 -1
- package/dist/components/layout/Flex.js +1 -1
- package/dist/components/layout/Flow.js +1 -1
- package/dist/components/layout/Grid.js +1 -1
- package/dist/components/layout/Panel.js +1 -1
- package/dist/components/layout/Prefix.js +1 -1
- package/dist/components/layout/ResizablePanel.js +1 -1
- package/dist/components/layout/Space.js +1 -1
- package/dist/components/layout/Suffix.js +1 -1
- package/dist/components/navigation/Pagination/Pagination.js +1 -1
- package/dist/components/navigation/Pagination/use-pagination.js +1 -1
- package/dist/components/navigation/Tabs/BoardDragActiveProvider.js +1 -1
- package/dist/components/navigation/Tabs/DraggableTabList.js +1 -1
- package/dist/components/navigation/Tabs/TabButton.js +1 -1
- package/dist/components/navigation/Tabs/TabDropIndicator.js +1 -1
- package/dist/components/navigation/Tabs/TabPanel.js +1 -1
- package/dist/components/navigation/Tabs/TabPicker.js +1 -1
- package/dist/components/navigation/Tabs/Tabs.js +1 -1
- package/dist/components/navigation/Tabs/TabsAction.js +1 -1
- package/dist/components/navigation/Tabs/TabsContext.js +1 -1
- package/dist/components/navigation/Tabs/popover-placement.js +1 -1
- package/dist/components/navigation/Tabs/styled.js +1 -1
- package/dist/components/navigation/Tabs/types.d.ts +3 -3
- package/dist/components/navigation/Tabs/types.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-editing.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-indicator.js +1 -1
- package/dist/components/organisms/StatsCard/StatsCard.js +1 -1
- package/dist/components/other/Calendar/Calendar.js +1 -1
- package/dist/components/other/Calendar/CalendarCell.js +1 -1
- package/dist/components/other/Calendar/CalendarGrid.js +1 -1
- package/dist/components/other/Calendar/CalendarHeader.js +1 -1
- package/dist/components/other/Calendar/CalendarPanel.js +1 -1
- package/dist/components/other/Calendar/PeriodCalendar.js +1 -1
- package/dist/components/other/Calendar/PeriodGrid.js +1 -1
- package/dist/components/other/Calendar/RangeCalendar.js +1 -1
- package/dist/components/other/Calendar/styled.js +1 -1
- package/dist/components/other/CubeLogo/CubeLogo.js +1 -1
- package/dist/components/other/NoDataIcon/NoDataIcon.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialog.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
- package/dist/components/overlays/Dialog/Dialog.js +1 -1
- package/dist/components/overlays/Dialog/DialogContainer.js +1 -1
- package/dist/components/overlays/Dialog/DialogForm.js +1 -1
- package/dist/components/overlays/Dialog/DialogTrigger.js +1 -1
- package/dist/components/overlays/Dialog/ModernDialogForm.js +1 -1
- package/dist/components/overlays/Dialog/context.js +1 -1
- package/dist/components/overlays/Dialog/default-button-text.js +1 -1
- package/dist/components/overlays/Dialog/use-content-overflow.js +1 -1
- package/dist/components/overlays/Dialog/use-dialog-container.js +1 -1
- package/dist/components/overlays/Modal/Modal.js +44 -24
- package/dist/components/overlays/Modal/Modal.js.map +1 -1
- package/dist/components/overlays/Modal/OpenTransitionContext.js +1 -1
- package/dist/components/overlays/Modal/Overlay.js +1 -1
- package/dist/components/overlays/Modal/Popover.js +34 -24
- package/dist/components/overlays/Modal/Popover.js.map +1 -1
- package/dist/components/overlays/Modal/Tray.js +45 -25
- package/dist/components/overlays/Modal/Tray.js.map +1 -1
- package/dist/components/overlays/Modal/Underlay.js +1 -1
- package/dist/components/overlays/Modal/modal-containment.js +145 -0
- package/dist/components/overlays/Modal/modal-containment.js.map +1 -0
- package/dist/components/overlays/Notifications/Notification.js +1 -1
- package/dist/components/overlays/Notifications/NotificationAction.js +1 -1
- package/dist/components/overlays/Notifications/NotificationCard.js +2 -2
- package/dist/components/overlays/Notifications/NotificationContext.js +1 -1
- package/dist/components/overlays/Notifications/NotificationItem.js +1 -1
- package/dist/components/overlays/Notifications/OverlayContainer.js +1 -1
- package/dist/components/overlays/Notifications/OverlayProvider.js +1 -1
- package/dist/components/overlays/Notifications/PersistentNotificationsList.js +1 -1
- package/dist/components/overlays/Notifications/dismissed-storage.js +1 -1
- package/dist/components/overlays/Notifications/format-relative-time.js +1 -1
- package/dist/components/overlays/Notifications/index.js +1 -1
- package/dist/components/overlays/Notifications/use-notification-state.js +1 -1
- package/dist/components/overlays/Notifications/use-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-overlay-timers.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-state.js +1 -1
- package/dist/components/overlays/Notifications/use-toast-state.js +1 -1
- package/dist/components/overlays/Toast/ToastItem.js +1 -1
- package/dist/components/overlays/Toast/index.js +1 -1
- package/dist/components/overlays/Toast/useProgressToast.js +1 -1
- package/dist/components/overlays/Toast/useToast.js +1 -1
- package/dist/components/overlays/Tooltip/Tooltip.js +50 -47
- package/dist/components/overlays/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/overlays/Tooltip/TooltipProvider.js +1 -1
- package/dist/components/overlays/Tooltip/TooltipTrigger.js +1 -1
- package/dist/components/overlays/Tooltip/context.js +1 -1
- package/dist/components/overlays/Tooltip/split-trigger-props.js +1 -1
- package/dist/components/portal/Portal.js +1 -1
- package/dist/components/portal/PortalProvider.js +1 -1
- package/dist/components/portal/usePortal.js +1 -1
- package/dist/components/shared/DraggableCollection.js +1 -1
- package/dist/components/shared/InvalidIcon.js +1 -1
- package/dist/components/shared/ValidIcon.js +1 -1
- package/dist/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
- package/dist/components/status/Spin/Cube.js +1 -1
- package/dist/components/status/Spin/InternalSpinner.js +1 -1
- package/dist/components/status/Spin/Spin.js +1 -1
- package/dist/components/status/Spin/SpinsContainer.js +1 -1
- package/dist/data/item-themes.js +1 -1
- package/dist/data/themes.js +1 -1
- package/dist/eslint-plugin/defaults.generated.js +2 -2
- package/dist/eslint-plugin/defaults.generated.js.map +1 -1
- package/dist/eslint-plugin/index.js +1 -1
- package/dist/eslint-plugin/rules/no-redundant-default-prop.js +1 -1
- package/dist/i18n/I18nProvider.js +3 -2
- package/dist/i18n/I18nProvider.js.map +1 -1
- package/dist/i18n/createFormatter.js +1 -1
- package/dist/i18n/index.d.ts +2 -1
- package/dist/i18n/index.js +3 -2
- package/dist/i18n/index.js.map +1 -1
- package/dist/i18n/instance.d.ts +2 -3
- package/dist/i18n/instance.js +3 -4
- package/dist/i18n/instance.js.map +1 -1
- package/dist/i18n/locales/de-DE/uikit.js +36 -5
- package/dist/i18n/locales/en-US/uikit.js +36 -5
- package/dist/i18n/locales/en-US/uikit.json.d.ts +41 -4
- package/dist/i18n/locales/es-ES/uikit.js +36 -5
- package/dist/i18n/locales/es-MX/uikit.js +36 -5
- package/dist/i18n/locales/fr-FR/uikit.js +36 -5
- package/dist/i18n/locales/it-IT/uikit.js +36 -5
- package/dist/i18n/locales/ja-JP/uikit.js +36 -5
- package/dist/i18n/locales/nb-NO/uikit.js +36 -5
- package/dist/i18n/locales/pt-BR/uikit.js +36 -5
- package/dist/i18n/locales/pt-PT/uikit.js +36 -5
- package/dist/i18n/locales/sv-SE/uikit.js +36 -5
- package/dist/i18n/locales/vi-VN/uikit.js +36 -5
- package/dist/i18n/locales.js +1 -1
- package/dist/i18n/namespace.d.ts +11 -0
- package/dist/i18n/namespace.js +12 -0
- package/dist/i18n/namespace.js.map +1 -0
- package/dist/i18n/useFormatter.js +1 -1
- package/dist/i18n/useI18n.js +5 -3
- package/dist/i18n/useI18n.js.map +1 -1
- package/dist/icons/AdjustmentsHorizontalIcon.js +1 -1
- package/dist/icons/AdjustmentsIcon.js +1 -1
- package/dist/icons/AiIcon.js +1 -1
- package/dist/icons/AreaChartIcon.js +1 -1
- package/dist/icons/ArrowNarrowDownIcon.js +1 -1
- package/dist/icons/ArrowNarrowUpIcon.js +1 -1
- package/dist/icons/BackwardIcon.js +1 -1
- package/dist/icons/BarChartIcon.js +1 -1
- package/dist/icons/BellFilledIcon.js +1 -1
- package/dist/icons/BellIcon.js +1 -1
- package/dist/icons/BooleanIcon.js +1 -1
- package/dist/icons/CalendarEditIcon.js +1 -1
- package/dist/icons/CalendarIcon.js +1 -1
- package/dist/icons/CaretDownIcon.js +1 -1
- package/dist/icons/CaretUpIcon.js +1 -1
- package/dist/icons/ChartAreaStackedIcon.js +1 -1
- package/dist/icons/ChartAreaStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBarGroupedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarGroupedIcon.js +1 -1
- package/dist/icons/ChartBarHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarLineIcon.js +1 -1
- package/dist/icons/ChartBarStackedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBoxPlot2Icon.js +1 -1
- package/dist/icons/ChartBoxPlotIcon.js +1 -1
- package/dist/icons/ChartBubbleIcon.js +1 -1
- package/dist/icons/ChartDonut2Icon.js +1 -1
- package/dist/icons/ChartFunnelIcon.js +1 -1
- package/dist/icons/ChartHeatmapIcon.js +1 -1
- package/dist/icons/ChartKPIIcon.js +1 -1
- package/dist/icons/ChartPie2Icon.js +1 -1
- package/dist/icons/ChartScatterIcon.js +1 -1
- package/dist/icons/CheckCircleFilledIcon.js +1 -1
- package/dist/icons/CheckCircleIcon.js +1 -1
- package/dist/icons/CheckIcon.js +1 -1
- package/dist/icons/CircleFilledIcon.js +1 -1
- package/dist/icons/ClearIcon.js +1 -1
- package/dist/icons/CloseCircleFilledIcon.js +1 -1
- package/dist/icons/CloseCircleIcon.js +1 -1
- package/dist/icons/CloseIcon.js +1 -1
- package/dist/icons/CodeIcon.js +1 -1
- package/dist/icons/ColumnTotalIcon.js +1 -1
- package/dist/icons/CopyIcon.js +1 -1
- package/dist/icons/CountIcon.js +1 -1
- package/dist/icons/CubeIcon.js +1 -1
- package/dist/icons/CubePauseIcon.js +1 -1
- package/dist/icons/CubePlayIcon.js +1 -1
- package/dist/icons/CurrencyDollarIcon.js +1 -1
- package/dist/icons/DangerIcon.js +1 -1
- package/dist/icons/DashboardIcon.js +1 -1
- package/dist/icons/DatabaseIcon.js +1 -1
- package/dist/icons/DecimalDecreaseIcon.js +1 -1
- package/dist/icons/DecimalIncreaseIcon.js +1 -1
- package/dist/icons/DirectionIcon.js +1 -1
- package/dist/icons/DonutIcon.js +1 -1
- package/dist/icons/DownIcon.js +1 -1
- package/dist/icons/EditIcon.js +1 -1
- package/dist/icons/ExclamationCircleFilledIcon.js +1 -1
- package/dist/icons/ExclamationCircleIcon.js +1 -1
- package/dist/icons/ExclamationIcon.js +1 -1
- package/dist/icons/EyeIcon.js +1 -1
- package/dist/icons/EyeInvisibleIcon.js +1 -1
- package/dist/icons/FilterIcon.js +1 -1
- package/dist/icons/FolderFilledIcon.js +1 -1
- package/dist/icons/FolderIcon.js +1 -1
- package/dist/icons/FolderOpenFilledIcon.js +1 -1
- package/dist/icons/FolderOpenIcon.js +1 -1
- package/dist/icons/ForwardIcon.js +1 -1
- package/dist/icons/GripVerticalIcon.js +1 -1
- package/dist/icons/HierarchyIcon.js +1 -1
- package/dist/icons/HierarchyOpenIcon.js +1 -1
- package/dist/icons/Icon.js +1 -1
- package/dist/icons/InfoCircleIcon.js +1 -1
- package/dist/icons/InfoIcon.js +1 -1
- package/dist/icons/KeyIcon.js +1 -1
- package/dist/icons/LeftIcon.js +1 -1
- package/dist/icons/LineChartIcon.js +1 -1
- package/dist/icons/LoadingIcon.js +1 -1
- package/dist/icons/LockFilledIcon.js +1 -1
- package/dist/icons/LockIcon.js +1 -1
- package/dist/icons/MoreIcon.js +1 -1
- package/dist/icons/NotAllowedIcon.js +1 -1
- package/dist/icons/Number123Icon.js +1 -1
- package/dist/icons/NumberIcon.js +1 -1
- package/dist/icons/PauseCircleFilledIcon.js +1 -1
- package/dist/icons/PauseCircleIcon.js +1 -1
- package/dist/icons/PauseIcon.js +1 -1
- package/dist/icons/PercentageIcon.js +1 -1
- package/dist/icons/PieChartIcon.js +1 -1
- package/dist/icons/PipetteIcon.js +1 -1
- package/dist/icons/PlayCircleIcon.js +1 -1
- package/dist/icons/PlayIcon.js +1 -1
- package/dist/icons/PlusIcon.js +1 -1
- package/dist/icons/ProgressBarIcon.js +1 -1
- package/dist/icons/ReloadIcon.js +1 -1
- package/dist/icons/ReportIcon.js +1 -1
- package/dist/icons/ReturnIcon.js +1 -1
- package/dist/icons/RightIcon.js +1 -1
- package/dist/icons/RowTotalsIcon.js +1 -1
- package/dist/icons/SchemeIcon.js +1 -1
- package/dist/icons/SearchIcon.js +1 -1
- package/dist/icons/SemanticQueryIcon.js +1 -1
- package/dist/icons/SettingsIcon.js +1 -1
- package/dist/icons/ShieldFilledIcon.js +1 -1
- package/dist/icons/ShieldIcon.js +1 -1
- package/dist/icons/SlashIcon.js +1 -1
- package/dist/icons/SparklesIcon.js +1 -1
- package/dist/icons/SqlIcon.js +1 -1
- package/dist/icons/StatsIcon.js +1 -1
- package/dist/icons/StopIcon.js +1 -1
- package/dist/icons/StringIcon.js +1 -1
- package/dist/icons/SubtotalsIcon.js +1 -1
- package/dist/icons/SwitchIcon.js +1 -1
- package/dist/icons/TableIcon.js +1 -1
- package/dist/icons/ThumbsDownIcon.js +1 -1
- package/dist/icons/ThumbsUpIcon.js +1 -1
- package/dist/icons/ThunderboltCrossedIcon.js +1 -1
- package/dist/icons/ThunderboltFilledIcon.js +1 -1
- package/dist/icons/ThunderboltIcon.js +1 -1
- package/dist/icons/TimeIcon.js +1 -1
- package/dist/icons/TrashIcon.js +1 -1
- package/dist/icons/UnlockIcon.js +1 -1
- package/dist/icons/UpIcon.js +1 -1
- package/dist/icons/UserGroupIcon.js +1 -1
- package/dist/icons/UserIcon.js +1 -1
- package/dist/icons/UserLockIcon.js +1 -1
- package/dist/icons/ViewIcon.js +1 -1
- package/dist/icons/WarningFilledIcon.js +1 -1
- package/dist/icons/WarningIcon.js +1 -1
- package/dist/icons/wrap-icon.js +1 -1
- package/dist/index.d.ts +9 -7
- package/dist/index.js +7 -6
- package/dist/index.js.map +1 -1
- package/dist/probe/canonicalize.js +1 -1
- package/dist/probe/css.js +1 -1
- package/dist/probe/index.js +1 -1
- package/dist/provider.js +2 -2
- package/dist/provider.js.map +1 -1
- package/dist/providers/TrackingProvider.js +1 -1
- package/dist/providers/navigation-url.js +11 -0
- package/dist/providers/navigation-url.js.map +1 -0
- package/dist/providers/navigationAdapter.default.js +1 -1
- package/dist/providers/use-navigation.js +19 -0
- package/dist/providers/use-navigation.js.map +1 -0
- package/dist/tokens/all-tokens.js +1 -1
- package/dist/tokens/base.js +1 -1
- package/dist/tokens/color-seed.js +1 -1
- package/dist/tokens/color-theme.js +1 -1
- package/dist/tokens/colors.js +1 -1
- package/dist/tokens/layout.js +1 -1
- package/dist/tokens/lazy-styles.js +1 -1
- package/dist/tokens/legacy-color.js +1 -1
- package/dist/tokens/palette-config.js +1 -1
- package/dist/tokens/palette.js +1 -1
- package/dist/tokens/resolve.js +1 -1
- package/dist/tokens/shadows.js +1 -1
- package/dist/tokens/sizes.js +1 -1
- package/dist/tokens/spacing.js +1 -1
- package/dist/tokens/typography.js +1 -1
- package/dist/utils/ResizeSensor.js +1 -1
- package/dist/utils/colors.js +1 -1
- package/dist/utils/dotize.js +1 -1
- package/dist/utils/is-dev-env.js +1 -1
- package/dist/utils/modules.js +1 -1
- package/dist/utils/promise.js +1 -1
- package/dist/utils/raf.js +1 -1
- package/dist/utils/random.js +1 -1
- package/dist/utils/range.js +1 -1
- package/dist/utils/react/RenderCache.js +1 -1
- package/dist/utils/react/Slots.js +1 -1
- package/dist/utils/react/chain.js +1 -1
- package/dist/utils/react/disabledProps.js +1 -1
- package/dist/utils/react/forwardRefWithGenerics.js +1 -1
- package/dist/utils/react/index.js +1 -1
- package/dist/utils/react/interactions.js +1 -1
- package/dist/utils/react/isTextOnly.js +1 -1
- package/dist/utils/react/mapProps.js +1 -1
- package/dist/utils/react/mergeProps.js +1 -1
- package/dist/utils/react/nullableValue.js +1 -1
- package/dist/utils/react/overlayKeyPropagation.js +1 -1
- package/dist/utils/react/programmaticFocus.js +1 -1
- package/dist/utils/react/resolveIcon.js +1 -1
- package/dist/utils/react/sharedStore.js +1 -1
- package/dist/utils/react/useBufferedValue.js +1 -1
- package/dist/utils/react/useCombinedRefs.js +1 -1
- package/dist/utils/react/useControlledFocusVisible.js +1 -1
- package/dist/utils/react/useEventBus.js +1 -1
- package/dist/utils/react/useId.js +1 -1
- package/dist/utils/react/useIsDarwin.js +1 -1
- package/dist/utils/react/useKeySymbols.js +1 -1
- package/dist/utils/react/useLayoutEffect.js +1 -1
- package/dist/utils/react/useLocalStorage.js +1 -1
- package/dist/utils/react/useMergeStyles.js +1 -1
- package/dist/utils/react/useOverlayEscapeGuard.js +1 -1
- package/dist/utils/react/usePopoverSync.js +1 -1
- package/dist/utils/react/useQaProps.js +1 -1
- package/dist/utils/react/useScheme.js +1 -1
- package/dist/utils/react/useViewportSize.js +1 -1
- package/dist/utils/react/wrapNodeIfPlain.js +1 -1
- package/dist/utils/selection.js +1 -1
- package/dist/utils/styles.js +1 -1
- package/dist/utils/tree.js +1 -1
- package/dist/utils/warnings.js +1 -1
- package/dist/version.js +2 -2
- package/docs/Usage.md +4 -0
- package/docs/components/CollectionItem.md +5 -1
- package/docs/components/actions/CommandMenu.md +46 -18
- package/docs/components/actions/Menu.md +124 -19
- package/docs/components/content/Placeholder.md +2 -0
- package/docs/components/content/Skeleton.md +2 -0
- package/docs/components/data/DataTable.md +3 -0
- package/docs/components/data/ItemTable.md +11 -1
- package/docs/components/overlays/Dialog.md +1 -1
- package/docs/components/overlays/DialogContainer.md +1 -2
- package/docs/components/overlays/DialogTrigger.md +1 -0
- package/package.json +3 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
|
|
2
2
|
import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
|
|
3
3
|
import { useI18n } from "../../../i18n/useI18n.js";
|
|
4
4
|
import { c } from "react/compiler-runtime";
|
|
5
5
|
import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
|
|
6
|
-
import { forwardRef } from "react";
|
|
6
|
+
import { createContext, forwardRef, useContext } from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
|
|
9
9
|
//#region src/components/content/Placeholder/Placeholder.tsx
|
|
@@ -11,33 +11,30 @@ const placeholderAnimation = keyframes({
|
|
|
11
11
|
"0%": { "background-position": "0 0" },
|
|
12
12
|
"100%": { "background-position": "$placeholder-animation-size 0" }
|
|
13
13
|
});
|
|
14
|
-
const StyledPlaceholder = tasty({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
image: {
|
|
39
|
-
"": "none",
|
|
40
|
-
animated: `linear-gradient(
|
|
14
|
+
const StyledPlaceholder = tasty({ styles: {
|
|
15
|
+
display: "block",
|
|
16
|
+
height: "2x",
|
|
17
|
+
opacity: ".35",
|
|
18
|
+
aspectRatio: {
|
|
19
|
+
"": "initial",
|
|
20
|
+
circle: "1 / 1"
|
|
21
|
+
},
|
|
22
|
+
radius: {
|
|
23
|
+
"": "1r",
|
|
24
|
+
circle: "round"
|
|
25
|
+
},
|
|
26
|
+
"$placeholder-animation-time": "1.4s",
|
|
27
|
+
"$placeholder-animation-size": "calc((180rem + 100vw) / 3)",
|
|
28
|
+
backgroundRepeat: "repeat",
|
|
29
|
+
backgroundSize: "$placeholder-animation-size",
|
|
30
|
+
fill: "#dark.15",
|
|
31
|
+
animation: {
|
|
32
|
+
"": "none",
|
|
33
|
+
animated: `${placeholderAnimation} $placeholder-animation-time linear infinite`
|
|
34
|
+
},
|
|
35
|
+
image: {
|
|
36
|
+
"": "none",
|
|
37
|
+
animated: `linear-gradient(
|
|
41
38
|
135deg,
|
|
42
39
|
#dark.15 0%,
|
|
43
40
|
#dark.15 5%,
|
|
@@ -47,59 +44,69 @@ const StyledPlaceholder = tasty({
|
|
|
47
44
|
#dark.15 95%,
|
|
48
45
|
#dark.15 100%
|
|
49
46
|
)`
|
|
50
|
-
}
|
|
51
47
|
}
|
|
52
|
-
});
|
|
48
|
+
} });
|
|
49
|
+
/**
|
|
50
|
+
* Set by a component that says once that a whole group of placeholders is
|
|
51
|
+
* loading — `Skeleton` is one region around all of its bars, and a table's
|
|
52
|
+
* loading row is `aria-busy`. The placeholders inside are then decoration, and
|
|
53
|
+
* stay out of the accessibility tree rather than each being a landmark of its
|
|
54
|
+
* own.
|
|
55
|
+
*/
|
|
56
|
+
const PlaceholderGroupContext = createContext(false);
|
|
53
57
|
const Placeholder = forwardRef(function Placeholder(allProps, ref) {
|
|
54
|
-
const $ = c(
|
|
58
|
+
const $ = c(13);
|
|
55
59
|
const { size: t0, isStatic, circle, ...props } = allProps;
|
|
56
60
|
const size = t0 === void 0 ? "2x" : t0;
|
|
57
61
|
const { t } = useI18n();
|
|
62
|
+
const isInGroup = useContext(PlaceholderGroupContext);
|
|
58
63
|
const styles = extractStyles(props, CONTAINER_STYLES);
|
|
59
64
|
const T0 = StyledPlaceholder;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
let t1;
|
|
66
|
+
if ($[0] !== isInGroup || $[1] !== t) {
|
|
67
|
+
t1 = isInGroup ? { "aria-hidden": true } : {
|
|
68
|
+
role: "region",
|
|
69
|
+
"aria-label": t("placeholder.contentIsLoading", "Content is loading")
|
|
70
|
+
};
|
|
71
|
+
$[0] = isInGroup;
|
|
72
|
+
$[1] = t;
|
|
73
|
+
$[2] = t1;
|
|
74
|
+
} else t1 = $[2];
|
|
75
|
+
const t2 = filterBaseProps(props, { eventProps: true });
|
|
76
|
+
const t3 = "";
|
|
77
|
+
const t4 = !isStatic;
|
|
78
|
+
let t5;
|
|
79
|
+
if ($[3] !== circle || $[4] !== t4) {
|
|
80
|
+
t5 = {
|
|
81
|
+
animated: t4,
|
|
74
82
|
circle
|
|
75
83
|
};
|
|
76
|
-
$[
|
|
77
|
-
$[
|
|
78
|
-
$[
|
|
79
|
-
} else
|
|
80
|
-
const
|
|
81
|
-
let
|
|
82
|
-
if ($[
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"data-loading-placeholder": t4,
|
|
84
|
+
$[3] = circle;
|
|
85
|
+
$[4] = t4;
|
|
86
|
+
$[5] = t5;
|
|
87
|
+
} else t5 = $[5];
|
|
88
|
+
const t6 = mergeStyleLayers({ height: size }, styles);
|
|
89
|
+
let t7;
|
|
90
|
+
if ($[6] !== T0 || $[7] !== ref || $[8] !== t1 || $[9] !== t2 || $[10] !== t5 || $[11] !== t6) {
|
|
91
|
+
t7 = /* @__PURE__ */ jsx(T0, {
|
|
92
|
+
...t1,
|
|
93
|
+
...t2,
|
|
94
|
+
"data-loading-placeholder": t3,
|
|
88
95
|
ref,
|
|
89
|
-
mods:
|
|
90
|
-
styles:
|
|
96
|
+
mods: t5,
|
|
97
|
+
styles: t6
|
|
91
98
|
});
|
|
92
|
-
$[
|
|
93
|
-
$[
|
|
94
|
-
$[
|
|
95
|
-
$[
|
|
96
|
-
$[
|
|
97
|
-
$[
|
|
98
|
-
$[
|
|
99
|
-
} else
|
|
100
|
-
return
|
|
99
|
+
$[6] = T0;
|
|
100
|
+
$[7] = ref;
|
|
101
|
+
$[8] = t1;
|
|
102
|
+
$[9] = t2;
|
|
103
|
+
$[10] = t5;
|
|
104
|
+
$[11] = t6;
|
|
105
|
+
$[12] = t7;
|
|
106
|
+
} else t7 = $[12];
|
|
107
|
+
return t7;
|
|
101
108
|
});
|
|
102
109
|
|
|
103
110
|
//#endregion
|
|
104
|
-
export { Placeholder };
|
|
111
|
+
export { Placeholder, PlaceholderGroupContext };
|
|
105
112
|
//# sourceMappingURL=Placeholder.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Placeholder.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","keyframes","Styles","tasty","forwardRef","useI18n","extractStyles","mergeStyleLayers","placeholderAnimation","StyledPlaceholder","
|
|
1
|
+
{"version":3,"file":"Placeholder.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","keyframes","Styles","tasty","createContext","forwardRef","useContext","useI18n","extractStyles","mergeStyleLayers","placeholderAnimation","StyledPlaceholder","styles","display","height","opacity","aspectRatio","circle","radius","backgroundRepeat","backgroundSize","fill","animation","animated","image","PlaceholderGroupContext","CubePlaceholderProps","size","isStatic","Placeholder","allProps","ref","$","_c","t0","props","undefined","t","isInGroup","T0","t1","role","t2","eventProps","t3","t4","t5","t6","t7"],"sources":["../../../../src/components/content/Placeholder/Placeholder.tsx"],"sourcesContent":["import {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n keyframes,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { createContext, forwardRef, useContext } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { extractStyles, mergeStyleLayers } from '../../../utils/styles';\n\n// Create the placeholder animation using keyframes helper\nconst placeholderAnimation = keyframes({\n '0%': {\n 'background-position': '0 0',\n },\n '100%': {\n 'background-position': '$placeholder-animation-size 0',\n },\n});\n\nconst StyledPlaceholder = tasty({\n styles: {\n display: 'block',\n height: '2x',\n opacity: '.35',\n aspectRatio: {\n '': 'initial',\n circle: '1 / 1',\n },\n radius: {\n '': '1r',\n circle: 'round',\n },\n\n // CSS custom properties for animation\n '$placeholder-animation-time': '1.4s',\n '$placeholder-animation-size': 'calc((180rem + 100vw) / 3)',\n\n // Base background styling\n backgroundRepeat: 'repeat',\n backgroundSize: '$placeholder-animation-size',\n fill: '#dark.15',\n\n // Animated state styling\n animation: {\n '': 'none',\n animated: `${placeholderAnimation} $placeholder-animation-time linear infinite`,\n },\n image: {\n '': 'none',\n animated: `linear-gradient(\n 135deg,\n #dark.15 0%,\n #dark.15 5%,\n #dark.0 35%,\n #dark-03.2 50%,\n #dark-03.0 65%,\n #dark.15 95%,\n #dark.15 100%\n )`,\n },\n },\n});\n\n/**\n * Set by a component that says once that a whole group of placeholders is\n * loading — `Skeleton` is one region around all of its bars, and a table's\n * loading row is `aria-busy`. The placeholders inside are then decoration, and\n * stay out of the accessibility tree rather than each being a landmark of its\n * own.\n */\nexport const PlaceholderGroupContext = createContext(false);\n\nexport interface CubePlaceholderProps extends BaseProps, ContainerStyleProps {\n size?: Styles['fontSize'];\n circle?: boolean;\n isStatic?: boolean;\n}\n\nexport const Placeholder = forwardRef(function Placeholder(\n allProps: CubePlaceholderProps,\n ref,\n) {\n let { size = '2x', isStatic, circle, ...props } = allProps;\n\n const { t } = useI18n();\n const isInGroup = useContext(PlaceholderGroupContext);\n\n let styles = extractStyles(props, CONTAINER_STYLES);\n\n return (\n <StyledPlaceholder\n {...(isInGroup\n ? { 'aria-hidden': true }\n : {\n role: 'region',\n 'aria-label': t(\n 'placeholder.contentIsLoading',\n 'Content is loading',\n ),\n })}\n {...filterBaseProps(props, { eventProps: true })}\n // The documented way to detect a loading placeholder. Fixed, so a\n // caller's `qa` or a translated `aria-label` doesn't change it.\n data-loading-placeholder=\"\"\n ref={ref}\n mods={{ animated: !isStatic, circle }}\n styles={mergeStyleLayers({ height: size }, styles)}\n />\n );\n});\n"],"mappings":";;;;;;;;;AAeA,MAAMa,uBAAuBT,UAAU;CACrC,MAAM,EACJ,uBAAuB,OACxB;CACD,QAAQ,EACN,uBAAuB,iCACzB;CACD,CAAC;AAEF,MAAMU,oBAAoBR,MAAM,EAC9BS,QAAQ;CACNC,SAAS;CACTC,QAAQ;CACRC,SAAS;CACTC,aAAa;EACX,IAAI;EACJC,QAAQ;EACT;CACDC,QAAQ;EACN,IAAI;EACJD,QAAQ;EACT;CAGD,+BAA+B;CAC/B,+BAA+B;CAG/BE,kBAAkB;CAClBC,gBAAgB;CAChBC,MAAM;CAGNC,WAAW;EACT,IAAI;EACJC,UAAU,GAAGb,qBAAoB;EAClC;CACDc,OAAO;EACL,IAAI;EACJD,UAAU;;;;;;;;;;EAUZ;CACF,EACD,CAAC;;;;;;;;AASF,MAAaE,0BAA0BrB,cAAc,MAAM;AAQ3D,MAAayB,cAAcxB,WAAW,SAAAwB,YAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAIpC,MAAA,EAAAN,MAAAO,IAAAN,UAAAX,QAAA,GAAAkB,UAAkDL;CAA5C,MAAAH,OAAAO,OAAAE,SAAA,OAAAF;CAEN,MAAA,EAAAG,MAAc9B,SAAS;CACvB,MAAA+B,YAAkBhC,WAAWmB,wBAAwB;CAErD,MAAAb,SAAaJ,cAAc2B,OAAOrC,iBAAiB;CAGhD,MAAAyC,KAAA5B;CAAiB,IAAA6B;AAAA,KAAAR,EAAA,OAAAM,aAAAN,EAAA,OAAAK,GAAA;AACXG,OAAAF,YAAA,EAAA,eACgB,MAOhB,GARA;GAAAG,MAGO;GAAQ,cACAJ,EACZ,gCACA,qBACF;GACD;AAAAL,IAAA,KAAAM;AAAAN,IAAA,KAAAK;AAAAL,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CACD,MAAAU,KAAA1C,gBAAgBmC,OAAO,EAAAQ,YAAc,MAAM,CAAC;CAGvB,MAAAC,KAAA;CAEP,MAAAC,KAAA,CAACjB;CAAQ,IAAAkB;AAAA,KAAAd,EAAA,OAAAf,UAAAe,EAAA,OAAAa,IAAA;AAArBC,OAAA;GAAAvB,UAAYsB;GAAS5B;GAAU;AAAAe,IAAA,KAAAf;AAAAe,IAAA,KAAAa;AAAAb,IAAA,KAAAc;OAAAA,MAAAd,EAAA;CAC7B,MAAAe,KAAAtC,iBAAiB,EAAAK,QAAUa,MAAM,EAAEf,OAAO;CAAA,IAAAoC;AAAA,KAAAhB,EAAA,OAAAO,MAAAP,EAAA,OAAAD,OAAAC,EAAA,OAAAQ,MAAAR,EAAA,OAAAU,MAAAV,EAAA,QAAAc,MAAAd,EAAA,QAAAe,IAAA;AAhBpDC,OAAA,oBAAC;GAAiB,GACXR;GAQA,GACDE;GAGqB,4BAAAE;GACpBb;GACC,MAAAe;GACE,QAAAC;IACR;AAAAf,IAAA,KAAAO;AAAAP,IAAA,KAAAD;AAAAC,IAAA,KAAAQ;AAAAR,IAAA,KAAAU;AAAAV,IAAA,MAAAc;AAAAd,IAAA,MAAAe;AAAAf,IAAA,MAAAgB;OAAAA,MAAAhB,EAAA;AAAA,QAjBFgB;EAmBF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
|
|
2
2
|
import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
|
|
3
3
|
import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
|
|
4
4
|
import { forwardRef } from "react";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
|
|
2
2
|
import { _PrismCode } from "../PrismCode/PrismCode.js";
|
|
3
3
|
import { c } from "react/compiler-runtime";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
|
|
2
2
|
import { extractStyles } from "../../../utils/styles.js";
|
|
3
3
|
import { mergeProps } from "../../../utils/react/mergeProps.js";
|
|
4
4
|
import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
|
|
@@ -159,10 +159,10 @@ const ResultAction = forwardRef(function ResultAction(t0, ref) {
|
|
|
159
159
|
return t2;
|
|
160
160
|
});
|
|
161
161
|
const statusIconMap = {
|
|
162
|
-
success: () => /* @__PURE__ */ jsx(IconCircleCheckFilled, {}),
|
|
163
|
-
error: () => /* @__PURE__ */ jsx(IconCircleXFilled, {}),
|
|
164
|
-
info: () => /* @__PURE__ */ jsx(IconInfoCircleFilled, {}),
|
|
165
|
-
warning: () => /* @__PURE__ */ jsx(IconAlertTriangleFilled, {}),
|
|
162
|
+
success: () => /* @__PURE__ */ jsx(IconCircleCheckFilled, { "aria-hidden": "true" }),
|
|
163
|
+
error: () => /* @__PURE__ */ jsx(IconCircleXFilled, { "aria-hidden": "true" }),
|
|
164
|
+
info: () => /* @__PURE__ */ jsx(IconInfoCircleFilled, { "aria-hidden": "true" }),
|
|
165
|
+
warning: () => /* @__PURE__ */ jsx(IconAlertTriangleFilled, { "aria-hidden": "true" }),
|
|
166
166
|
404: null,
|
|
167
167
|
403: null,
|
|
168
168
|
500: null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Result.js","names":["FocusableRef","IconAlertTriangleFilled","IconCircleCheckFilled","IconCircleXFilled","IconInfoCircleFilled","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","ComponentType","createContext","forwardRef","ReactNode","useContext","mergeProps","wrapNodeIfPlain","extractStyles","Button","CubeButtonProps","Title","CubeResultProps","children","icon","status","CubeResultStatus","subTitle","subtitle","title","actions","size","CubeResultSize","layout","CubeResultLayout","isCompact","StatusIconMap","Record","Container","qa","as","styles","display","compact","gridAreas","flow","placeContent","placeItems","gap","padding","textAlign","boxSizing","width","margin","Icon","$","gridArea","color","placeSelf","textWrap","Content","Actions","ResultSizeContext","undefined","CubeResultActionProps","ResultAction","t0","ref","_c","props","resultSize","t1","type","t2","statusIconMap","success","error","info","warning","Result","T0","t3","t4","t5","t6","t7","t8","t9","otherProps","console","warn","isLarge","knownStatus","hasOwnProperty","StatusIcon","t10","iconContent","t11","iconNode","eventProps","mods","_Result","Object","assign","Action","displayName"],"sources":["../../../../src/components/content/Result/Result.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n IconAlertTriangleFilled,\n IconCircleCheckFilled,\n IconCircleXFilled,\n IconInfoCircleFilled,\n} from '@tabler/icons-react';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ComponentType,\n createContext,\n forwardRef,\n ReactNode,\n useContext,\n} from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button, CubeButtonProps } from '../../actions/Button/Button';\nimport { Title } from '../Title';\n\nexport interface CubeResultProps extends BaseProps, ContainerStyleProps {\n /** Free content between the text and the actions, e.g. an alert or details */\n children?: ReactNode;\n /** Custom icon element */\n icon?: ReactNode;\n /**\n * Result status from ready-made templates\n * @default 'info'\n */\n status?: CubeResultStatus;\n /**\n * The subTitle\n * @deprecated The subTitle prop is deprecated and will be removed in next major release. consider using subtitle instead\n */\n subTitle?: ReactNode;\n /**\n * Subtitle of the Result component\n */\n subtitle?: ReactNode;\n /** The title */\n title?: ReactNode;\n /**\n * Action buttons, as `Result.Action` elements so they follow the Result's size.\n * A centered row by default, a full-width column in the `stacked` layout\n */\n actions?: ReactNode;\n /**\n * Visual scale: the icon size and the title and subtitle presets. Does not change the layout.\n * Ignored when `isCompact` is set\n * @default 'medium'\n */\n size?: CubeResultSize;\n /**\n * Arrangement of the block. `stacked` fills the container and stacks the actions to the full width,\n * as in a confirmation or result dialog. Combine with `size=\"large\"` for the dialog card.\n * Ignored when `isCompact` is set\n * @default 'default'\n */\n layout?: CubeResultLayout;\n /** Whether the result component has a compact presentation. Overrides `size` and `layout` */\n isCompact?: boolean;\n}\n\nexport type CubeResultSize = 'medium' | 'large';\n\nexport type CubeResultLayout = 'default' | 'stacked';\n\nexport type CubeResultStatus =\n | 'success'\n | 'error'\n | 'info'\n | 'warning'\n | 404\n | 403\n | 500;\n\n// `null` for a status without an icon, so no empty slot is rendered\ntype StatusIconMap = Record<CubeResultStatus, ComponentType | null>;\n\nconst Container = tasty({\n qa: 'ResultContainer',\n as: 'section',\n styles: {\n // Any ancestor: the Result sits in the dialog's `Content`, not in `Dialog`\n '@in-dialog': '@parent(id=Dialog)',\n\n display: {\n '': 'flex',\n compact: 'grid',\n },\n gridAreas: '\"icon title\" \"content content\" \"actions actions\"',\n flow: 'column',\n placeContent: {\n '': 'center',\n compact: 'start',\n },\n placeItems: {\n '': 'center',\n compact: 'start',\n },\n // Outside compact the blocks below the title space themselves, so the\n // icon's own room is the whole distance to the title\n gap: {\n '': '0',\n compact: '2x 1x',\n },\n padding: {\n '': '6x 4x',\n // The host pads: a dialog `Content` or the page section the card fills\n compact: '0',\n 'layout=stacked': '1.5x',\n // The dialog's `Content` already pads it\n 'layout=stacked & @in-dialog': '0',\n },\n textAlign: {\n '': 'center',\n compact: 'left',\n },\n boxSizing: 'border-box',\n width: {\n '': 'max 80ch',\n // Fill the container so stacked actions share one width wherever the card sits\n 'layout=stacked': '0 100% 80ch',\n },\n margin: {\n '': '0 auto',\n compact: '0',\n },\n '--icon-size': {\n '': '6x',\n 'size=large': '10x',\n },\n\n Icon: {\n $: '>',\n display: 'grid',\n gridArea: 'icon',\n // At least the 3x between the other blocks; an icon above 12x gets a\n // quarter of its size, so a big one is not crowded\n padding: {\n '': 'max($icon-size / 4, 3x)',\n compact: '0',\n },\n // A custom icon keeps its own color\n color: {\n '': 'inherit',\n 'status=info': '#purple',\n 'status=success': '#success',\n 'status=error': '#danger',\n 'status=warning': '#warning',\n },\n },\n\n Title: {\n $: '>',\n gridArea: 'title',\n display: 'flex',\n flow: 'column',\n placeItems: 'inherit',\n gap: '1x',\n placeSelf: 'center',\n textWrap: 'balance',\n },\n\n Content: {\n $: '>',\n gridArea: 'content',\n display: 'block',\n margin: {\n '': 'top 3x',\n compact: '0',\n },\n placeSelf: {\n '': 'auto',\n 'layout=stacked': 'stretch',\n },\n },\n\n Actions: {\n $: '>',\n gridArea: 'actions',\n display: 'flex',\n margin: {\n '': 'top 3x',\n compact: '0',\n },\n flow: {\n '': 'row wrap',\n 'layout=stacked': 'column',\n },\n gap: '1x',\n placeContent: {\n '': 'center',\n compact: 'start',\n },\n placeItems: {\n '': 'center',\n 'layout=stacked': 'stretch',\n },\n placeSelf: {\n '': 'auto',\n 'layout=stacked': 'stretch',\n },\n },\n },\n});\n\nconst ResultSizeContext = createContext<CubeResultSize | undefined>(undefined);\n\nexport type CubeResultActionProps = CubeButtonProps;\n\n/**\n * A `Button` for the Result `actions` slot. Its size follows the Result's `size` unless set.\n * A link keeps Button's own `inline` size\n */\nconst ResultAction = forwardRef(function ResultAction(\n { size, ...props }: CubeResultActionProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const resultSize = useContext(ResultSizeContext);\n\n return (\n <Button\n ref={ref}\n {...props}\n size={size ?? (props.type === 'link' ? undefined : resultSize)}\n />\n );\n});\n\nconst statusIconMap: StatusIconMap = {\n success: () => <IconCircleCheckFilled />,\n error: () => <IconCircleXFilled />,\n info: () => <IconInfoCircleFilled />,\n warning: () => <IconAlertTriangleFilled />,\n // TODO: Needs to be implemented in the future\n 404: null,\n 403: null,\n 500: null,\n};\n\nfunction Result(props: CubeResultProps, ref) {\n let {\n children,\n isCompact,\n icon,\n status,\n subTitle,\n subtitle,\n title,\n actions,\n size = 'medium',\n layout = 'default',\n ...otherProps\n } = props;\n\n subtitle = subtitle ?? subTitle;\n\n if (icon && status) {\n console.warn(\n 'Don\\'t use \"icon\" and \"status\" together, it can lead to possible errors.',\n );\n }\n\n // The compact grid has its own scale and arrangement; `size` and `layout`\n // describe the centered column only, so they are dropped rather than mixed in\n if (isCompact) {\n size = 'medium';\n layout = 'default';\n }\n\n const isLarge = size === 'large';\n\n // An unknown status falls back to `info` for the color too, not only the icon\n const knownStatus: CubeResultStatus =\n status && statusIconMap.hasOwnProperty(status) ? status : 'info';\n const StatusIcon = statusIconMap[knownStatus];\n\n // A custom icon shares the status icon's wrapper, so it gets the same room\n const iconContent = icon || (StatusIcon && <StatusIcon />);\n const iconNode = iconContent && <div data-element=\"Icon\">{iconContent}</div>;\n\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n return (\n <Container\n {...mergeProps(filterBaseProps(otherProps, { eventProps: true }), {\n mods: {\n compact: isCompact,\n size,\n layout,\n status: icon ? undefined : knownStatus,\n },\n })}\n ref={ref}\n styles={styles}\n >\n {iconNode}\n {(title || subtitle) && (\n <div data-element=\"Title\">\n {wrapNodeIfPlain(title, () => (\n <Title level={2} preset={isCompact ? 'h5' : isLarge ? 'h2' : 'h4'}>\n {title}\n </Title>\n ))}\n {wrapNodeIfPlain(subtitle, () => (\n <Title\n // A name no provider defines: the dialog `title` slot must reach\n // the title only, or both headings get the dialog's label id\n slot=\"subtitle\"\n level={3}\n preset={isCompact ? 't3m' : isLarge ? 't2' : 't2m'}\n >\n {subtitle}\n </Title>\n ))}\n </div>\n )}\n {children && <div data-element=\"Content\">{children}</div>}\n {actions && (\n <div data-element=\"Actions\">\n <ResultSizeContext.Provider value={size}>\n {actions}\n </ResultSizeContext.Provider>\n </div>\n )}\n </Container>\n );\n}\n\nconst _Result = Object.assign(forwardRef(Result), { Action: ResultAction });\n\n_Result.displayName = 'Result';\n\nexport { _Result as Result, ResultAction };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Result.js","names":["FocusableRef","IconAlertTriangleFilled","IconCircleCheckFilled","IconCircleXFilled","IconInfoCircleFilled","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","ComponentType","createContext","forwardRef","ReactNode","useContext","mergeProps","wrapNodeIfPlain","extractStyles","Button","CubeButtonProps","Title","CubeResultProps","children","icon","status","CubeResultStatus","subTitle","subtitle","title","actions","size","CubeResultSize","layout","CubeResultLayout","isCompact","StatusIconMap","Record","Container","qa","as","styles","display","compact","gridAreas","flow","placeContent","placeItems","gap","padding","textAlign","boxSizing","width","margin","Icon","$","gridArea","color","placeSelf","textWrap","Content","Actions","ResultSizeContext","undefined","CubeResultActionProps","ResultAction","t0","ref","_c","props","resultSize","t1","type","t2","statusIconMap","success","error","info","warning","Result","T0","t3","t4","t5","t6","t7","t8","t9","otherProps","console","warn","isLarge","knownStatus","hasOwnProperty","StatusIcon","t10","iconContent","t11","iconNode","eventProps","mods","_Result","Object","assign","Action","displayName"],"sources":["../../../../src/components/content/Result/Result.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n IconAlertTriangleFilled,\n IconCircleCheckFilled,\n IconCircleXFilled,\n IconInfoCircleFilled,\n} from '@tabler/icons-react';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ComponentType,\n createContext,\n forwardRef,\n ReactNode,\n useContext,\n} from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button, CubeButtonProps } from '../../actions/Button/Button';\nimport { Title } from '../Title';\n\nexport interface CubeResultProps extends BaseProps, ContainerStyleProps {\n /** Free content between the text and the actions, e.g. an alert or details */\n children?: ReactNode;\n /** Custom icon element */\n icon?: ReactNode;\n /**\n * Result status from ready-made templates\n * @default 'info'\n */\n status?: CubeResultStatus;\n /**\n * The subTitle\n * @deprecated The subTitle prop is deprecated and will be removed in next major release. consider using subtitle instead\n */\n subTitle?: ReactNode;\n /**\n * Subtitle of the Result component\n */\n subtitle?: ReactNode;\n /** The title */\n title?: ReactNode;\n /**\n * Action buttons, as `Result.Action` elements so they follow the Result's size.\n * A centered row by default, a full-width column in the `stacked` layout\n */\n actions?: ReactNode;\n /**\n * Visual scale: the icon size and the title and subtitle presets. Does not change the layout.\n * Ignored when `isCompact` is set\n * @default 'medium'\n */\n size?: CubeResultSize;\n /**\n * Arrangement of the block. `stacked` fills the container and stacks the actions to the full width,\n * as in a confirmation or result dialog. Combine with `size=\"large\"` for the dialog card.\n * Ignored when `isCompact` is set\n * @default 'default'\n */\n layout?: CubeResultLayout;\n /** Whether the result component has a compact presentation. Overrides `size` and `layout` */\n isCompact?: boolean;\n}\n\nexport type CubeResultSize = 'medium' | 'large';\n\nexport type CubeResultLayout = 'default' | 'stacked';\n\nexport type CubeResultStatus =\n | 'success'\n | 'error'\n | 'info'\n | 'warning'\n | 404\n | 403\n | 500;\n\n// `null` for a status without an icon, so no empty slot is rendered\ntype StatusIconMap = Record<CubeResultStatus, ComponentType | null>;\n\nconst Container = tasty({\n qa: 'ResultContainer',\n as: 'section',\n styles: {\n // Any ancestor: the Result sits in the dialog's `Content`, not in `Dialog`\n '@in-dialog': '@parent(id=Dialog)',\n\n display: {\n '': 'flex',\n compact: 'grid',\n },\n gridAreas: '\"icon title\" \"content content\" \"actions actions\"',\n flow: 'column',\n placeContent: {\n '': 'center',\n compact: 'start',\n },\n placeItems: {\n '': 'center',\n compact: 'start',\n },\n // Outside compact the blocks below the title space themselves, so the\n // icon's own room is the whole distance to the title\n gap: {\n '': '0',\n compact: '2x 1x',\n },\n padding: {\n '': '6x 4x',\n // The host pads: a dialog `Content` or the page section the card fills\n compact: '0',\n 'layout=stacked': '1.5x',\n // The dialog's `Content` already pads it\n 'layout=stacked & @in-dialog': '0',\n },\n textAlign: {\n '': 'center',\n compact: 'left',\n },\n boxSizing: 'border-box',\n width: {\n '': 'max 80ch',\n // Fill the container so stacked actions share one width wherever the card sits\n 'layout=stacked': '0 100% 80ch',\n },\n margin: {\n '': '0 auto',\n compact: '0',\n },\n '--icon-size': {\n '': '6x',\n 'size=large': '10x',\n },\n\n Icon: {\n $: '>',\n display: 'grid',\n gridArea: 'icon',\n // At least the 3x between the other blocks; an icon above 12x gets a\n // quarter of its size, so a big one is not crowded\n padding: {\n '': 'max($icon-size / 4, 3x)',\n compact: '0',\n },\n // A custom icon keeps its own color\n color: {\n '': 'inherit',\n 'status=info': '#purple',\n 'status=success': '#success',\n 'status=error': '#danger',\n 'status=warning': '#warning',\n },\n },\n\n Title: {\n $: '>',\n gridArea: 'title',\n display: 'flex',\n flow: 'column',\n placeItems: 'inherit',\n gap: '1x',\n placeSelf: 'center',\n textWrap: 'balance',\n },\n\n Content: {\n $: '>',\n gridArea: 'content',\n display: 'block',\n margin: {\n '': 'top 3x',\n compact: '0',\n },\n placeSelf: {\n '': 'auto',\n 'layout=stacked': 'stretch',\n },\n },\n\n Actions: {\n $: '>',\n gridArea: 'actions',\n display: 'flex',\n margin: {\n '': 'top 3x',\n compact: '0',\n },\n flow: {\n '': 'row wrap',\n 'layout=stacked': 'column',\n },\n gap: '1x',\n placeContent: {\n '': 'center',\n compact: 'start',\n },\n placeItems: {\n '': 'center',\n 'layout=stacked': 'stretch',\n },\n placeSelf: {\n '': 'auto',\n 'layout=stacked': 'stretch',\n },\n },\n },\n});\n\nconst ResultSizeContext = createContext<CubeResultSize | undefined>(undefined);\n\nexport type CubeResultActionProps = CubeButtonProps;\n\n/**\n * A `Button` for the Result `actions` slot. Its size follows the Result's `size` unless set.\n * A link keeps Button's own `inline` size\n */\nconst ResultAction = forwardRef(function ResultAction(\n { size, ...props }: CubeResultActionProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const resultSize = useContext(ResultSizeContext);\n\n return (\n <Button\n ref={ref}\n {...props}\n size={size ?? (props.type === 'link' ? undefined : resultSize)}\n />\n );\n});\n\nconst statusIconMap: StatusIconMap = {\n // Decorative: the title says what happened.\n success: () => <IconCircleCheckFilled aria-hidden=\"true\" />,\n error: () => <IconCircleXFilled aria-hidden=\"true\" />,\n info: () => <IconInfoCircleFilled aria-hidden=\"true\" />,\n warning: () => <IconAlertTriangleFilled aria-hidden=\"true\" />,\n // TODO: Needs to be implemented in the future\n 404: null,\n 403: null,\n 500: null,\n};\n\nfunction Result(props: CubeResultProps, ref) {\n let {\n children,\n isCompact,\n icon,\n status,\n subTitle,\n subtitle,\n title,\n actions,\n size = 'medium',\n layout = 'default',\n ...otherProps\n } = props;\n\n subtitle = subtitle ?? subTitle;\n\n if (icon && status) {\n console.warn(\n 'Don\\'t use \"icon\" and \"status\" together, it can lead to possible errors.',\n );\n }\n\n // The compact grid has its own scale and arrangement; `size` and `layout`\n // describe the centered column only, so they are dropped rather than mixed in\n if (isCompact) {\n size = 'medium';\n layout = 'default';\n }\n\n const isLarge = size === 'large';\n\n // An unknown status falls back to `info` for the color too, not only the icon\n const knownStatus: CubeResultStatus =\n status && statusIconMap.hasOwnProperty(status) ? status : 'info';\n const StatusIcon = statusIconMap[knownStatus];\n\n // A custom icon shares the status icon's wrapper, so it gets the same room\n const iconContent = icon || (StatusIcon && <StatusIcon />);\n const iconNode = iconContent && <div data-element=\"Icon\">{iconContent}</div>;\n\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n return (\n <Container\n {...mergeProps(filterBaseProps(otherProps, { eventProps: true }), {\n mods: {\n compact: isCompact,\n size,\n layout,\n status: icon ? undefined : knownStatus,\n },\n })}\n ref={ref}\n styles={styles}\n >\n {iconNode}\n {(title || subtitle) && (\n <div data-element=\"Title\">\n {wrapNodeIfPlain(title, () => (\n <Title level={2} preset={isCompact ? 'h5' : isLarge ? 'h2' : 'h4'}>\n {title}\n </Title>\n ))}\n {wrapNodeIfPlain(subtitle, () => (\n <Title\n // A name no provider defines: the dialog `title` slot must reach\n // the title only, or both headings get the dialog's label id\n slot=\"subtitle\"\n level={3}\n preset={isCompact ? 't3m' : isLarge ? 't2' : 't2m'}\n >\n {subtitle}\n </Title>\n ))}\n </div>\n )}\n {children && <div data-element=\"Content\">{children}</div>}\n {actions && (\n <div data-element=\"Actions\">\n <ResultSizeContext.Provider value={size}>\n {actions}\n </ResultSizeContext.Provider>\n </div>\n )}\n </Container>\n );\n}\n\nconst _Result = Object.assign(forwardRef(Result), { Action: ResultAction });\n\n_Result.displayName = 'Result';\n\nexport { _Result as Result, ResultAction };\n"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
|
|
2
|
+
import { useI18n } from "../../../i18n/useI18n.js";
|
|
2
3
|
import { Space } from "../../layout/Space.js";
|
|
3
4
|
import { Grid } from "../../layout/Grid.js";
|
|
4
5
|
import { Flow } from "../../layout/Flow.js";
|
|
5
|
-
import { Placeholder } from "../Placeholder/Placeholder.js";
|
|
6
|
-
import { c } from "react/compiler-runtime";
|
|
6
|
+
import { Placeholder, PlaceholderGroupContext } from "../Placeholder/Placeholder.js";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
|
|
9
9
|
//#region src/components/content/Skeleton/Skeleton.tsx
|
|
@@ -146,12 +146,12 @@ const LAYOUT_MAP = {
|
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
148
|
function Skeleton(t0) {
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
149
|
+
let { layout, isStatic, columns, rows, lines, tabs, cards, children, ...props } = t0;
|
|
150
|
+
const { t } = useI18n();
|
|
151
|
+
layout = layout || "page";
|
|
152
|
+
return LAYOUT_MAP[layout] ? /* @__PURE__ */ jsx(PlaceholderGroupContext.Provider, {
|
|
153
|
+
value: true,
|
|
154
|
+
children: LAYOUT_MAP[layout]({
|
|
155
155
|
isStatic,
|
|
156
156
|
columns,
|
|
157
157
|
rows,
|
|
@@ -161,18 +161,17 @@ function Skeleton(t0) {
|
|
|
161
161
|
children,
|
|
162
162
|
rootProps: {
|
|
163
163
|
qa: "Skeleton",
|
|
164
|
+
role: "region",
|
|
165
|
+
"aria-label": t("placeholder.contentIsLoading", "Content is loading"),
|
|
164
166
|
...props
|
|
165
167
|
}
|
|
166
|
-
})
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
$[1] = t1;
|
|
174
|
-
} else t1 = $[1];
|
|
175
|
-
return t1;
|
|
168
|
+
})
|
|
169
|
+
}) : /* @__PURE__ */ jsx(Placeholder, {
|
|
170
|
+
qa: "Skeleton",
|
|
171
|
+
isStatic,
|
|
172
|
+
...props,
|
|
173
|
+
children
|
|
174
|
+
});
|
|
176
175
|
}
|
|
177
176
|
|
|
178
177
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","names":["BaseProps","ContainerStyleProps","ReactNode","Flow","CubeGridProps","Grid","Space","CubePlaceholderProps","Placeholder","LAYOUT_MAP","page","lines","children","isStatic","rootProps","CubeSkeletonLayoutProps","Array","fill","map","item","i","content","topbar","menu","stats","cards","tabs","table","rows","columns","j","chart","heightMap","const","CubeSkeletonProps","CubeSkeletonRootProps","Omit","layout","Skeleton","t0","$","_c","t1","props","qa"],"sources":["../../../../src/components/content/Skeleton/Skeleton.tsx"],"sourcesContent":["import { BaseProps, ContainerStyleProps } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { Flow } from '../../layout/Flow';\nimport { CubeGridProps, Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { CubePlaceholderProps, Placeholder } from '../Placeholder/Placeholder';\n\nconst LAYOUT_MAP = {\n page({\n lines,\n children,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"4x\" {...rootProps}>\n <Space placeContent=\"space-between\">\n <Placeholder isStatic={isStatic} width=\"100px 25% 300px\" />\n <Placeholder isStatic={isStatic} width=\"50px 10% 150px\" />\n </Space>\n <Flow gap=\"2x\">\n {children ||\n Array(lines || 5)\n .fill(0)\n .map((item, i) => <Placeholder key={i} isStatic={isStatic} />)}\n </Flow>\n </Flow>\n );\n },\n content({\n children,\n lines,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"2x\" {...rootProps}>\n {children ||\n Array(lines || 5)\n .fill(0)\n .map((item, i) => <Placeholder key={i} isStatic={isStatic} />)}\n </Flow>\n );\n },\n topbar({ isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n return (\n <Space\n gap=\"4x\"\n placeContent=\"space-between\"\n height=\"6x\"\n padding=\"1x\"\n border=\"bottom\"\n {...rootProps}\n >\n <Space>\n <Placeholder circle isStatic={isStatic} size=\"4x\" />\n <Placeholder isStatic={isStatic} width=\"20x\" />\n </Space>\n\n <Space>\n <Placeholder isStatic={isStatic} width=\"10x\" />\n <Placeholder circle isStatic={isStatic} size=\"4x\" />\n </Space>\n </Space>\n );\n },\n menu({ lines, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"3.25x\" padding=\"3x 1x\" {...rootProps}>\n {Array(lines || 5)\n .fill(0)\n .map((item, i) => (\n <Placeholder key={i} isStatic={isStatic} />\n ))}\n </Flow>\n );\n },\n stats({ cards, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n return (\n <Space gap=\"4x\" {...rootProps}>\n {Array(cards || 3)\n .fill(0)\n .map((item, i) => (\n <Placeholder\n key={i}\n isStatic={isStatic}\n radius=\"1r\"\n width=\"20x\"\n height=\"12x\"\n flexGrow={1}\n />\n ))}\n </Space>\n );\n },\n tabs({\n tabs,\n children,\n lines,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"4x\" {...rootProps}>\n <Space>\n {Array(tabs || 3)\n .fill(0)\n .map((item, i) => (\n <Placeholder key={i} isStatic={isStatic} width=\"15x\" />\n ))}\n </Space>\n <Flow gap=\"2x\">\n {children ||\n Array(lines || 5)\n .fill(0)\n .map((item, i) => <Placeholder key={i} isStatic={isStatic} />)}\n </Flow>\n </Flow>\n );\n },\n table({\n rows,\n columns,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n columns = columns || 5;\n rows = rows || 5;\n\n return (\n <Grid\n columns={`repeat(${columns}, 1fr)`}\n gap=\"3x\"\n padding=\"1x 0\"\n {...rootProps}\n >\n {Array(rows)\n .fill(0)\n .map((item, i) => {\n return Array(columns)\n .fill(0)\n .map((item, j) => {\n return (\n <Placeholder\n key={`${i}.${j}`}\n isStatic={isStatic}\n size={!i ? '3x' : '2x'}\n />\n );\n });\n })}\n </Grid>\n );\n },\n chart({ columns, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n columns = columns || 12;\n\n const heightMap = [1, 4, 2, 5, 8, 9, 5, 3, 4, 2, 6, 7, 2];\n\n return (\n <Grid\n columns={`repeat(${columns}, 1fr)`}\n gap=\"3x\"\n padding=\"1x 0\"\n placeItems=\"end stretch\"\n height=\"40x\"\n {...rootProps}\n >\n {Array(columns)\n .fill(0)\n .map((item, i) => {\n return (\n <Placeholder\n key={i}\n isStatic={isStatic}\n height={`${heightMap[i % 12] * 10}%`}\n width=\"max 6x\"\n />\n );\n })}\n </Grid>\n );\n },\n} as const;\n\nexport interface CubeSkeletonProps\n extends CubeSkeletonRootProps,\n Omit<CubeSkeletonLayoutProps, 'rootProps'> {\n /** The type of the layout */\n layout?: keyof typeof LAYOUT_MAP;\n}\n\nexport interface CubeSkeletonRootProps\n extends Omit<CubeGridProps, 'columns' | 'rows'>,\n CubePlaceholderProps,\n BaseProps,\n ContainerStyleProps {}\n\nexport interface CubeSkeletonLayoutProps {\n /** The number of columns for the table layout */\n columns?: number;\n /** The number of rows for the table layout */\n rows?: number;\n /** The number of placeholder lines */\n lines?: number;\n /** The number of tabs */\n tabs?: number;\n /** The number of cards */\n cards?: number;\n /** The static mode */\n isStatic?: boolean;\n rootProps?: CubeSkeletonRootProps;\n children?: ReactNode;\n}\n\nexport function Skeleton({\n layout,\n isStatic,\n columns,\n rows,\n lines,\n tabs,\n cards,\n children,\n ...props\n}: CubeSkeletonProps) {\n layout = layout || 'page';\n\n return LAYOUT_MAP[layout] ? (\n LAYOUT_MAP[layout]({\n isStatic,\n columns,\n rows,\n lines,\n tabs,\n cards,\n children,\n rootProps: { qa: 'Skeleton', ...props },\n })\n ) : (\n <Placeholder qa=\"Skeleton\" isStatic={isStatic} {...props}>\n {children}\n </Placeholder>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Skeleton.js","names":["BaseProps","ContainerStyleProps","ReactNode","useI18n","Flow","CubeGridProps","Grid","Space","CubePlaceholderProps","Placeholder","PlaceholderGroupContext","LAYOUT_MAP","page","lines","children","isStatic","rootProps","CubeSkeletonLayoutProps","Array","fill","map","item","i","content","topbar","menu","stats","cards","tabs","table","rows","columns","j","chart","heightMap","const","CubeSkeletonProps","CubeSkeletonRootProps","Omit","layout","Skeleton","t0","props","t","qa","role"],"sources":["../../../../src/components/content/Skeleton/Skeleton.tsx"],"sourcesContent":["import { BaseProps, ContainerStyleProps } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { Flow } from '../../layout/Flow';\nimport { CubeGridProps, Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport {\n CubePlaceholderProps,\n Placeholder,\n PlaceholderGroupContext,\n} from '../Placeholder/Placeholder';\n\nconst LAYOUT_MAP = {\n page({\n lines,\n children,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"4x\" {...rootProps}>\n <Space placeContent=\"space-between\">\n <Placeholder isStatic={isStatic} width=\"100px 25% 300px\" />\n <Placeholder isStatic={isStatic} width=\"50px 10% 150px\" />\n </Space>\n <Flow gap=\"2x\">\n {children ||\n Array(lines || 5)\n .fill(0)\n .map((item, i) => <Placeholder key={i} isStatic={isStatic} />)}\n </Flow>\n </Flow>\n );\n },\n content({\n children,\n lines,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"2x\" {...rootProps}>\n {children ||\n Array(lines || 5)\n .fill(0)\n .map((item, i) => <Placeholder key={i} isStatic={isStatic} />)}\n </Flow>\n );\n },\n topbar({ isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n return (\n <Space\n gap=\"4x\"\n placeContent=\"space-between\"\n height=\"6x\"\n padding=\"1x\"\n border=\"bottom\"\n {...rootProps}\n >\n <Space>\n <Placeholder circle isStatic={isStatic} size=\"4x\" />\n <Placeholder isStatic={isStatic} width=\"20x\" />\n </Space>\n\n <Space>\n <Placeholder isStatic={isStatic} width=\"10x\" />\n <Placeholder circle isStatic={isStatic} size=\"4x\" />\n </Space>\n </Space>\n );\n },\n menu({ lines, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"3.25x\" padding=\"3x 1x\" {...rootProps}>\n {Array(lines || 5)\n .fill(0)\n .map((item, i) => (\n <Placeholder key={i} isStatic={isStatic} />\n ))}\n </Flow>\n );\n },\n stats({ cards, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n return (\n <Space gap=\"4x\" {...rootProps}>\n {Array(cards || 3)\n .fill(0)\n .map((item, i) => (\n <Placeholder\n key={i}\n isStatic={isStatic}\n radius=\"1r\"\n width=\"20x\"\n height=\"12x\"\n flexGrow={1}\n />\n ))}\n </Space>\n );\n },\n tabs({\n tabs,\n children,\n lines,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n return (\n <Flow gap=\"4x\" {...rootProps}>\n <Space>\n {Array(tabs || 3)\n .fill(0)\n .map((item, i) => (\n <Placeholder key={i} isStatic={isStatic} width=\"15x\" />\n ))}\n </Space>\n <Flow gap=\"2x\">\n {children ||\n Array(lines || 5)\n .fill(0)\n .map((item, i) => <Placeholder key={i} isStatic={isStatic} />)}\n </Flow>\n </Flow>\n );\n },\n table({\n rows,\n columns,\n isStatic = false,\n rootProps,\n }: CubeSkeletonLayoutProps) {\n columns = columns || 5;\n rows = rows || 5;\n\n return (\n <Grid\n columns={`repeat(${columns}, 1fr)`}\n gap=\"3x\"\n padding=\"1x 0\"\n {...rootProps}\n >\n {Array(rows)\n .fill(0)\n .map((item, i) => {\n return Array(columns)\n .fill(0)\n .map((item, j) => {\n return (\n <Placeholder\n key={`${i}.${j}`}\n isStatic={isStatic}\n size={!i ? '3x' : '2x'}\n />\n );\n });\n })}\n </Grid>\n );\n },\n chart({ columns, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {\n columns = columns || 12;\n\n const heightMap = [1, 4, 2, 5, 8, 9, 5, 3, 4, 2, 6, 7, 2];\n\n return (\n <Grid\n columns={`repeat(${columns}, 1fr)`}\n gap=\"3x\"\n padding=\"1x 0\"\n placeItems=\"end stretch\"\n height=\"40x\"\n {...rootProps}\n >\n {Array(columns)\n .fill(0)\n .map((item, i) => {\n return (\n <Placeholder\n key={i}\n isStatic={isStatic}\n height={`${heightMap[i % 12] * 10}%`}\n width=\"max 6x\"\n />\n );\n })}\n </Grid>\n );\n },\n} as const;\n\nexport interface CubeSkeletonProps\n extends CubeSkeletonRootProps,\n Omit<CubeSkeletonLayoutProps, 'rootProps'> {\n /** The type of the layout */\n layout?: keyof typeof LAYOUT_MAP;\n}\n\nexport interface CubeSkeletonRootProps\n extends Omit<CubeGridProps, 'columns' | 'rows'>,\n CubePlaceholderProps,\n BaseProps,\n ContainerStyleProps {}\n\nexport interface CubeSkeletonLayoutProps {\n /** The number of columns for the table layout */\n columns?: number;\n /** The number of rows for the table layout */\n rows?: number;\n /** The number of placeholder lines */\n lines?: number;\n /** The number of tabs */\n tabs?: number;\n /** The number of cards */\n cards?: number;\n /** The static mode */\n isStatic?: boolean;\n rootProps?: CubeSkeletonRootProps;\n children?: ReactNode;\n}\n\nexport function Skeleton({\n layout,\n isStatic,\n columns,\n rows,\n lines,\n tabs,\n cards,\n children,\n ...props\n}: CubeSkeletonProps) {\n const { t } = useI18n();\n\n layout = layout || 'page';\n\n // One \"Content is loading\" region for the whole layout, rather than one per\n // bar: a page skeleton would otherwise list a dozen identical landmarks.\n return LAYOUT_MAP[layout] ? (\n <PlaceholderGroupContext.Provider value>\n {LAYOUT_MAP[layout]({\n isStatic,\n columns,\n rows,\n lines,\n tabs,\n cards,\n children,\n rootProps: {\n qa: 'Skeleton',\n role: 'region',\n 'aria-label': t('placeholder.contentIsLoading', 'Content is loading'),\n ...props,\n },\n })}\n </PlaceholderGroupContext.Provider>\n ) : (\n <Placeholder qa=\"Skeleton\" isStatic={isStatic} {...props}>\n {children}\n </Placeholder>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
|
|
2
2
|
import { mergeStyleLayers } from "../../../utils/styles.js";
|
|
3
|
-
import { _Item } from "../Item/Item.js";
|
|
4
3
|
import { useI18n } from "../../../i18n/useI18n.js";
|
|
4
|
+
import { _Item } from "../Item/Item.js";
|
|
5
5
|
import { CloseIcon } from "../../../icons/CloseIcon.js";
|
|
6
6
|
import { c } from "react/compiler-runtime";
|
|
7
7
|
import { tasty } from "@tenphi/tasty";
|