@cube-dev/ui-kit 0.0.0-canary-9917823 → 0.0.0-canary-2a1d026
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/CHANGELOG.md +12 -0
- package/cjs/_internal/hooks/index.js +12 -4
- package/cjs/_internal/hooks/use-chained-callback.js +2 -1
- package/cjs/_internal/hooks/use-deprecation-warning.js +6 -2
- package/cjs/_internal/hooks/use-effect-once.js +18 -0
- package/cjs/_internal/hooks/use-event.js +1 -1
- package/cjs/_internal/hooks/use-is-first-render.js +22 -0
- package/cjs/_internal/hooks/use-sync-ref.js +1 -1
- package/cjs/_internal/hooks/use-timer/index.js +6 -2
- package/cjs/_internal/hooks/use-timer/timer.js +1 -1
- package/cjs/_internal/hooks/use-timer/use-timer.js +1 -1
- package/cjs/_internal/hooks/use-update-effect.js +24 -0
- package/cjs/_internal/hooks/use-warn.js +50 -0
- package/cjs/_internal/index.js +6 -2
- package/cjs/components/Base.js +2 -2
- package/cjs/components/Block.js +2 -2
- package/cjs/components/GlobalStyles.js +1 -1
- package/cjs/components/GridProvider.js +7 -3
- package/cjs/components/HiddenInput.js +1 -1
- package/cjs/components/OpenTrasition.js +2 -2
- package/cjs/components/Root.js +2 -2
- package/cjs/components/actions/Action.js +2 -2
- package/cjs/components/actions/Button/Button.js +2 -2
- package/cjs/components/actions/Button/index.js +6 -3
- package/cjs/components/actions/ButtonGroup/ButtonGroup.js +2 -2
- package/cjs/components/actions/index.js +6 -2
- package/cjs/components/actions/use-action.js +1 -1
- package/cjs/components/content/ActiveZone/ActiveZone.js +2 -2
- package/cjs/components/content/Alert/Alert.js +2 -2
- package/cjs/components/content/Alert/index.js +6 -2
- package/cjs/components/content/Alert/types.js +1 -1
- package/cjs/components/content/Alert/use-alert.js +1 -1
- package/cjs/components/content/Avatar/Avatar.js +2 -2
- package/cjs/components/content/Badge/Badge.js +2 -2
- package/cjs/components/content/Card/Card.js +2 -2
- package/cjs/components/content/Content.js +2 -2
- package/cjs/components/content/CopySnippet/CopySnippet.js +4 -4
- package/cjs/components/content/CopySnippet/index.js +6 -2
- package/cjs/components/content/Divider.js +2 -2
- package/cjs/components/content/Footer.js +2 -2
- package/cjs/components/content/Header.js +2 -2
- package/cjs/components/content/Paragraph.js +2 -2
- package/cjs/components/content/Placeholder/Placeholder.js +2 -2
- package/cjs/components/content/PrismCode/PrismCode.js +2 -2
- package/cjs/components/content/Result/Result.js +3 -3
- package/cjs/components/content/Skeleton/Skeleton.js +12 -12
- package/cjs/components/content/Tag/Tag.js +3 -3
- package/cjs/components/content/Text.js +8 -8
- package/cjs/components/content/Title.js +4 -4
- package/cjs/components/forms/Checkbox/Checkbox.js +31 -14
- package/cjs/components/forms/Checkbox/CheckboxGroup.js +30 -25
- package/cjs/components/forms/Checkbox/context.js +1 -1
- package/cjs/components/forms/{FieldWrapper.js → FieldWrapper/FieldWrapper.js} +22 -20
- package/cjs/components/forms/FieldWrapper/extract-field-wrapper-props.js +50 -0
- package/cjs/components/forms/FieldWrapper/index.js +28 -0
- package/cjs/components/forms/FieldWrapper/types.js +11 -0
- package/cjs/components/forms/FileInput/FileInput.js +5 -5
- package/cjs/components/forms/Form/{Field.js → Field/LegacyField.js} +48 -27
- package/cjs/components/forms/Form/Field/index.js +29 -0
- package/cjs/components/forms/Form/Field/types.js +11 -0
- package/cjs/components/forms/Form/Field/use-field-props.js +61 -0
- package/cjs/components/forms/Form/Field/use-field.js +133 -0
- package/cjs/components/forms/Form/Form.js +3 -3
- package/cjs/components/forms/Form/Submit/Submit.js +25 -0
- package/cjs/components/forms/Form/Submit/index.js +26 -0
- package/cjs/components/forms/Form/SubmitError.js +2 -2
- package/cjs/components/forms/Form/index.js +20 -3
- package/cjs/components/forms/Form/types.js +1 -1
- package/cjs/components/forms/Form/useForm.js +2 -1
- package/cjs/components/forms/Form/validation.js +1 -1
- package/cjs/components/forms/Input/Input.js +3 -7
- package/cjs/components/forms/Input/index.js +6 -2
- package/cjs/components/forms/Label.js +4 -4
- package/cjs/components/forms/NumberInput/NumberInput.js +17 -11
- package/cjs/components/forms/NumberInput/StepButton.js +3 -3
- package/cjs/components/forms/PasswordInput/PasswordInput.js +23 -6
- package/cjs/components/forms/RadioGroup/Radio.js +17 -8
- package/cjs/components/forms/RadioGroup/RadioGroup.js +13 -5
- package/cjs/components/forms/RadioGroup/context.js +1 -1
- package/cjs/components/forms/SearchInput/SearchInput.js +4 -4
- package/cjs/components/forms/Slider/Gradation.js +2 -2
- package/cjs/components/forms/Slider/Header.js +1 -1
- package/cjs/components/forms/Slider/RangeSlider.js +3 -3
- package/cjs/components/forms/Slider/Slider.js +5 -4
- package/cjs/components/forms/Slider/SliderBase.js +5 -5
- package/cjs/components/forms/Slider/SliderInput.js +2 -2
- package/cjs/components/forms/Slider/SliderThumb.js +2 -2
- package/cjs/components/forms/Slider/SliderTrack.js +2 -2
- package/cjs/components/forms/Slider/elements.js +1 -1
- package/cjs/components/forms/Slider/index.js +6 -2
- package/cjs/components/forms/Slider/types.js +1 -1
- package/cjs/components/forms/Switch/Switch.js +19 -15
- package/cjs/components/forms/TextArea/TextArea.js +30 -27
- package/cjs/components/forms/TextInput/TextInput.js +16 -9
- package/cjs/components/forms/TextInput/TextInputBase.js +12 -40
- package/cjs/components/forms/TextInput/index.js +27 -0
- package/cjs/components/forms/index.js +6 -2
- package/cjs/components/layout/Flex.js +2 -2
- package/cjs/components/layout/Flow.js +2 -2
- package/cjs/components/layout/Grid.js +2 -2
- package/cjs/components/layout/Prefix.js +2 -2
- package/cjs/components/layout/Space.js +2 -2
- package/cjs/components/layout/Suffix.js +2 -2
- package/cjs/components/navigation/LegacyTabs/LegacyTabs.js +4 -4
- package/cjs/components/navigation/Link/Link.js +2 -2
- package/cjs/components/organisms/FileTabs/FileTabs.js +4 -4
- package/cjs/components/organisms/Modal/Modal.js +3 -3
- package/cjs/components/organisms/StatsCard/StatsCard.js +2 -2
- package/cjs/components/other/Base64Upload/Base64Upload.js +2 -2
- package/cjs/components/other/CloudLogo/CloudLogo.js +2 -2
- package/cjs/components/overlays/AlertDialog/AlertDialog.js +2 -2
- package/cjs/components/overlays/AlertDialog/AlertDialogApiProvider.js +2 -2
- package/cjs/components/overlays/AlertDialog/AlertDialogZone.js +2 -2
- package/cjs/components/overlays/AlertDialog/index.js +6 -2
- package/cjs/components/overlays/AlertDialog/types.js +1 -1
- package/cjs/components/overlays/Dialog/Dialog.js +17 -5
- package/cjs/components/overlays/Dialog/DialogContainer.js +2 -2
- package/cjs/components/overlays/Dialog/DialogForm.js +4 -6
- package/cjs/components/overlays/Dialog/DialogTrigger.js +11 -11
- package/cjs/components/overlays/Dialog/context.js +1 -1
- package/cjs/components/overlays/Dialog/index.js +6 -2
- package/cjs/components/overlays/Modal/Modal.js +23 -9
- package/cjs/components/overlays/Modal/OpenTransition.js +12 -3
- package/cjs/components/overlays/Modal/Overlay.js +6 -4
- package/cjs/components/overlays/Modal/Popover.js +20 -5
- package/cjs/components/overlays/Modal/Tray.js +14 -4
- package/cjs/components/overlays/Modal/Underlay.js +2 -2
- package/cjs/components/overlays/Modal/index.js +16 -1
- package/cjs/components/overlays/Modal/types.js +11 -0
- package/cjs/components/overlays/NewNotifications/Bar/FloatingNotification.js +2 -2
- package/cjs/components/overlays/NewNotifications/Bar/NotificationsBar.js +2 -2
- package/cjs/components/overlays/NewNotifications/Bar/TransitionComponent.js +2 -2
- package/cjs/components/overlays/NewNotifications/Bar/index.js +6 -2
- package/cjs/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js +3 -3
- package/cjs/components/overlays/NewNotifications/Dialog/index.js +6 -2
- package/cjs/components/overlays/NewNotifications/Notification.js +4 -4
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationAction.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.js +3 -3
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationDescription.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationFooter.js +7 -3
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationHeader.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationIcon.js +5 -5
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationProvider.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationView/NotificationView.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationView/index.js +6 -2
- package/cjs/components/overlays/NewNotifications/NotificationView/types.js +1 -1
- package/cjs/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationsContext/index.js +1 -1
- package/cjs/components/overlays/NewNotifications/NotificationsContext/use-notifications.js +1 -1
- package/cjs/components/overlays/NewNotifications/NotificationsList/NotificationsList.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.js +2 -2
- package/cjs/components/overlays/NewNotifications/NotificationsList/index.js +6 -2
- package/cjs/components/overlays/NewNotifications/NotificationsList/types.js +1 -1
- package/cjs/components/overlays/NewNotifications/hooks/index.js +6 -2
- package/cjs/components/overlays/NewNotifications/hooks/types.js +1 -1
- package/cjs/components/overlays/NewNotifications/hooks/use-notification-list-item.js +1 -1
- package/cjs/components/overlays/NewNotifications/hooks/use-notifications-api.js +1 -1
- package/cjs/components/overlays/NewNotifications/hooks/use-notifications-list.js +1 -1
- package/cjs/components/overlays/NewNotifications/hooks/use-notifications-observer.js +1 -1
- package/cjs/components/overlays/NewNotifications/index.js +6 -2
- package/cjs/components/overlays/NewNotifications/types.js +1 -1
- package/cjs/components/overlays/Notification/Notification.js +2 -2
- package/cjs/components/overlays/OverlayWrapper.js +3 -3
- package/cjs/components/overlays/Toasts/Toast.js +4 -4
- package/cjs/components/overlays/Toasts/index.js +6 -2
- package/cjs/components/overlays/Toasts/types.js +1 -1
- package/cjs/components/overlays/Toasts/use-toasts-api.js +1 -1
- package/cjs/components/overlays/Tooltip/Tooltip.js +2 -2
- package/cjs/components/overlays/Tooltip/TooltipProvider.js +2 -2
- package/cjs/components/overlays/Tooltip/TooltipTrigger.js +4 -4
- package/cjs/components/overlays/Tooltip/context.js +1 -1
- package/cjs/components/pickers/ComboBox/ComboBox.js +31 -19
- package/cjs/components/pickers/Menu/Menu.js +3 -3
- package/cjs/components/pickers/Menu/MenuButton.js +5 -5
- package/cjs/components/pickers/Menu/MenuItem.js +3 -3
- package/cjs/components/pickers/Menu/MenuSection.js +3 -3
- package/cjs/components/pickers/Menu/MenuTrigger.js +10 -6
- package/cjs/components/pickers/Menu/context.js +6 -2
- package/cjs/components/pickers/Menu/styled.js +1 -1
- package/cjs/components/pickers/Select/Select.js +26 -11
- package/cjs/components/portal/Portal.js +2 -2
- package/cjs/components/portal/PortalProvider.js +1 -1
- package/cjs/components/portal/index.js +6 -2
- package/cjs/components/portal/storybook/templates/CustomRoot.js +2 -2
- package/cjs/components/portal/storybook/templates/PortalOrder.js +2 -2
- package/cjs/components/portal/storybook/templates/basic.js +2 -2
- package/cjs/components/portal/storybook/templates/index.js +6 -2
- package/cjs/components/portal/types.js +1 -1
- package/cjs/components/portal/usePortal.js +1 -1
- package/cjs/components/status/LoadingAnimation/LoadingAnimation.js +3 -3
- package/cjs/components/status/LoadingAnimation/index.js +1 -1
- package/cjs/components/status/Spin/Cube.js +1 -1
- package/cjs/components/status/Spin/InternalSpinner.js +2 -2
- package/cjs/components/status/Spin/Spin.js +3 -3
- package/cjs/components/status/Spin/SpinsContainer.js +1 -1
- package/cjs/components/status/Spin/index.js +6 -2
- package/cjs/components/status/Spin/types.js +1 -1
- package/cjs/components/status/index.js +6 -2
- package/cjs/data/themes.js +1 -1
- package/cjs/icons/Attention.js +2 -2
- package/cjs/icons/Cross.js +2 -2
- package/cjs/icons/Danger.js +2 -2
- package/cjs/icons/Success.js +2 -2
- package/cjs/icons/index.js +6 -2
- package/cjs/index.js +9 -7
- package/cjs/provider.js +3 -3
- package/cjs/providers/StyleProvider.js +2 -2
- package/cjs/services/notification.js +2 -2
- package/cjs/shared/form.js +1 -1
- package/cjs/shared/index.js +6 -2
- package/cjs/styled/index.js +6 -2
- package/cjs/styled/styled.js +9 -5
- package/cjs/tasty/index.js +6 -2
- package/cjs/tasty/providers/BreakpointsProvider.js +2 -2
- package/cjs/tasty/styles/align.js +1 -1
- package/cjs/tasty/styles/border.js +1 -1
- package/cjs/tasty/styles/boxShadow.combinator.js +1 -1
- package/cjs/tasty/styles/color.js +1 -1
- package/cjs/tasty/styles/createStyle.js +1 -1
- package/cjs/tasty/styles/dimension.js +1 -1
- package/cjs/tasty/styles/display.js +1 -1
- package/cjs/tasty/styles/fill.js +1 -1
- package/cjs/tasty/styles/flow.js +1 -1
- package/cjs/tasty/styles/font.js +1 -1
- package/cjs/tasty/styles/fontStyle.js +1 -1
- package/cjs/tasty/styles/gap.js +1 -1
- package/cjs/tasty/styles/groupRadius.js +1 -1
- package/cjs/tasty/styles/height.js +1 -1
- package/cjs/tasty/styles/index.js +6 -2
- package/cjs/tasty/styles/justify.js +1 -1
- package/cjs/tasty/styles/list.js +1 -1
- package/cjs/tasty/styles/margin.js +1 -1
- package/cjs/tasty/styles/marginBlock.js +1 -1
- package/cjs/tasty/styles/marginInline.js +1 -1
- package/cjs/tasty/styles/outline.js +1 -1
- package/cjs/tasty/styles/padding.js +1 -1
- package/cjs/tasty/styles/paddingBlock.js +1 -1
- package/cjs/tasty/styles/paddingInline.js +1 -1
- package/cjs/tasty/styles/predefined.js +1 -1
- package/cjs/tasty/styles/preset.js +1 -1
- package/cjs/tasty/styles/radius.js +1 -1
- package/cjs/tasty/styles/reset.js +1 -1
- package/cjs/tasty/styles/shadow.js +1 -1
- package/cjs/tasty/styles/styledScrollbar.js +1 -1
- package/cjs/tasty/styles/transition.js +1 -1
- package/cjs/tasty/styles/types.js +1 -1
- package/cjs/tasty/styles/width.js +1 -1
- package/cjs/tasty/tasty.js +9 -5
- package/cjs/tasty/types.js +1 -1
- package/cjs/tasty/utils/colors.js +1 -1
- package/cjs/tasty/utils/dotize.js +1 -1
- package/cjs/tasty/utils/filterBaseProps.js +1 -1
- package/cjs/tasty/utils/get-display-name.js +1 -1
- package/cjs/tasty/utils/index.js +1 -1
- package/cjs/tasty/utils/mergeStyles.js +1 -1
- package/cjs/tasty/utils/modAttrs.js +1 -1
- package/cjs/tasty/utils/renderStyles.js +1 -1
- package/cjs/tasty/utils/responsive.js +1 -1
- package/cjs/tasty/utils/string.js +1 -1
- package/cjs/tasty/utils/styles.js +1 -1
- package/cjs/tasty/utils/warnings.js +1 -1
- package/cjs/test/index.js +14 -2
- package/cjs/test/render.js +7 -3
- package/cjs/test/setup.js +48 -4
- package/cjs/test/utils/index.js +6 -2
- package/cjs/test/utils/wait.js +1 -1
- package/cjs/tokens.js +1 -1
- package/cjs/type-checks.js +1 -1
- package/cjs/utils/ResizeSensor.js +1 -1
- package/cjs/utils/modules.js +1 -1
- package/cjs/utils/promise.js +1 -1
- package/cjs/utils/random.js +1 -1
- package/cjs/utils/range.js +1 -1
- package/cjs/utils/react/Slots.js +3 -3
- package/cjs/utils/react/chain.js +1 -1
- package/cjs/utils/react/index.js +1 -1
- package/cjs/utils/react/interactions.js +1 -1
- package/cjs/utils/react/isTextOnly.js +1 -1
- package/cjs/utils/react/mapProps.js +1 -1
- package/cjs/utils/react/mergeProps.js +1 -1
- package/cjs/utils/react/nullableValue.js +1 -1
- package/cjs/utils/react/useCombinedRefs.js +1 -1
- package/cjs/utils/react/useId.js +1 -1
- package/cjs/utils/react/useLayoutEffect.js +6 -2
- package/cjs/utils/react/useViewportSize.js +1 -1
- package/cjs/utils/react/wrapNodeIfPlain.js +1 -1
- package/cjs/utils/transitions.js +1 -1
- package/cjs/utils/tree.js +1 -1
- package/cjs/utils/warnings.js +2 -2
- package/es/_internal/hooks/index.js +7 -3
- package/es/_internal/hooks/use-chained-callback.js +2 -1
- package/es/_internal/hooks/use-deprecation-warning.js +1 -1
- package/es/_internal/hooks/use-effect-once.js +14 -0
- package/es/_internal/hooks/use-event.js +1 -1
- package/es/_internal/hooks/use-is-first-render.js +18 -0
- package/es/_internal/hooks/use-sync-ref.js +1 -1
- package/es/_internal/hooks/use-timer/index.js +1 -1
- package/es/_internal/hooks/use-timer/timer.js +1 -1
- package/es/_internal/hooks/use-timer/use-timer.js +1 -1
- package/es/_internal/hooks/use-update-effect.js +20 -0
- package/es/_internal/hooks/use-warn.js +23 -0
- package/es/_internal/index.js +1 -1
- package/es/components/Base.js +2 -2
- package/es/components/Block.js +2 -2
- package/es/components/GlobalStyles.js +1 -1
- package/es/components/GridProvider.js +2 -2
- package/es/components/HiddenInput.js +1 -1
- package/es/components/OpenTrasition.js +2 -2
- package/es/components/Root.js +2 -2
- package/es/components/actions/Action.js +2 -2
- package/es/components/actions/Button/Button.js +2 -2
- package/es/components/actions/Button/index.js +1 -2
- package/es/components/actions/ButtonGroup/ButtonGroup.js +2 -2
- package/es/components/actions/index.js +1 -1
- package/es/components/actions/use-action.js +1 -1
- package/es/components/content/ActiveZone/ActiveZone.js +2 -2
- package/es/components/content/Alert/Alert.js +2 -2
- package/es/components/content/Alert/index.js +1 -1
- package/es/components/content/Alert/types.js +1 -1
- package/es/components/content/Alert/use-alert.js +1 -1
- package/es/components/content/Avatar/Avatar.js +2 -2
- package/es/components/content/Badge/Badge.js +2 -2
- package/es/components/content/Card/Card.js +2 -2
- package/es/components/content/Content.js +2 -2
- package/es/components/content/CopySnippet/CopySnippet.js +4 -4
- package/es/components/content/CopySnippet/index.js +1 -1
- package/es/components/content/Divider.js +2 -2
- package/es/components/content/Footer.js +2 -2
- package/es/components/content/Header.js +2 -2
- package/es/components/content/Paragraph.js +2 -2
- package/es/components/content/Placeholder/Placeholder.js +2 -2
- package/es/components/content/PrismCode/PrismCode.js +2 -2
- package/es/components/content/Result/Result.js +3 -3
- package/es/components/content/Skeleton/Skeleton.js +12 -12
- package/es/components/content/Tag/Tag.js +3 -3
- package/es/components/content/Text.js +8 -8
- package/es/components/content/Title.js +4 -4
- package/es/components/forms/Checkbox/Checkbox.js +32 -15
- package/es/components/forms/Checkbox/CheckboxGroup.js +30 -25
- package/es/components/forms/Checkbox/context.js +1 -1
- package/es/components/forms/{FieldWrapper.js → FieldWrapper/FieldWrapper.js} +22 -20
- package/es/components/forms/FieldWrapper/extract-field-wrapper-props.js +46 -0
- package/es/components/forms/FieldWrapper/index.js +12 -0
- package/es/components/forms/FieldWrapper/types.js +10 -0
- package/es/components/forms/FileInput/FileInput.js +4 -4
- package/es/components/forms/Form/{Field.js → Field/LegacyField.js} +47 -27
- package/es/components/forms/Form/Field/index.js +13 -0
- package/es/components/forms/Form/Field/types.js +10 -0
- package/es/components/forms/Form/Field/use-field-props.js +57 -0
- package/es/components/forms/Form/Field/use-field.js +129 -0
- package/es/components/forms/Form/Form.js +3 -3
- package/es/components/forms/Form/Submit/Submit.js +22 -0
- package/es/components/forms/Form/Submit/index.js +10 -0
- package/es/components/forms/Form/SubmitError.js +2 -2
- package/es/components/forms/Form/index.js +5 -3
- package/es/components/forms/Form/types.js +1 -1
- package/es/components/forms/Form/useForm.js +2 -1
- package/es/components/forms/Form/validation.js +1 -1
- package/es/components/forms/Input/Input.js +3 -7
- package/es/components/forms/Input/index.js +1 -1
- package/es/components/forms/Label.js +4 -4
- package/es/components/forms/NumberInput/NumberInput.js +17 -11
- package/es/components/forms/NumberInput/StepButton.js +3 -3
- package/es/components/forms/PasswordInput/PasswordInput.js +23 -6
- package/es/components/forms/RadioGroup/Radio.js +18 -9
- package/es/components/forms/RadioGroup/RadioGroup.js +14 -6
- package/es/components/forms/RadioGroup/context.js +1 -1
- package/es/components/forms/SearchInput/SearchInput.js +4 -4
- package/es/components/forms/Slider/Gradation.js +2 -2
- package/es/components/forms/Slider/Header.js +1 -1
- package/es/components/forms/Slider/RangeSlider.js +3 -3
- package/es/components/forms/Slider/Slider.js +5 -4
- package/es/components/forms/Slider/SliderBase.js +5 -5
- package/es/components/forms/Slider/SliderInput.js +2 -2
- package/es/components/forms/Slider/SliderThumb.js +2 -2
- package/es/components/forms/Slider/SliderTrack.js +2 -2
- package/es/components/forms/Slider/elements.js +1 -1
- package/es/components/forms/Slider/index.js +1 -1
- package/es/components/forms/Slider/types.js +1 -1
- package/es/components/forms/Switch/Switch.js +19 -15
- package/es/components/forms/TextArea/TextArea.js +31 -28
- package/es/components/forms/TextInput/TextInput.js +16 -9
- package/es/components/forms/TextInput/TextInputBase.js +13 -41
- package/es/components/forms/TextInput/index.js +11 -0
- package/es/components/forms/index.js +1 -1
- package/es/components/layout/Flex.js +2 -2
- package/es/components/layout/Flow.js +2 -2
- package/es/components/layout/Grid.js +2 -2
- package/es/components/layout/Prefix.js +2 -2
- package/es/components/layout/Space.js +2 -2
- package/es/components/layout/Suffix.js +2 -2
- package/es/components/navigation/LegacyTabs/LegacyTabs.js +4 -4
- package/es/components/navigation/Link/Link.js +2 -2
- package/es/components/organisms/FileTabs/FileTabs.js +4 -4
- package/es/components/organisms/Modal/Modal.js +3 -3
- package/es/components/organisms/StatsCard/StatsCard.js +2 -2
- package/es/components/other/Base64Upload/Base64Upload.js +2 -2
- package/es/components/other/CloudLogo/CloudLogo.js +2 -2
- package/es/components/overlays/AlertDialog/AlertDialog.js +2 -2
- package/es/components/overlays/AlertDialog/AlertDialogApiProvider.js +2 -2
- package/es/components/overlays/AlertDialog/AlertDialogZone.js +2 -2
- package/es/components/overlays/AlertDialog/index.js +1 -1
- package/es/components/overlays/AlertDialog/types.js +1 -1
- package/es/components/overlays/Dialog/Dialog.js +14 -5
- package/es/components/overlays/Dialog/DialogContainer.js +2 -2
- package/es/components/overlays/Dialog/DialogForm.js +5 -7
- package/es/components/overlays/Dialog/DialogTrigger.js +11 -11
- package/es/components/overlays/Dialog/context.js +1 -1
- package/es/components/overlays/Dialog/index.js +1 -1
- package/es/components/overlays/Modal/Modal.js +23 -9
- package/es/components/overlays/Modal/OpenTransition.js +11 -3
- package/es/components/overlays/Modal/Overlay.js +6 -4
- package/es/components/overlays/Modal/Popover.js +21 -6
- package/es/components/overlays/Modal/Tray.js +14 -4
- package/es/components/overlays/Modal/Underlay.js +2 -2
- package/es/components/overlays/Modal/index.js +2 -1
- package/es/components/overlays/Modal/types.js +10 -0
- package/es/components/overlays/NewNotifications/Bar/FloatingNotification.js +2 -2
- package/es/components/overlays/NewNotifications/Bar/NotificationsBar.js +2 -2
- package/es/components/overlays/NewNotifications/Bar/TransitionComponent.js +2 -2
- package/es/components/overlays/NewNotifications/Bar/index.js +1 -1
- package/es/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js +3 -3
- package/es/components/overlays/NewNotifications/Dialog/index.js +1 -1
- package/es/components/overlays/NewNotifications/Notification.js +4 -4
- package/es/components/overlays/NewNotifications/NotificationView/NotificationAction.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.js +3 -3
- package/es/components/overlays/NewNotifications/NotificationView/NotificationDescription.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationView/NotificationFooter.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationView/NotificationHeader.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationView/NotificationIcon.js +5 -5
- package/es/components/overlays/NewNotifications/NotificationView/NotificationProvider.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationView/NotificationView.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationView/index.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationView/types.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationsContext/index.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsContext/use-notifications.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsList/NotificationsList.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.js +2 -2
- package/es/components/overlays/NewNotifications/NotificationsList/index.js +1 -1
- package/es/components/overlays/NewNotifications/NotificationsList/types.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/index.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/types.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notification-list-item.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notifications-api.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notifications-list.js +1 -1
- package/es/components/overlays/NewNotifications/hooks/use-notifications-observer.js +1 -1
- package/es/components/overlays/NewNotifications/index.js +1 -1
- package/es/components/overlays/NewNotifications/types.js +1 -1
- package/es/components/overlays/Notification/Notification.js +2 -2
- package/es/components/overlays/OverlayWrapper.js +3 -3
- package/es/components/overlays/Toasts/Toast.js +4 -4
- package/es/components/overlays/Toasts/index.js +1 -1
- package/es/components/overlays/Toasts/types.js +1 -1
- package/es/components/overlays/Toasts/use-toasts-api.js +1 -1
- package/es/components/overlays/Tooltip/Tooltip.js +2 -2
- package/es/components/overlays/Tooltip/TooltipProvider.js +2 -2
- package/es/components/overlays/Tooltip/TooltipTrigger.js +4 -4
- package/es/components/overlays/Tooltip/context.js +1 -1
- package/es/components/pickers/ComboBox/ComboBox.js +29 -17
- package/es/components/pickers/Menu/Menu.js +3 -3
- package/es/components/pickers/Menu/MenuButton.js +5 -5
- package/es/components/pickers/Menu/MenuItem.js +3 -3
- package/es/components/pickers/Menu/MenuSection.js +3 -3
- package/es/components/pickers/Menu/MenuTrigger.js +5 -5
- package/es/components/pickers/Menu/context.js +1 -1
- package/es/components/pickers/Menu/styled.js +1 -1
- package/es/components/pickers/Select/Select.js +27 -12
- package/es/components/portal/Portal.js +2 -2
- package/es/components/portal/PortalProvider.js +1 -1
- package/es/components/portal/index.js +1 -1
- package/es/components/portal/storybook/templates/CustomRoot.js +2 -2
- package/es/components/portal/storybook/templates/PortalOrder.js +2 -2
- package/es/components/portal/storybook/templates/basic.js +2 -2
- package/es/components/portal/storybook/templates/index.js +1 -1
- package/es/components/portal/types.js +1 -1
- package/es/components/portal/usePortal.js +1 -1
- package/es/components/status/LoadingAnimation/LoadingAnimation.js +3 -3
- package/es/components/status/LoadingAnimation/index.js +1 -1
- package/es/components/status/Spin/Cube.js +1 -1
- package/es/components/status/Spin/InternalSpinner.js +2 -2
- package/es/components/status/Spin/Spin.js +3 -3
- package/es/components/status/Spin/SpinsContainer.js +1 -1
- package/es/components/status/Spin/index.js +1 -1
- package/es/components/status/Spin/types.js +1 -1
- package/es/components/status/index.js +1 -1
- package/es/data/themes.js +1 -1
- package/es/icons/Attention.js +2 -2
- package/es/icons/Cross.js +2 -2
- package/es/icons/Danger.js +2 -2
- package/es/icons/Success.js +2 -2
- package/es/icons/index.js +1 -1
- package/es/index.js +2 -3
- package/es/provider.js +3 -3
- package/es/providers/StyleProvider.js +2 -2
- package/es/services/notification.js +2 -2
- package/es/shared/form.js +1 -1
- package/es/shared/index.js +1 -1
- package/es/styled/index.js +1 -1
- package/es/styled/styled.js +4 -4
- package/es/tasty/index.js +1 -1
- package/es/tasty/providers/BreakpointsProvider.js +2 -2
- package/es/tasty/styles/align.js +1 -1
- package/es/tasty/styles/border.js +1 -1
- package/es/tasty/styles/boxShadow.combinator.js +1 -1
- package/es/tasty/styles/color.js +1 -1
- package/es/tasty/styles/createStyle.js +1 -1
- package/es/tasty/styles/dimension.js +1 -1
- package/es/tasty/styles/display.js +1 -1
- package/es/tasty/styles/fill.js +1 -1
- package/es/tasty/styles/flow.js +1 -1
- package/es/tasty/styles/font.js +1 -1
- package/es/tasty/styles/fontStyle.js +1 -1
- package/es/tasty/styles/gap.js +1 -1
- package/es/tasty/styles/groupRadius.js +1 -1
- package/es/tasty/styles/height.js +1 -1
- package/es/tasty/styles/index.js +1 -1
- package/es/tasty/styles/justify.js +1 -1
- package/es/tasty/styles/list.js +1 -1
- package/es/tasty/styles/margin.js +1 -1
- package/es/tasty/styles/marginBlock.js +1 -1
- package/es/tasty/styles/marginInline.js +1 -1
- package/es/tasty/styles/outline.js +1 -1
- package/es/tasty/styles/padding.js +1 -1
- package/es/tasty/styles/paddingBlock.js +1 -1
- package/es/tasty/styles/paddingInline.js +1 -1
- package/es/tasty/styles/predefined.js +1 -1
- package/es/tasty/styles/preset.js +1 -1
- package/es/tasty/styles/radius.js +1 -1
- package/es/tasty/styles/reset.js +1 -1
- package/es/tasty/styles/shadow.js +1 -1
- package/es/tasty/styles/styledScrollbar.js +1 -1
- package/es/tasty/styles/transition.js +1 -1
- package/es/tasty/styles/types.js +1 -1
- package/es/tasty/styles/width.js +1 -1
- package/es/tasty/tasty.js +4 -4
- package/es/tasty/types.js +1 -1
- package/es/tasty/utils/colors.js +1 -1
- package/es/tasty/utils/dotize.js +1 -1
- package/es/tasty/utils/filterBaseProps.js +1 -1
- package/es/tasty/utils/get-display-name.js +1 -1
- package/es/tasty/utils/index.js +1 -1
- package/es/tasty/utils/mergeStyles.js +1 -1
- package/es/tasty/utils/modAttrs.js +1 -1
- package/es/tasty/utils/renderStyles.js +1 -1
- package/es/tasty/utils/responsive.js +1 -1
- package/es/tasty/utils/string.js +1 -1
- package/es/tasty/utils/styles.js +1 -1
- package/es/tasty/utils/warnings.js +1 -1
- package/es/test/index.js +5 -1
- package/es/test/render.js +2 -2
- package/es/test/setup.js +43 -2
- package/es/test/utils/index.js +1 -1
- package/es/test/utils/wait.js +1 -1
- package/es/tokens.js +1 -1
- package/es/type-checks.js +1 -1
- package/es/utils/ResizeSensor.js +1 -1
- package/es/utils/modules.js +1 -1
- package/es/utils/promise.js +1 -1
- package/es/utils/random.js +1 -1
- package/es/utils/range.js +1 -1
- package/es/utils/react/Slots.js +3 -3
- package/es/utils/react/chain.js +1 -1
- package/es/utils/react/index.js +1 -1
- package/es/utils/react/interactions.js +1 -1
- package/es/utils/react/isTextOnly.js +1 -1
- package/es/utils/react/mapProps.js +1 -1
- package/es/utils/react/mergeProps.js +1 -1
- package/es/utils/react/nullableValue.js +1 -1
- package/es/utils/react/useCombinedRefs.js +1 -1
- package/es/utils/react/useId.js +1 -1
- package/es/utils/react/useLayoutEffect.js +1 -1
- package/es/utils/react/useViewportSize.js +1 -1
- package/es/utils/react/wrapNodeIfPlain.js +1 -1
- package/es/utils/transitions.js +1 -1
- package/es/utils/tree.js +1 -1
- package/es/utils/warnings.js +2 -2
- package/package.json +2 -1
- package/types/_internal/hooks/index.d.ts +6 -2
- package/types/_internal/hooks/use-effect-once.d.ts +2 -0
- package/types/_internal/hooks/use-is-first-render.d.ts +1 -0
- package/types/_internal/hooks/use-update-effect.d.ts +2 -0
- package/types/_internal/hooks/use-warn.d.ts +2 -0
- package/types/components/actions/Button/index.d.ts +0 -1
- package/types/components/forms/Checkbox/CheckboxGroup.d.ts +1 -2
- package/types/components/forms/FieldWrapper/FieldWrapper.d.ts +7 -0
- package/types/components/forms/FieldWrapper/extract-field-wrapper-props.d.ts +9 -0
- package/types/components/forms/FieldWrapper/index.d.ts +3 -0
- package/types/components/forms/{FieldWrapper.d.ts → FieldWrapper/types.d.ts} +15 -20
- package/types/components/forms/Form/Field/LegacyField.d.ts +14 -0
- package/types/components/forms/Form/Field/index.d.ts +4 -0
- package/types/components/forms/Form/Field/types.d.ts +72 -0
- package/types/components/forms/Form/Field/use-field-props.d.ts +19 -0
- package/types/components/forms/Form/Field/use-field.d.ts +7 -0
- package/types/components/forms/Form/Form.d.ts +3 -1
- package/types/components/forms/Form/Submit/Submit.d.ts +8 -0
- package/types/components/forms/Form/Submit/index.d.ts +1 -0
- package/types/components/forms/Form/index.d.ts +5 -1
- package/types/components/forms/Form/useForm.d.ts +1 -1
- package/types/components/forms/Input/Input.d.ts +1 -1
- package/types/components/forms/NumberInput/NumberInput.d.ts +2 -3
- package/types/components/forms/PasswordInput/PasswordInput.d.ts +3 -1
- package/types/components/forms/Slider/types.d.ts +1 -1
- package/types/components/forms/Switch/Switch.d.ts +2 -3
- package/types/components/forms/TextArea/TextArea.d.ts +3 -4
- package/types/components/forms/TextInput/TextInput.d.ts +5 -0
- package/types/components/forms/TextInput/TextInputBase.d.ts +1 -2
- package/types/components/forms/TextInput/index.d.ts +2 -0
- package/types/components/other/Base64Upload/Base64Upload.d.ts +4 -1
- package/types/components/overlays/Dialog/DialogForm.d.ts +1 -2
- package/types/components/overlays/Dialog/DialogTrigger.d.ts +2 -1
- package/types/components/overlays/Modal/Modal.d.ts +2 -1
- package/types/components/overlays/Modal/OpenTransition.d.ts +6 -1
- package/types/components/overlays/Modal/Overlay.d.ts +2 -1
- package/types/components/overlays/Modal/Popover.d.ts +3 -1
- package/types/components/overlays/Modal/Tray.d.ts +2 -1
- package/types/components/overlays/Modal/index.d.ts +1 -0
- package/types/components/overlays/Modal/types.d.ts +9 -0
- package/types/components/pickers/ComboBox/ComboBox.d.ts +5 -5
- package/types/components/pickers/Select/Select.d.ts +5 -2
- package/types/index.d.ts +1 -2
- package/types/shared/form.d.ts +10 -0
- package/types/test/index.d.ts +4 -0
- package/types/test/setup.d.ts +0 -1
- package/cjs/components/actions/Button/Submit.js +0 -29
- package/cjs/stories/FormFieldArgs.js +0 -324
- package/cjs/stories/components/ConfirmDeletionDialogForm.js +0 -36
- package/cjs/stories/components/DialogFormApp.js +0 -19
- package/cjs/stories/components/StyledButton.js +0 -37
- package/cjs/stories/lists/baseProps.js +0 -42
- package/es/components/actions/Button/Submit.js +0 -26
- package/es/stories/FormFieldArgs.js +0 -321
- package/es/stories/components/ConfirmDeletionDialogForm.js +0 -32
- package/es/stories/components/DialogFormApp.js +0 -15
- package/es/stories/components/StyledButton.js +0 -33
- package/es/stories/lists/baseProps.js +0 -39
- package/types/components/actions/Button/Submit.d.ts +0 -3
- package/types/components/forms/Form/Field.d.ts +0 -41
- package/types/stories/FormFieldArgs.d.ts +0 -369
- package/types/stories/components/ConfirmDeletionDialogForm.d.ts +0 -8
- package/types/stories/components/DialogFormApp.d.ts +0 -2
- package/types/stories/components/StyledButton.d.ts +0 -119
- package/types/stories/lists/baseProps.d.ts +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -16,7 +16,7 @@ const FlexElement = tasty({
|
|
|
16
16
|
});
|
|
17
17
|
export const Flex = forwardRef(function Flex(props, ref) {
|
|
18
18
|
const styles = extractStyles(props, CONTAINER_STYLES);
|
|
19
|
-
return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }
|
|
19
|
+
return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -17,7 +17,7 @@ const FlowElement = tasty({
|
|
|
17
17
|
const STYLE_PROPS = CONTAINER_STYLES;
|
|
18
18
|
export const Flow = forwardRef(function Flow(props, ref) {
|
|
19
19
|
const styles = extractStyles(props, STYLE_PROPS);
|
|
20
|
-
return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }
|
|
20
|
+
return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -22,7 +22,7 @@ const PROP_MAP = {
|
|
|
22
22
|
};
|
|
23
23
|
export const Grid = forwardRef(function Grid(props, ref) {
|
|
24
24
|
const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);
|
|
25
|
-
return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }
|
|
25
|
+
return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
|
|
26
26
|
});
|
|
27
27
|
|
|
28
28
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -37,7 +37,7 @@ export const Prefix = forwardRef(function Prefix(allProps, outerRef) {
|
|
|
37
37
|
return (_jsx(PrefixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
|
|
38
38
|
// @ts-ignore
|
|
39
39
|
'--prefix-gap': parseStyle(outerGap).value,
|
|
40
|
-
}, children: children }
|
|
40
|
+
}, children: children }));
|
|
41
41
|
});
|
|
42
42
|
|
|
43
43
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -28,7 +28,7 @@ export const Space = forwardRef(function Space(props, ref) {
|
|
|
28
28
|
return (_jsx(SpaceElement, { ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, mods: {
|
|
29
29
|
vertical: direction === 'vertical' || otherProps.flow === 'column',
|
|
30
30
|
...mods,
|
|
31
|
-
}, styles: styles }
|
|
31
|
+
}, styles: styles }));
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -36,7 +36,7 @@ export const Suffix = forwardRef(function Suffix(allProps, outerRef) {
|
|
|
36
36
|
}, [children, ref, onWidthChange]);
|
|
37
37
|
return (_jsx(SuffixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
|
|
38
38
|
'--suffix-gap': parseStyle(outerGap).value,
|
|
39
|
-
}, children: children }
|
|
39
|
+
}, children: children }));
|
|
40
40
|
});
|
|
41
41
|
|
|
42
42
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -143,7 +143,7 @@ const StyledTabsContainerElement = styled(TabsContainerElement) `
|
|
|
143
143
|
}
|
|
144
144
|
`;
|
|
145
145
|
function Tab({ isSelected, isHidden, onClose, ...props }) {
|
|
146
|
-
return (_jsx(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }
|
|
146
|
+
return (_jsx(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }));
|
|
147
147
|
}
|
|
148
148
|
export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }) {
|
|
149
149
|
const tabsRef = useRef(null);
|
|
@@ -239,7 +239,7 @@ export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabCl
|
|
|
239
239
|
currentTab: activeKey,
|
|
240
240
|
}, children: [_jsxs(Space, { gap: ".5x", placeContent: "center space-between", children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
|
|
241
241
|
return (_jsx(Tab, { "data-qa": tab.qa, isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, onPress: () => onPress(tab), children: tab.title }, tab.id));
|
|
242
|
-
}) }
|
|
242
|
+
}) }), extra] }), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children })] }) }));
|
|
243
243
|
}
|
|
244
244
|
LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, children, ...props }) {
|
|
245
245
|
const { addTab, removeTab, changeTab, currentTab } = useContext(LegacyTabsContext);
|
|
@@ -266,7 +266,7 @@ LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, chi
|
|
|
266
266
|
});
|
|
267
267
|
}, [title, isDisabled, isHidden]);
|
|
268
268
|
const isCurrent = id === currentTab;
|
|
269
|
-
return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }
|
|
269
|
+
return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }));
|
|
270
270
|
};
|
|
271
271
|
|
|
272
272
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
9
9
|
import { forwardRef } from 'react';
|
|
10
10
|
import { Button } from '../../actions';
|
|
11
11
|
export const Link = forwardRef(function Link(props, ref) {
|
|
12
|
-
return _jsx(Button, { type: "link", ...props, ref: ref }
|
|
12
|
+
return _jsx(Button, { type: "link", ...props, ref: ref });
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -189,7 +189,7 @@ const CloseButton = tasty(Button, {
|
|
|
189
189
|
function Tab({ isDirty, isDisabled, children, isClosable, onClose, ...props }) {
|
|
190
190
|
return (_jsx(TabElement, { mods: {
|
|
191
191
|
dirty: isDirty,
|
|
192
|
-
}, isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }
|
|
192
|
+
}, isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }), (isClosable || isDirty) && (_jsxs(Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? (_jsx(CloseButton, { onPress: onClose, children: _jsx(CloseOutlined, {}) })) : (_jsx("div", {})), isDirty ? _jsx(DirtyBadge, {}) : null] }))] }) }));
|
|
193
193
|
}
|
|
194
194
|
export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
|
|
195
195
|
const tabsRef = useRef(null);
|
|
@@ -291,7 +291,7 @@ export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClic
|
|
|
291
291
|
currentTab: activeKey,
|
|
292
292
|
}, children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
|
|
293
293
|
return (_jsx(Tab, { isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), children: tab.title }, tab.id));
|
|
294
|
-
}) }
|
|
294
|
+
}) }), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children })] }) }));
|
|
295
295
|
}
|
|
296
296
|
FileTabs.TabPane = function FileTabPane(allProps) {
|
|
297
297
|
let { id, title, isDirty, children, ...props } = allProps;
|
|
@@ -311,7 +311,7 @@ FileTabs.TabPane = function FileTabPane(allProps) {
|
|
|
311
311
|
setDirtyTab(id, isDirty || false);
|
|
312
312
|
}, [isDirty]);
|
|
313
313
|
const isCurrent = id === currentTab;
|
|
314
|
-
return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }
|
|
314
|
+
return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }));
|
|
315
315
|
};
|
|
316
316
|
|
|
317
317
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -158,10 +158,10 @@ export function Modal(allProps) {
|
|
|
158
158
|
}
|
|
159
159
|
})();
|
|
160
160
|
}, [onOk]);
|
|
161
|
-
return (_jsx(CSSTransition, { in: inProp, timeout: 250, classNames: "cube-modal-transition", children: _jsx(Overlay, { className: "cube-modal-overlay", onClick: onOverlayClick, children: _jsxs(Card, { "data-qa": qa || 'Modal', className: "cube-modal", display: "flex", role: "region", color: "#dark.85", padding: "0", shadow: true, border: false, radius: "1.5r", width: `288px (100% - 32px) ${typeof width === 'number' ? `${width}px` : width || '360px'}`, style: { textAlign: 'left' }, ...props, children: [_jsxs(Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : (_jsx(Title, { ellipsis: true, level: 4, flexGrow: 1, children: title }
|
|
161
|
+
return (_jsx(CSSTransition, { in: inProp, timeout: 250, classNames: "cube-modal-transition", children: _jsx(Overlay, { className: "cube-modal-overlay", onClick: onOverlayClick, children: _jsxs(Card, { "data-qa": qa || 'Modal', className: "cube-modal", display: "flex", role: "region", color: "#dark.85", padding: "0", shadow: true, border: false, radius: "1.5r", width: `288px (100% - 32px) ${typeof width === 'number' ? `${width}px` : width || '360px'}`, style: { textAlign: 'left' }, ...props, children: [_jsxs(Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : (_jsx(Title, { ellipsis: true, level: 4, flexGrow: 1, children: title })), isClosable ? (_jsx(Action, { qa: "ModalCloseButton", width: "3x", height: "3x", color: { '': '#dark.75', hovered: '#purple' }, outline: {
|
|
162
162
|
'': '#purple-03.0',
|
|
163
163
|
'focused & focus-visible': '#purple-03',
|
|
164
|
-
}, label: "Close", onPress: onClose || onCancel, children: _jsx(CloseOutlined, { style: { fontSize: 16 } }
|
|
164
|
+
}, label: "Close", onPress: onClose || onCancel, children: _jsx(CloseOutlined, { style: { fontSize: 16 } }) })) : null] }), _jsxs(Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? (_jsx(Block, { children: children })) : (children), type !== 'info' && (onOk || onCancel) ? (_jsxs(Space, { gap: "1.5x", children: [_jsx(Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: "primary", theme: okType === 'danger' ? 'danger' : undefined, isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }), _jsx(Button, { "data-qa": 'CancelButton', isDisabled: isLoading, onPress: cancel, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') })] })) : null, type === 'info' ? (_jsx(Space, { children: _jsx(Button, { "data-qa": 'OkButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', onPress: close, children: okText || 'OK' }) })) : null] })] }) }) }));
|
|
165
165
|
}
|
|
166
166
|
let ID = 0;
|
|
167
167
|
const modal = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -10,7 +10,7 @@ import { Card } from '../../content/Card/Card';
|
|
|
10
10
|
import { Title } from '../../content/Title';
|
|
11
11
|
import { Text } from '../../content/Text';
|
|
12
12
|
export function StatsCard({ title, value, suffix, ...props }) {
|
|
13
|
-
return (_jsxs(Card, { display: "flex", placeContent: "space-between", gap: "1x", border: false, shadow: "0 2px 6px #dark.10", padding: "2.5x", ...props, children: [_jsx(Title, { nowrap: true, level: 4, color: "#minor", preset: "default", children: title }
|
|
13
|
+
return (_jsxs(Card, { display: "flex", placeContent: "space-between", gap: "1x", border: false, shadow: "0 2px 6px #dark.10", padding: "2.5x", ...props, children: [_jsx(Title, { nowrap: true, level: 4, color: "#minor", preset: "default", children: title }), _jsxs(Text.Strong, { preset: "h3", children: [value, " ", suffix] })] }));
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -68,7 +68,7 @@ export const Base64Upload = styled(forwardRef(function Base64Upload(allProps, re
|
|
|
68
68
|
setError('Invalid file');
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Button, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, children: [_jsx(Block, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: ".5x 1x", children: "Choose file" }
|
|
71
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Button, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, children: [_jsx(Block, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: ".5x 1x", children: "Choose file" }), _jsx(Block, { color: "#dark-04", children: file || 'No file selected' }), _jsx("input", { type: "file", name: "base64", accept: ".json", onInput: onInputFile })] }), error && _jsx(Text.Danger, { color: "danger", children: error })] }));
|
|
72
72
|
})) `
|
|
73
73
|
appearance: none;
|
|
74
74
|
cursor: pointer;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -29,7 +29,7 @@ const Button = styled.button((props) => {
|
|
|
29
29
|
function CloudLogo(props, ref) {
|
|
30
30
|
let domRef = useFocusableRef(ref);
|
|
31
31
|
let { buttonProps } = useButton(cubeToAriaButtonProps(props), domRef);
|
|
32
|
-
return (_jsx(Button, { "data-qa": "HeaderCubeCloudLogo", ...buttonProps, ref: domRef, isLink: !!props.onPress, label: "Logo", children: _jsxs("svg", { width: "159", height: "26", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M22.533 6.535L11.27 0v4.522l11.264 6.507V6.535z", fill: "#FF6492" }
|
|
32
|
+
return (_jsx(Button, { "data-qa": "HeaderCubeCloudLogo", ...buttonProps, ref: domRef, isLink: !!props.onPress, label: "Logo", children: _jsxs("svg", { width: "159", height: "26", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M22.533 6.535L11.27 0v4.522l11.264 6.507V6.535z", fill: "#FF6492" }), _jsx("path", { d: "M22.533 11.029L19.154 13l-7.887-4.567-4.507 2.6-3.38-1.827 7.889-4.684 11.264 6.507z", fill: "#141446" }), _jsx("path", { d: "M6.76 11.033L3.38 9.206V13l3.38-1.967z", fill: "#A14474" }), _jsx("path", { d: "M0 19.465L11.267 13l11.266 6.465L11.267 26 0 19.465z", fill: "#141446" }), _jsx("path", { d: "M22.533 14.978L11.267 8.362V13l11.266 6.465v-4.487z", fill: "#FF6492" }), _jsx("path", { d: "M3.38 13V9.205l7.889-4.683V0L0 6.535v12.93L11.267 13V8.362L3.38 13z", fill: "#7A77FF" }), _jsx("path", { d: "M36.594 21.099c2.446 0 4.36-1.21 5.503-3.067l-1.967-1.534c-.878 1.21-1.967 1.991-3.509 1.991-2.392 0-4.093-1.856-4.093-4.305 0-2.394 1.7-4.278 4.093-4.278 1.568 0 2.658.807 3.509 2.018l1.967-1.56c-1.117-1.857-3.03-3.067-5.503-3.067-3.854 0-6.91 3.013-6.91 6.887 0 3.902 3.056 6.915 6.91 6.915zM50.224 21.099c3.19 0 5.662-2.26 5.662-5.838V7.593h-2.791v7.883c0 1.856-1.276 3.013-2.871 3.013-1.648 0-2.95-1.157-2.95-3.013V7.593h-2.765v7.668c0 3.578 2.472 5.838 5.715 5.838zM66.42 7.297c-1.807 0-3.376.7-4.36 1.91V.624h-2.79v20.18h2.605v-1.83c.983 1.345 2.658 2.125 4.572 2.125 3.694 0 6.38-2.96 6.38-6.888S70.14 7.297 66.42 7.297zm-.452 11.22c-1.94 0-3.934-1.292-3.934-4.306 0-2.986 1.967-4.332 3.934-4.332 2.233 0 3.987 1.75 3.987 4.305 0 2.556-1.727 4.332-3.987 4.332zM87.469 13.35c0-3.47-2.552-6.053-6.034-6.053-3.801 0-6.752 3.04-6.752 6.914 0 3.902 2.977 6.888 7.018 6.888 2.073 0 3.827-.807 5.21-2.125l-1.33-1.938c-1.09.969-2.286 1.56-3.8 1.56-2.234 0-3.882-1.29-4.254-3.47h9.729c.08-.35.213-1.05.213-1.776zm-6.14-3.659c1.78 0 3.296 1.157 3.349 3.229H77.58c.425-1.964 1.913-3.229 3.747-3.229zM101.014 21.099c2.445 0 4.359-1.21 5.502-3.067l-1.967-1.534c-.877 1.21-1.967 1.991-3.508 1.991-2.393 0-4.094-1.856-4.094-4.305 0-2.394 1.701-4.278 4.094-4.278 1.568 0 2.658.807 3.508 2.018l1.967-1.56c-1.116-1.857-3.03-3.067-5.502-3.067-3.854 0-6.911 3.013-6.911 6.887 0 3.902 3.057 6.915 6.911 6.915zM109.062 20.803h2.791V.624h-2.791v20.18zM121.417 21.099c3.881 0 6.938-3.067 6.938-6.915 0-3.847-3.057-6.887-6.938-6.887-3.854 0-6.884 3.013-6.884 6.887 0 3.848 3.03 6.915 6.884 6.915zm0-2.61c-2.312 0-4.04-1.83-4.04-4.278 0-2.475 1.728-4.332 4.067-4.332 2.286 0 4.04 1.857 4.04 4.332 0 2.422-1.754 4.278-4.067 4.278zM136.605 21.099c3.19 0 5.662-2.26 5.662-5.838V7.593h-2.791v7.883c0 1.856-1.276 3.013-2.871 3.013-1.648 0-2.95-1.157-2.95-3.013V7.593h-2.765v7.668c0 3.578 2.472 5.838 5.715 5.838zM155.566.624v8.583c-.984-1.21-2.552-1.91-4.36-1.91-3.694 0-6.379 2.986-6.379 6.914 0 3.928 2.658 6.888 6.379 6.888 1.941 0 3.615-.807 4.572-2.18v1.884h2.605V.624h-2.817zm-3.881 17.892c-2.286 0-4.014-1.776-4.014-4.332s1.754-4.305 4.014-4.305c1.94 0 3.934 1.346 3.934 4.332 0 3.014-1.994 4.305-3.934 4.305z", fill: "#141446" })] }) }));
|
|
33
33
|
}
|
|
34
34
|
const _CloudLogo = forwardRef(CloudLogo);
|
|
35
35
|
export { _CloudLogo as CloudLogo };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -45,7 +45,7 @@ function AlertDialog(props, ref) {
|
|
|
45
45
|
...(typeof cancelProps === 'object' ? cancelProps : null),
|
|
46
46
|
}
|
|
47
47
|
: undefined;
|
|
48
|
-
return (_jsxs(Dialog, { ref: ref, role: "alertdialog", isDismissable: false, ...otherProps, children: [title ? (_jsx(Header, { children: _jsx(Title, { children: title }
|
|
48
|
+
return (_jsxs(Dialog, { ref: ref, role: "alertdialog", isDismissable: false, ...otherProps, children: [title ? (_jsx(Header, { children: _jsx(Title, { children: title }) })) : null, content ? (_jsx(Content, { children: typeof content === 'string' ? (_jsx(Paragraph, { children: content })) : (content) })) : null, !noActions ? (_jsx(Footer, { children: _jsxs(ButtonGroup, { align: "end", children: [_jsx(Button, { autoFocus: true, theme: danger ? 'danger' : undefined, ...confirmProps, onPress: (e) => chain(confirmProps?.onPress?.(e), onClose?.('confirm')) }), secondaryProps && (_jsx(Button, { ...secondaryProps, onPress: (e) => chain(secondaryProps?.onPress?.(e), onClose?.('secondary')) })), cancelProps && (_jsx(Button, { ...cancelProps, onPress: (e) => chain(cancelProps?.onPress?.(e), onClose?.('cancel')) }))] }) })) : null] }));
|
|
49
49
|
}
|
|
50
50
|
/**
|
|
51
51
|
* AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -69,7 +69,7 @@ export function AlertDialogApiProvider(props) {
|
|
|
69
69
|
return currentDialog.meta.promise;
|
|
70
70
|
},
|
|
71
71
|
}), []);
|
|
72
|
-
return (_jsxs(DialogApiContext.Provider, { value: api, children: [_jsx(AlertDialogZone, { openedDialog: openedDialog }
|
|
72
|
+
return (_jsxs(DialogApiContext.Provider, { value: api, children: [_jsx(AlertDialogZone, { openedDialog: openedDialog }), props.children] }));
|
|
73
73
|
}
|
|
74
74
|
/**
|
|
75
75
|
* Hook gives the ability to open `<AlertDialog />` imperatively.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -48,7 +48,7 @@ export function AlertDialogZone(props) {
|
|
|
48
48
|
})();
|
|
49
49
|
return (_jsx(Portal, { children: _jsx(DialogContainer, { isOpen: isVisible, isDismissable: isDismissable, type: type, onDismiss: onDismiss, children: _jsx(AlertDialog, { noActions: dialogType === 'form', actions: _actions, isHidden: !isVisible, content: typeof content === 'function'
|
|
50
50
|
? content({ resolve, reject })
|
|
51
|
-
: content, ...options }
|
|
51
|
+
: content, ...options }) }) }, PORTAL_KEY));
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
import styled from 'styled-components';
|
|
9
10
|
import { useDOMRef } from '@react-spectrum/utils';
|
|
10
11
|
import { DismissButton } from '@react-aria/overlays';
|
|
11
|
-
import { FocusScope } from '@react-aria/focus';
|
|
12
12
|
import { forwardRef } from 'react';
|
|
13
13
|
import { useDialog } from '@react-aria/dialog';
|
|
14
14
|
import { useMessageFormatter } from '@react-aria/i18n';
|
|
15
15
|
import { CloseOutlined } from '@ant-design/icons';
|
|
16
|
+
import FocusLock from 'react-focus-lock';
|
|
16
17
|
import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, extractStyles, tasty, } from '../../../tasty';
|
|
17
18
|
import { mergeProps, SlotProvider } from '../../../utils/react';
|
|
18
19
|
import { Button } from '../../actions';
|
|
20
|
+
import { useOpenTransitionContext } from '../Modal/OpenTransition';
|
|
19
21
|
import { useDialogContext } from './context';
|
|
20
22
|
const STYLES_LIST = [...BASE_STYLES, ...DIMENSION_STYLES, ...BLOCK_STYLES];
|
|
21
23
|
const DialogElement = tasty({
|
|
@@ -72,6 +74,9 @@ const DialogElement = tasty({
|
|
|
72
74
|
'@dialog-content-gap': '3x',
|
|
73
75
|
},
|
|
74
76
|
});
|
|
77
|
+
const StyledFocusLock = styled(FocusLock) `
|
|
78
|
+
display: contents;
|
|
79
|
+
`;
|
|
75
80
|
const CLOSE_BUTTON_STYLES = {
|
|
76
81
|
display: 'flex',
|
|
77
82
|
position: 'absolute',
|
|
@@ -102,6 +107,11 @@ const intlMessages = {
|
|
|
102
107
|
* Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
|
|
103
108
|
*/
|
|
104
109
|
export const Dialog = forwardRef(function Dialog(props, ref) {
|
|
110
|
+
const transitionContext = useOpenTransitionContext();
|
|
111
|
+
const isEntered = transitionContext?.transitionState === 'entered';
|
|
112
|
+
return (_jsx(StyledFocusLock, { returnFocus: true, disabled: !isEntered, children: _jsx(DialogContent, { ...props, ref: ref }, "content") }));
|
|
113
|
+
});
|
|
114
|
+
const DialogContent = forwardRef(function DialogContent(props, ref) {
|
|
105
115
|
let { type = 'modal', ...contextProps } = useDialogContext();
|
|
106
116
|
let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, ...otherProps } = props;
|
|
107
117
|
size = sizeMap[size.toUpperCase()] || size;
|
|
@@ -109,12 +119,11 @@ export const Dialog = forwardRef(function Dialog(props, ref) {
|
|
|
109
119
|
let formatMessage = useMessageFormatter(intlMessages);
|
|
110
120
|
let domRef = useDOMRef(ref);
|
|
111
121
|
let { dialogProps, titleProps } = useDialog(mergeProps(contextProps, props), domRef);
|
|
112
|
-
// console.log(dialogProps);
|
|
113
122
|
// If rendered in a popover or tray there won't be a visible dismiss button,
|
|
114
123
|
// so we render a hidden one for screen readers.
|
|
115
124
|
let dismissButton;
|
|
116
125
|
if (type === 'popover' || type === 'tray') {
|
|
117
|
-
dismissButton = _jsx(DismissButton, { onDismiss: onDismiss }
|
|
126
|
+
dismissButton = _jsx(DismissButton, { onDismiss: onDismiss });
|
|
118
127
|
}
|
|
119
128
|
// let hasHeader = useHasChild('[data-id="Header"]', domRef);
|
|
120
129
|
// let hasFooter = useHasChild('[data-id="Footer"]', domRef);
|
|
@@ -158,7 +167,7 @@ export const Dialog = forwardRef(function Dialog(props, ref) {
|
|
|
158
167
|
},
|
|
159
168
|
},
|
|
160
169
|
};
|
|
161
|
-
return (
|
|
170
|
+
return (_jsxs(DialogElement, { ref: domRef, "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: { dismissable: isDismissable }, style: { '--dialog-size': `${sizePxMap[size] || 288}px` }, "data-type": type, "data-size": size, children: [dismissButton, _jsxs(SlotProvider, { slots: slots, children: [isDismissable && (_jsx(Button, { qa: "ModalCloseButton", type: "neutral", styles: CLOSE_BUTTON_STYLES, icon: closeIcon || _jsx(CloseOutlined, {}), label: formatMessage('dismiss'), onPress: () => onDismiss && onDismiss() })), children] })] }));
|
|
162
171
|
});
|
|
163
172
|
|
|
164
173
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -32,7 +32,7 @@ export function DialogContainer(props) {
|
|
|
32
32
|
onClose: onDismiss,
|
|
33
33
|
isDismissable,
|
|
34
34
|
};
|
|
35
|
-
return (_jsx(Modal, { isOpen: isActuallyOpened, type: type, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, onClose: isDismissable ? onDismiss : undefined, children: _jsx(DialogContext.Provider, { value: context, children: child }
|
|
35
|
+
return (_jsx(Modal, { isOpen: isActuallyOpened, type: type, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, onClose: isDismissable ? onDismiss : undefined, children: _jsx(DialogContext.Provider, { value: context, children: child }) }));
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
9
|
import { Title } from '../../content/Title';
|
|
10
|
-
import { Form } from '../../forms
|
|
11
|
-
import { useForm } from '../../forms';
|
|
10
|
+
import { Form } from '../../forms';
|
|
12
11
|
import { Content } from '../../content/Content';
|
|
13
|
-
import { Submit } from '../../actions/Button/Submit';
|
|
14
12
|
import { Button } from '../../actions';
|
|
15
13
|
import { ButtonGroup } from '../../actions';
|
|
16
14
|
import { Header } from '../../content/Header';
|
|
@@ -21,7 +19,7 @@ import { Dialog } from './Dialog';
|
|
|
21
19
|
*/
|
|
22
20
|
export function DialogForm(props) {
|
|
23
21
|
let { qa, name, form, defaultValues, onDismiss, onSubmit, onSubmitFailed, onValuesChange, labelStyles, labelPosition, requiredMark, isRequired, necessityIndicator, necessityLabel, isReadOnly, validationState, validateTrigger, children, danger, noActions, submitProps, cancelProps, preserve, title, size, closeIcon, ...dialogProps } = props;
|
|
24
|
-
[form] = useForm(form);
|
|
22
|
+
[form] = Form.useForm(form);
|
|
25
23
|
const { onClose } = useDialogContext();
|
|
26
24
|
function onLocalDismiss() {
|
|
27
25
|
onClose?.();
|
|
@@ -30,13 +28,13 @@ export function DialogForm(props) {
|
|
|
30
28
|
form?.resetFields();
|
|
31
29
|
}
|
|
32
30
|
}
|
|
33
|
-
return (_jsxs(Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, ...dialogProps, children: [_jsx(Header, { children: _jsx(Title, { ellipsis: true, children: title }
|
|
31
|
+
return (_jsxs(Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, ...dialogProps, children: [_jsx(Header, { children: _jsx(Title, { ellipsis: true, children: title }) }), _jsx(Content, { children: _jsxs(Form, { qa: qa || 'DialogForm', form: form, name: name, defaultValues: defaultValues, labelStyles: labelStyles, labelPosition: labelPosition, requiredMark: requiredMark, isRequired: isRequired, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isReadOnly: isReadOnly, validationState: validationState, validateTrigger: validateTrigger, onSubmit: async (data) => {
|
|
34
32
|
await onSubmit?.(data);
|
|
35
33
|
onClose?.();
|
|
36
34
|
if (!preserve) {
|
|
37
35
|
form?.resetFields();
|
|
38
36
|
}
|
|
39
|
-
}, onSubmitFailed: onSubmitFailed, onValuesChange: onValuesChange, children: [typeof children === 'function' ? children(onLocalDismiss) : children, !noActions ? (_jsxs(ButtonGroup, { children: [_jsx(Submit, { qa: `${qa || ''}SubmitButton`, theme: danger ? 'danger' : undefined, label: "Submit", ...(submitProps || {}) }
|
|
37
|
+
}, onSubmitFailed: onSubmitFailed, onValuesChange: onValuesChange, children: [typeof children === 'function' ? children(onLocalDismiss) : children, !noActions ? (_jsxs(ButtonGroup, { children: [_jsx(Form.Submit, { qa: `${qa || ''}SubmitButton`, theme: danger ? 'danger' : undefined, label: "Submit", ...(submitProps || {}) }), _jsx(Button, { qa: `${qa || ''}CancelButton`, label: "Cancel", onPress: onLocalDismiss, ...(cancelProps || {}) })] })) : undefined] }) })] }));
|
|
40
38
|
}
|
|
41
39
|
|
|
42
40
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
3
|
* author: Cube Dev Team
|
|
4
|
-
* @cube-dev/ui-kit v0.0.0-canary-
|
|
4
|
+
* @cube-dev/ui-kit v0.0.0-canary-2a1d026
|
|
5
5
|
* Released under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -14,7 +14,7 @@ import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
|
|
|
14
14
|
import { Modal, Popover, Tray } from '../Modal';
|
|
15
15
|
import { DialogContext } from './context';
|
|
16
16
|
function DialogTrigger(props) {
|
|
17
|
-
let { children, type = 'modal', mobileType = type === 'popover' ? 'modal' : type, hideArrow, targetRef, onDismiss, isDismissable = true, isKeyboardDismissDisabled, styles, mobileViewport = 700, ...positionProps } = props;
|
|
17
|
+
let { children, type = 'modal', mobileType = type === 'popover' ? 'modal' : type, hideArrow, targetRef, onDismiss, isDismissable = true, isKeyboardDismissDisabled, styles, mobileViewport = 700, hideOnClose, ...positionProps } = props;
|
|
18
18
|
if (!Array.isArray(children) || children.length > 2) {
|
|
19
19
|
throw new Error('DialogTrigger must have exactly 2 children');
|
|
20
20
|
}
|
|
@@ -51,7 +51,7 @@ function DialogTrigger(props) {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
if (type === 'popover') {
|
|
54
|
-
return (_jsx(PopoverTrigger, { ...positionProps, state: state, targetRef: targetRef, trigger: trigger, content: content, isKeyboardDismissDisabled: isKeyboardDismissDisabled, hideArrow: hideArrow, onClose: onClose }
|
|
54
|
+
return (_jsx(PopoverTrigger, { ...positionProps, hideOnClose: hideOnClose, state: state, targetRef: targetRef, trigger: trigger, content: content, isKeyboardDismissDisabled: isKeyboardDismissDisabled, hideArrow: hideArrow, onClose: onClose }));
|
|
55
55
|
}
|
|
56
56
|
let renderOverlay = () => {
|
|
57
57
|
switch (type) {
|
|
@@ -59,12 +59,12 @@ function DialogTrigger(props) {
|
|
|
59
59
|
case 'fullscreen':
|
|
60
60
|
case 'fullscreenTakeover':
|
|
61
61
|
case 'modal':
|
|
62
|
-
return (_jsx(Modal, { isOpen: state.isOpen, isDismissable: isDismissable, type: type, isKeyboardDismissDisabled: isKeyboardDismissDisabled, styles: styles, onClose: onClose, onExiting: onExiting, onExited: onExited, children: typeof content === 'function' ? content(state.close) : content }
|
|
62
|
+
return (_jsx(Modal, { hideOnClose: hideOnClose, isOpen: state.isOpen, isDismissable: isDismissable, type: type, isKeyboardDismissDisabled: isKeyboardDismissDisabled, styles: styles, onClose: onClose, onExiting: onExiting, onExited: onExited, children: typeof content === 'function' ? content(state.close) : content }));
|
|
63
63
|
case 'tray':
|
|
64
|
-
return (_jsx(Tray, { isOpen: state.isOpen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, styles: styles, onClose: onClose, children: typeof content === 'function' ? content(state.close) : content }
|
|
64
|
+
return (_jsx(Tray, { hideOnClose: hideOnClose, isOpen: state.isOpen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, styles: styles, onClose: onClose, children: typeof content === 'function' ? content(state.close) : content }));
|
|
65
65
|
}
|
|
66
66
|
};
|
|
67
|
-
return (_jsx(DialogTriggerBase, { type: type, state: state, isDismissable: isDismissable, trigger: trigger, overlay: renderOverlay(), onClose: onClose }
|
|
67
|
+
return (_jsx(DialogTriggerBase, { type: type, state: state, isDismissable: isDismissable, trigger: trigger, overlay: renderOverlay(), onClose: onClose }));
|
|
68
68
|
}
|
|
69
69
|
/**
|
|
70
70
|
* DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
|
|
@@ -74,10 +74,10 @@ function DialogTrigger(props) {
|
|
|
74
74
|
let _DialogTrigger = DialogTrigger;
|
|
75
75
|
export { _DialogTrigger as DialogTrigger };
|
|
76
76
|
function PopoverTrigger(allProps) {
|
|
77
|
-
let { state, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, ...props } = allProps;
|
|
77
|
+
let { state, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, hideOnClose, ...props } = allProps;
|
|
78
78
|
let triggerRef = useRef(null);
|
|
79
79
|
let overlayRef = useRef(null);
|
|
80
|
-
let { overlayProps: popoverProps, placement, arrowProps, } = useOverlayPosition({
|
|
80
|
+
let { overlayProps: popoverProps, placement, arrowProps, updatePosition, } = useOverlayPosition({
|
|
81
81
|
targetRef: targetRef || triggerRef,
|
|
82
82
|
overlayRef: overlayRef,
|
|
83
83
|
placement: props.placement,
|
|
@@ -92,8 +92,8 @@ function PopoverTrigger(allProps) {
|
|
|
92
92
|
...triggerProps,
|
|
93
93
|
ref: targetRef ? undefined : triggerRef,
|
|
94
94
|
};
|
|
95
|
-
let overlay = (_jsx(Popover, { ref: overlayRef, isOpen: state.isOpen, style: popoverProps.style, placement: placement, arrowProps: arrowProps, isKeyboardDismissDisabled: isKeyboardDismissDisabled, hideArrow: hideArrow, onClose: onClose, children: typeof content === 'function' ? content(state.close) : content }
|
|
96
|
-
return (_jsx(DialogTriggerBase, { type: "popover", state: state, triggerProps: triggerPropsWithRef, dialogProps: overlayProps, trigger: trigger, overlay: overlay, onClose: onClose }
|
|
95
|
+
let overlay = (_jsx(Popover, { ref: overlayRef, hideOnClose: hideOnClose, isOpen: state.isOpen, style: popoverProps.style, placement: placement, arrowProps: arrowProps, isKeyboardDismissDisabled: isKeyboardDismissDisabled, hideArrow: hideArrow, updatePosition: updatePosition, onClose: onClose, children: typeof content === 'function' ? content(state.close) : content }));
|
|
96
|
+
return (_jsx(DialogTriggerBase, { type: "popover", state: state, triggerProps: triggerPropsWithRef, dialogProps: overlayProps, trigger: trigger, overlay: overlay, onClose: onClose }));
|
|
97
97
|
}
|
|
98
98
|
function DialogTriggerBase(props) {
|
|
99
99
|
let { type, state, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger, } = props;
|
|
@@ -106,7 +106,7 @@ function DialogTriggerBase(props) {
|
|
|
106
106
|
return (_jsxs(Fragment, { children: [_jsx(PressResponder, { ...triggerProps, isPressed: state.isOpen &&
|
|
107
107
|
type !== 'modal' &&
|
|
108
108
|
type !== 'fullscreen' &&
|
|
109
|
-
type !== 'fullscreenTakeover', onPress: state.toggle, children: trigger }
|
|
109
|
+
type !== 'fullscreenTakeover', onPress: state.toggle, children: trigger }), _jsx(DialogContext.Provider, { value: context, children: overlay })] }));
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
|