@activecollab/components 2.0.497 → 2.0.499
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/cjs/components/Button/AddToListButton/AddToListButton.js +13 -1
- package/dist/cjs/components/Button/AddToListButton/AddToListButton.js.map +1 -1
- package/dist/cjs/components/Button/AddToListButton/Styles.js +16 -1
- package/dist/cjs/components/Button/AddToListButton/Styles.js.map +1 -1
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js +5 -2
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/cjs/components/ButtonGroup/Styles.js +11 -7
- package/dist/cjs/components/ButtonGroup/Styles.js.map +1 -1
- package/dist/cjs/components/Card/Card.js +9 -2
- package/dist/cjs/components/Card/Card.js.map +1 -1
- package/dist/cjs/components/Card/Styles.js +6 -1
- package/dist/cjs/components/Card/Styles.js.map +1 -1
- package/dist/cjs/components/Chip/Chip.js +21 -6
- package/dist/cjs/components/Chip/Chip.js.map +1 -1
- package/dist/cjs/components/Chip/ChipGroup.js +27 -0
- package/dist/cjs/components/Chip/ChipGroup.js.map +1 -0
- package/dist/cjs/components/Chip/ChipGroupStyles.js +17 -0
- package/dist/cjs/components/Chip/ChipGroupStyles.js.map +1 -0
- package/dist/cjs/components/Chip/Styles.js +55 -19
- package/dist/cjs/components/Chip/Styles.js.map +1 -1
- package/dist/cjs/components/Chip/index.js +11 -0
- package/dist/cjs/components/Chip/index.js.map +1 -1
- package/dist/cjs/components/ClampedContent/ClampedContent.js +131 -0
- package/dist/cjs/components/ClampedContent/ClampedContent.js.map +1 -0
- package/dist/cjs/components/ClampedContent/Styles.js +28 -0
- package/dist/cjs/components/ClampedContent/Styles.js.map +1 -0
- package/dist/cjs/components/ClampedContent/index.js +17 -0
- package/dist/cjs/components/ClampedContent/index.js.map +1 -0
- package/dist/cjs/components/Collapse/Collapse.js +93 -0
- package/dist/cjs/components/Collapse/Collapse.js.map +1 -0
- package/dist/cjs/components/Collapse/Styles.js +26 -0
- package/dist/cjs/components/Collapse/Styles.js.map +1 -0
- package/dist/cjs/components/Collapse/index.js +17 -0
- package/dist/cjs/components/Collapse/index.js.map +1 -0
- package/dist/cjs/components/ComboBox/ComboBox.js +5 -2
- package/dist/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js +24 -2
- package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js.map +1 -1
- package/dist/cjs/components/CompleteCheckbox/Styles.js +17 -1
- package/dist/cjs/components/CompleteCheckbox/Styles.js.map +1 -1
- package/dist/cjs/components/DockedCard/DockedCard.js +68 -0
- package/dist/cjs/components/DockedCard/DockedCard.js.map +1 -0
- package/dist/cjs/components/DockedCard/Styles.js +36 -0
- package/dist/cjs/components/DockedCard/Styles.js.map +1 -0
- package/dist/cjs/components/DockedCard/index.js +28 -0
- package/dist/cjs/components/DockedCard/index.js.map +1 -0
- package/dist/cjs/components/DockedCard/useDockedCard.js +236 -0
- package/dist/cjs/components/DockedCard/useDockedCard.js.map +1 -0
- package/dist/cjs/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/cjs/components/EditorFrame/EditorFrame.js +51 -0
- package/dist/cjs/components/EditorFrame/EditorFrame.js.map +1 -0
- package/dist/cjs/components/EditorFrame/Styles.js +29 -0
- package/dist/cjs/components/EditorFrame/Styles.js.map +1 -0
- package/dist/cjs/components/EditorFrame/index.js +17 -0
- package/dist/cjs/components/EditorFrame/index.js.map +1 -0
- package/dist/cjs/components/EmptySlate/EmptySlate.js +19 -9
- package/dist/cjs/components/EmptySlate/EmptySlate.js.map +1 -1
- package/dist/cjs/components/EmptySlate/EmptySlate.styles.js +20 -6
- package/dist/cjs/components/EmptySlate/EmptySlate.styles.js.map +1 -1
- package/dist/cjs/components/FileTile/FileTile.js +138 -0
- package/dist/cjs/components/FileTile/FileTile.js.map +1 -0
- package/dist/cjs/components/FileTile/Styles.js +71 -0
- package/dist/cjs/components/FileTile/Styles.js.map +1 -0
- package/dist/cjs/components/FileTile/index.js +17 -0
- package/dist/cjs/components/FileTile/index.js.map +1 -0
- package/dist/cjs/components/FloatingPill/FloatingPill.js +33 -0
- package/dist/cjs/components/FloatingPill/FloatingPill.js.map +1 -0
- package/dist/cjs/components/FloatingPill/Styles.js +16 -0
- package/dist/cjs/components/FloatingPill/Styles.js.map +1 -0
- package/dist/cjs/components/FloatingPill/index.js +17 -0
- package/dist/cjs/components/FloatingPill/index.js.map +1 -0
- package/dist/cjs/components/Icons/collection/FlagFilled.js +71 -0
- package/dist/cjs/components/Icons/collection/FlagFilled.js.map +1 -0
- package/dist/cjs/components/Icons/collection/FlagOutline.js +72 -0
- package/dist/cjs/components/Icons/collection/FlagOutline.js.map +1 -0
- package/dist/cjs/components/Icons/collection/LayoutColumn.js +70 -0
- package/dist/cjs/components/Icons/collection/LayoutColumn.js.map +1 -0
- package/dist/cjs/components/Icons/collection/LayoutSidebar.js +68 -0
- package/dist/cjs/components/Icons/collection/LayoutSidebar.js.map +1 -0
- package/dist/cjs/components/Icons/collection/LayoutWide.js +70 -0
- package/dist/cjs/components/Icons/collection/LayoutWide.js.map +1 -0
- package/dist/cjs/components/Icons/collection/index.js +35 -0
- package/dist/cjs/components/Icons/collection/index.js.map +1 -1
- package/dist/cjs/components/LabeledDivider/LabeledDivider.js +39 -0
- package/dist/cjs/components/LabeledDivider/LabeledDivider.js.map +1 -0
- package/dist/cjs/components/LabeledDivider/Styles.js +27 -0
- package/dist/cjs/components/LabeledDivider/Styles.js.map +1 -0
- package/dist/cjs/components/LabeledDivider/index.js +17 -0
- package/dist/cjs/components/LabeledDivider/index.js.map +1 -0
- package/dist/cjs/components/ListRow/ListRow.js +48 -0
- package/dist/cjs/components/ListRow/ListRow.js.map +1 -0
- package/dist/cjs/components/ListRow/Styles.js +25 -0
- package/dist/cjs/components/ListRow/Styles.js.map +1 -0
- package/dist/cjs/components/ListRow/index.js +17 -0
- package/dist/cjs/components/ListRow/index.js.map +1 -0
- package/dist/cjs/components/Loaders/Skeleton/SkeletonLoader.js +11 -2
- package/dist/cjs/components/Loaders/Skeleton/SkeletonLoader.js.map +1 -1
- package/dist/cjs/components/Loaders/Skeleton/Styles.js +13 -1
- package/dist/cjs/components/Loaders/Skeleton/Styles.js.map +1 -1
- package/dist/cjs/components/Menu/Menu.js +4 -1
- package/dist/cjs/components/Menu/Menu.js.map +1 -1
- package/dist/cjs/components/Menu/MenuFooter.js +18 -2
- package/dist/cjs/components/Menu/MenuFooter.js.map +1 -1
- package/dist/cjs/components/Menu/Styles.js +9 -3
- package/dist/cjs/components/Menu/Styles.js.map +1 -1
- package/dist/cjs/components/MessageBubble/MessageBubble.js +78 -0
- package/dist/cjs/components/MessageBubble/MessageBubble.js.map +1 -0
- package/dist/cjs/components/MessageBubble/Styles.js +56 -0
- package/dist/cjs/components/MessageBubble/Styles.js.map +1 -0
- package/dist/cjs/components/MessageBubble/index.js +17 -0
- package/dist/cjs/components/MessageBubble/index.js.map +1 -0
- package/dist/cjs/components/ObjectLayout/ObjectLayout.js +184 -0
- package/dist/cjs/components/ObjectLayout/ObjectLayout.js.map +1 -0
- package/dist/cjs/components/ObjectLayout/Styles.js +83 -0
- package/dist/cjs/components/ObjectLayout/Styles.js.map +1 -0
- package/dist/cjs/components/ObjectLayout/index.js +17 -0
- package/dist/cjs/components/ObjectLayout/index.js.map +1 -0
- package/dist/cjs/components/ProgressBar/ProgressBar.js +14 -3
- package/dist/cjs/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/cjs/components/ProgressBar/Styles.js +8 -2
- package/dist/cjs/components/ProgressBar/Styles.js.map +1 -1
- package/dist/cjs/components/PropertyList/PropertyList.js +186 -0
- package/dist/cjs/components/PropertyList/PropertyList.js.map +1 -0
- package/dist/cjs/components/PropertyList/Styles.js +104 -0
- package/dist/cjs/components/PropertyList/Styles.js.map +1 -0
- package/dist/cjs/components/PropertyList/index.js +17 -0
- package/dist/cjs/components/PropertyList/index.js.map +1 -0
- package/dist/cjs/components/ResizeHandle/ResizeHandle.js +38 -0
- package/dist/cjs/components/ResizeHandle/ResizeHandle.js.map +1 -0
- package/dist/cjs/components/ResizeHandle/Styles.js +26 -0
- package/dist/cjs/components/ResizeHandle/Styles.js.map +1 -0
- package/dist/cjs/components/ResizeHandle/index.js +17 -0
- package/dist/cjs/components/ResizeHandle/index.js.map +1 -0
- package/dist/cjs/components/Section/Section.js +49 -0
- package/dist/cjs/components/Section/Section.js.map +1 -0
- package/dist/cjs/components/Section/Styles.js +29 -0
- package/dist/cjs/components/Section/Styles.js.map +1 -0
- package/dist/cjs/components/Section/index.js +17 -0
- package/dist/cjs/components/Section/index.js.map +1 -0
- package/dist/cjs/components/Sheet/Sheet.js +8 -3
- package/dist/cjs/components/Sheet/Sheet.js.map +1 -1
- package/dist/cjs/components/Sheet/Styles.js +8 -2
- package/dist/cjs/components/Sheet/Styles.js.map +1 -1
- package/dist/cjs/components/Typography/Styles.js +11 -1
- package/dist/cjs/components/Typography/Styles.js.map +1 -1
- package/dist/cjs/components/Typography/Typography.js.map +1 -1
- package/dist/cjs/components/Typography/Variants/Title3.js +26 -0
- package/dist/cjs/components/Typography/Variants/Title3.js.map +1 -0
- package/dist/cjs/components/Typography/index.js +11 -0
- package/dist/cjs/components/Typography/index.js.map +1 -1
- package/dist/cjs/components/index.js +143 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/hooks/index.js +22 -0
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useLongPress.js +97 -0
- package/dist/cjs/hooks/useLongPress.js.map +1 -0
- package/dist/cjs/hooks/useResizablePanel.js +120 -0
- package/dist/cjs/hooks/useResizablePanel.js.map +1 -0
- package/dist/cjs/utils/useContainerCss.js +19 -0
- package/dist/cjs/utils/useContainerCss.js.map +1 -0
- package/dist/esm/components/Button/AddToListButton/AddToListButton.d.ts +5 -1
- package/dist/esm/components/Button/AddToListButton/AddToListButton.d.ts.map +1 -1
- package/dist/esm/components/Button/AddToListButton/AddToListButton.js +14 -2
- package/dist/esm/components/Button/AddToListButton/AddToListButton.js.map +1 -1
- package/dist/esm/components/Button/AddToListButton/Styles.d.ts +3 -0
- package/dist/esm/components/Button/AddToListButton/Styles.d.ts.map +1 -1
- package/dist/esm/components/Button/AddToListButton/Styles.js +15 -0
- package/dist/esm/components/Button/AddToListButton/Styles.js.map +1 -1
- package/dist/esm/components/ButtonGroup/ButtonGroup.d.ts +2 -0
- package/dist/esm/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/esm/components/ButtonGroup/ButtonGroup.js +5 -2
- package/dist/esm/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/esm/components/ButtonGroup/Styles.d.ts +1 -0
- package/dist/esm/components/ButtonGroup/Styles.d.ts.map +1 -1
- package/dist/esm/components/ButtonGroup/Styles.js +9 -7
- package/dist/esm/components/ButtonGroup/Styles.js.map +1 -1
- package/dist/esm/components/Card/Card.d.ts +5 -1
- package/dist/esm/components/Card/Card.d.ts.map +1 -1
- package/dist/esm/components/Card/Card.js +9 -2
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Card/Styles.d.ts +3 -0
- package/dist/esm/components/Card/Styles.d.ts.map +1 -1
- package/dist/esm/components/Card/Styles.js +6 -1
- package/dist/esm/components/Card/Styles.js.map +1 -1
- package/dist/esm/components/Chip/Chip.d.ts +13 -1
- package/dist/esm/components/Chip/Chip.d.ts.map +1 -1
- package/dist/esm/components/Chip/Chip.js +21 -6
- package/dist/esm/components/Chip/Chip.js.map +1 -1
- package/dist/esm/components/Chip/ChipGroup.d.ts +7 -0
- package/dist/esm/components/Chip/ChipGroup.d.ts.map +1 -0
- package/dist/esm/components/Chip/ChipGroup.js +19 -0
- package/dist/esm/components/Chip/ChipGroup.js.map +1 -0
- package/dist/esm/components/Chip/ChipGroupStyles.d.ts +4 -0
- package/dist/esm/components/Chip/ChipGroupStyles.d.ts.map +1 -0
- package/dist/esm/components/Chip/ChipGroupStyles.js +8 -0
- package/dist/esm/components/Chip/ChipGroupStyles.js.map +1 -0
- package/dist/esm/components/Chip/Styles.d.ts +9 -3
- package/dist/esm/components/Chip/Styles.d.ts.map +1 -1
- package/dist/esm/components/Chip/Styles.js +36 -13
- package/dist/esm/components/Chip/Styles.js.map +1 -1
- package/dist/esm/components/Chip/index.d.ts +1 -0
- package/dist/esm/components/Chip/index.d.ts.map +1 -1
- package/dist/esm/components/Chip/index.js +1 -0
- package/dist/esm/components/Chip/index.js.map +1 -1
- package/dist/esm/components/ClampedContent/ClampedContent.d.ts +18 -0
- package/dist/esm/components/ClampedContent/ClampedContent.d.ts.map +1 -0
- package/dist/esm/components/ClampedContent/ClampedContent.js +109 -0
- package/dist/esm/components/ClampedContent/ClampedContent.js.map +1 -0
- package/dist/esm/components/ClampedContent/Styles.d.ts +8 -0
- package/dist/esm/components/ClampedContent/Styles.d.ts.map +1 -0
- package/dist/esm/components/ClampedContent/Styles.js +21 -0
- package/dist/esm/components/ClampedContent/Styles.js.map +1 -0
- package/dist/esm/components/ClampedContent/index.d.ts +2 -0
- package/dist/esm/components/ClampedContent/index.d.ts.map +1 -0
- package/dist/esm/components/ClampedContent/index.js +2 -0
- package/dist/esm/components/ClampedContent/index.js.map +1 -0
- package/dist/esm/components/Collapse/Collapse.d.ts +15 -0
- package/dist/esm/components/Collapse/Collapse.d.ts.map +1 -0
- package/dist/esm/components/Collapse/Collapse.js +68 -0
- package/dist/esm/components/Collapse/Collapse.js.map +1 -0
- package/dist/esm/components/Collapse/Styles.d.ts +8 -0
- package/dist/esm/components/Collapse/Styles.d.ts.map +1 -0
- package/dist/esm/components/Collapse/Styles.js +19 -0
- package/dist/esm/components/Collapse/Styles.js.map +1 -0
- package/dist/esm/components/Collapse/index.d.ts +2 -0
- package/dist/esm/components/Collapse/index.d.ts.map +1 -0
- package/dist/esm/components/Collapse/index.js +2 -0
- package/dist/esm/components/Collapse/index.js.map +1 -0
- package/dist/esm/components/ComboBox/ComboBox.d.ts +2 -0
- package/dist/esm/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/esm/components/ComboBox/ComboBox.js +5 -2
- package/dist/esm/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.d.ts +9 -1
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.d.ts.map +1 -1
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js +24 -2
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js.map +1 -1
- package/dist/esm/components/CompleteCheckbox/Styles.d.ts +4 -0
- package/dist/esm/components/CompleteCheckbox/Styles.d.ts.map +1 -1
- package/dist/esm/components/CompleteCheckbox/Styles.js +16 -0
- package/dist/esm/components/CompleteCheckbox/Styles.js.map +1 -1
- package/dist/esm/components/DockedCard/DockedCard.d.ts +26 -0
- package/dist/esm/components/DockedCard/DockedCard.d.ts.map +1 -0
- package/dist/esm/components/DockedCard/DockedCard.js +54 -0
- package/dist/esm/components/DockedCard/DockedCard.js.map +1 -0
- package/dist/esm/components/DockedCard/Styles.d.ts +9 -0
- package/dist/esm/components/DockedCard/Styles.d.ts.map +1 -0
- package/dist/esm/components/DockedCard/Styles.js +29 -0
- package/dist/esm/components/DockedCard/Styles.js.map +1 -0
- package/dist/esm/components/DockedCard/index.d.ts +3 -0
- package/dist/esm/components/DockedCard/index.d.ts.map +1 -0
- package/dist/esm/components/DockedCard/index.js +3 -0
- package/dist/esm/components/DockedCard/index.js.map +1 -0
- package/dist/esm/components/DockedCard/useDockedCard.d.ts +37 -0
- package/dist/esm/components/DockedCard/useDockedCard.d.ts.map +1 -0
- package/dist/esm/components/DockedCard/useDockedCard.js +194 -0
- package/dist/esm/components/DockedCard/useDockedCard.js.map +1 -0
- package/dist/esm/components/EditableContent/EditableContent.d.ts +1 -1
- package/dist/esm/components/EditableContent/EditableContent.d.ts.map +1 -1
- package/dist/esm/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/esm/components/EditorFrame/EditorFrame.d.ts +14 -0
- package/dist/esm/components/EditorFrame/EditorFrame.d.ts.map +1 -0
- package/dist/esm/components/EditorFrame/EditorFrame.js +42 -0
- package/dist/esm/components/EditorFrame/EditorFrame.js.map +1 -0
- package/dist/esm/components/EditorFrame/Styles.d.ts +13 -0
- package/dist/esm/components/EditorFrame/Styles.d.ts.map +1 -0
- package/dist/esm/components/EditorFrame/Styles.js +22 -0
- package/dist/esm/components/EditorFrame/Styles.js.map +1 -0
- package/dist/esm/components/EditorFrame/index.d.ts +2 -0
- package/dist/esm/components/EditorFrame/index.d.ts.map +1 -0
- package/dist/esm/components/EditorFrame/index.js +2 -0
- package/dist/esm/components/EditorFrame/index.js.map +1 -0
- package/dist/esm/components/EmptySlate/EmptySlate.d.ts +9 -4
- package/dist/esm/components/EmptySlate/EmptySlate.d.ts.map +1 -1
- package/dist/esm/components/EmptySlate/EmptySlate.js +19 -9
- package/dist/esm/components/EmptySlate/EmptySlate.js.map +1 -1
- package/dist/esm/components/EmptySlate/EmptySlate.styles.d.ts +8 -4
- package/dist/esm/components/EmptySlate/EmptySlate.styles.d.ts.map +1 -1
- package/dist/esm/components/EmptySlate/EmptySlate.styles.js +5 -5
- package/dist/esm/components/EmptySlate/EmptySlate.styles.js.map +1 -1
- package/dist/esm/components/FileTile/FileTile.d.ts +63 -0
- package/dist/esm/components/FileTile/FileTile.d.ts.map +1 -0
- package/dist/esm/components/FileTile/FileTile.js +129 -0
- package/dist/esm/components/FileTile/FileTile.js.map +1 -0
- package/dist/esm/components/FileTile/Styles.d.ts +19 -0
- package/dist/esm/components/FileTile/Styles.d.ts.map +1 -0
- package/dist/esm/components/FileTile/Styles.js +64 -0
- package/dist/esm/components/FileTile/Styles.js.map +1 -0
- package/dist/esm/components/FileTile/index.d.ts +2 -0
- package/dist/esm/components/FileTile/index.d.ts.map +1 -0
- package/dist/esm/components/FileTile/index.js +2 -0
- package/dist/esm/components/FileTile/index.js.map +1 -0
- package/dist/esm/components/FloatingPill/FloatingPill.d.ts +9 -0
- package/dist/esm/components/FloatingPill/FloatingPill.d.ts.map +1 -0
- package/dist/esm/components/FloatingPill/FloatingPill.js +24 -0
- package/dist/esm/components/FloatingPill/FloatingPill.js.map +1 -0
- package/dist/esm/components/FloatingPill/Styles.d.ts +4 -0
- package/dist/esm/components/FloatingPill/Styles.d.ts.map +1 -0
- package/dist/esm/components/FloatingPill/Styles.js +9 -0
- package/dist/esm/components/FloatingPill/Styles.js.map +1 -0
- package/dist/esm/components/FloatingPill/index.d.ts +2 -0
- package/dist/esm/components/FloatingPill/index.d.ts.map +1 -0
- package/dist/esm/components/FloatingPill/index.js +2 -0
- package/dist/esm/components/FloatingPill/index.js.map +1 -0
- package/dist/esm/components/Icons/collection/FlagFilled.d.ts +32 -0
- package/dist/esm/components/Icons/collection/FlagFilled.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/FlagFilled.js +64 -0
- package/dist/esm/components/Icons/collection/FlagFilled.js.map +1 -0
- package/dist/esm/components/Icons/collection/FlagOutline.d.ts +32 -0
- package/dist/esm/components/Icons/collection/FlagOutline.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/FlagOutline.js +65 -0
- package/dist/esm/components/Icons/collection/FlagOutline.js.map +1 -0
- package/dist/esm/components/Icons/collection/LayoutColumn.d.ts +32 -0
- package/dist/esm/components/Icons/collection/LayoutColumn.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/LayoutColumn.js +63 -0
- package/dist/esm/components/Icons/collection/LayoutColumn.js.map +1 -0
- package/dist/esm/components/Icons/collection/LayoutSidebar.d.ts +32 -0
- package/dist/esm/components/Icons/collection/LayoutSidebar.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/LayoutSidebar.js +61 -0
- package/dist/esm/components/Icons/collection/LayoutSidebar.js.map +1 -0
- package/dist/esm/components/Icons/collection/LayoutWide.d.ts +32 -0
- package/dist/esm/components/Icons/collection/LayoutWide.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/LayoutWide.js +63 -0
- package/dist/esm/components/Icons/collection/LayoutWide.js.map +1 -0
- package/dist/esm/components/Icons/collection/index.d.ts +5 -0
- package/dist/esm/components/Icons/collection/index.d.ts.map +1 -1
- package/dist/esm/components/Icons/collection/index.js +5 -0
- package/dist/esm/components/Icons/collection/index.js.map +1 -1
- package/dist/esm/components/LabeledDivider/LabeledDivider.d.ts +11 -0
- package/dist/esm/components/LabeledDivider/LabeledDivider.d.ts.map +1 -0
- package/dist/esm/components/LabeledDivider/LabeledDivider.js +30 -0
- package/dist/esm/components/LabeledDivider/LabeledDivider.js.map +1 -0
- package/dist/esm/components/LabeledDivider/Styles.d.ts +10 -0
- package/dist/esm/components/LabeledDivider/Styles.d.ts.map +1 -0
- package/dist/esm/components/LabeledDivider/Styles.js +20 -0
- package/dist/esm/components/LabeledDivider/Styles.js.map +1 -0
- package/dist/esm/components/LabeledDivider/index.d.ts +2 -0
- package/dist/esm/components/LabeledDivider/index.d.ts.map +1 -0
- package/dist/esm/components/LabeledDivider/index.js +2 -0
- package/dist/esm/components/LabeledDivider/index.js.map +1 -0
- package/dist/esm/components/ListRow/ListRow.d.ts +19 -0
- package/dist/esm/components/ListRow/ListRow.d.ts.map +1 -0
- package/dist/esm/components/ListRow/ListRow.js +39 -0
- package/dist/esm/components/ListRow/ListRow.js.map +1 -0
- package/dist/esm/components/ListRow/Styles.d.ts +7 -0
- package/dist/esm/components/ListRow/Styles.d.ts.map +1 -0
- package/dist/esm/components/ListRow/Styles.js +18 -0
- package/dist/esm/components/ListRow/Styles.js.map +1 -0
- package/dist/esm/components/ListRow/index.d.ts +2 -0
- package/dist/esm/components/ListRow/index.d.ts.map +1 -0
- package/dist/esm/components/ListRow/index.js +2 -0
- package/dist/esm/components/ListRow/index.js.map +1 -0
- package/dist/esm/components/Loaders/Skeleton/SkeletonLoader.d.ts +11 -1
- package/dist/esm/components/Loaders/Skeleton/SkeletonLoader.d.ts.map +1 -1
- package/dist/esm/components/Loaders/Skeleton/SkeletonLoader.js +11 -2
- package/dist/esm/components/Loaders/Skeleton/SkeletonLoader.js.map +1 -1
- package/dist/esm/components/Loaders/Skeleton/Styles.d.ts +8 -1
- package/dist/esm/components/Loaders/Skeleton/Styles.d.ts.map +1 -1
- package/dist/esm/components/Loaders/Skeleton/Styles.js +4 -2
- package/dist/esm/components/Loaders/Skeleton/Styles.js.map +1 -1
- package/dist/esm/components/Menu/Menu.d.ts +2 -0
- package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
- package/dist/esm/components/Menu/Menu.js +4 -1
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/MenuFooter.d.ts +12 -0
- package/dist/esm/components/Menu/MenuFooter.d.ts.map +1 -1
- package/dist/esm/components/Menu/MenuFooter.js +17 -3
- package/dist/esm/components/Menu/MenuFooter.js.map +1 -1
- package/dist/esm/components/Menu/Styles.d.ts +4 -1
- package/dist/esm/components/Menu/Styles.d.ts.map +1 -1
- package/dist/esm/components/Menu/Styles.js +7 -3
- package/dist/esm/components/Menu/Styles.js.map +1 -1
- package/dist/esm/components/MessageBubble/MessageBubble.d.ts +29 -0
- package/dist/esm/components/MessageBubble/MessageBubble.d.ts.map +1 -0
- package/dist/esm/components/MessageBubble/MessageBubble.js +69 -0
- package/dist/esm/components/MessageBubble/MessageBubble.js.map +1 -0
- package/dist/esm/components/MessageBubble/Styles.d.ts +16 -0
- package/dist/esm/components/MessageBubble/Styles.d.ts.map +1 -0
- package/dist/esm/components/MessageBubble/Styles.js +51 -0
- package/dist/esm/components/MessageBubble/Styles.js.map +1 -0
- package/dist/esm/components/MessageBubble/index.d.ts +2 -0
- package/dist/esm/components/MessageBubble/index.d.ts.map +1 -0
- package/dist/esm/components/MessageBubble/index.js +2 -0
- package/dist/esm/components/MessageBubble/index.js.map +1 -0
- package/dist/esm/components/ObjectLayout/ObjectLayout.d.ts +32 -0
- package/dist/esm/components/ObjectLayout/ObjectLayout.d.ts.map +1 -0
- package/dist/esm/components/ObjectLayout/ObjectLayout.js +162 -0
- package/dist/esm/components/ObjectLayout/ObjectLayout.js.map +1 -0
- package/dist/esm/components/ObjectLayout/Styles.d.ts +25 -0
- package/dist/esm/components/ObjectLayout/Styles.d.ts.map +1 -0
- package/dist/esm/components/ObjectLayout/Styles.js +76 -0
- package/dist/esm/components/ObjectLayout/Styles.js.map +1 -0
- package/dist/esm/components/ObjectLayout/index.d.ts +2 -0
- package/dist/esm/components/ObjectLayout/index.d.ts.map +1 -0
- package/dist/esm/components/ObjectLayout/index.js +2 -0
- package/dist/esm/components/ObjectLayout/index.js.map +1 -0
- package/dist/esm/components/ProgressBar/ProgressBar.d.ts +9 -2
- package/dist/esm/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.js +14 -3
- package/dist/esm/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/esm/components/ProgressBar/Styles.d.ts +2 -0
- package/dist/esm/components/ProgressBar/Styles.d.ts.map +1 -1
- package/dist/esm/components/ProgressBar/Styles.js +2 -2
- package/dist/esm/components/ProgressBar/Styles.js.map +1 -1
- package/dist/esm/components/PropertyList/PropertyList.d.ts +59 -0
- package/dist/esm/components/PropertyList/PropertyList.d.ts.map +1 -0
- package/dist/esm/components/PropertyList/PropertyList.js +171 -0
- package/dist/esm/components/PropertyList/PropertyList.js.map +1 -0
- package/dist/esm/components/PropertyList/Styles.d.ts +35 -0
- package/dist/esm/components/PropertyList/Styles.d.ts.map +1 -0
- package/dist/esm/components/PropertyList/Styles.js +97 -0
- package/dist/esm/components/PropertyList/Styles.js.map +1 -0
- package/dist/esm/components/PropertyList/index.d.ts +2 -0
- package/dist/esm/components/PropertyList/index.d.ts.map +1 -0
- package/dist/esm/components/PropertyList/index.js +2 -0
- package/dist/esm/components/PropertyList/index.js.map +1 -0
- package/dist/esm/components/ResizeHandle/ResizeHandle.d.ts +11 -0
- package/dist/esm/components/ResizeHandle/ResizeHandle.d.ts.map +1 -0
- package/dist/esm/components/ResizeHandle/ResizeHandle.js +29 -0
- package/dist/esm/components/ResizeHandle/ResizeHandle.js.map +1 -0
- package/dist/esm/components/ResizeHandle/Styles.d.ts +7 -0
- package/dist/esm/components/ResizeHandle/Styles.d.ts.map +1 -0
- package/dist/esm/components/ResizeHandle/Styles.js +19 -0
- package/dist/esm/components/ResizeHandle/Styles.js.map +1 -0
- package/dist/esm/components/ResizeHandle/index.d.ts +2 -0
- package/dist/esm/components/ResizeHandle/index.d.ts.map +1 -0
- package/dist/esm/components/ResizeHandle/index.js +2 -0
- package/dist/esm/components/ResizeHandle/index.js.map +1 -0
- package/dist/esm/components/Section/Section.d.ts +13 -0
- package/dist/esm/components/Section/Section.d.ts.map +1 -0
- package/dist/esm/components/Section/Section.js +40 -0
- package/dist/esm/components/Section/Section.js.map +1 -0
- package/dist/esm/components/Section/Styles.d.ts +6 -0
- package/dist/esm/components/Section/Styles.d.ts.map +1 -0
- package/dist/esm/components/Section/Styles.js +22 -0
- package/dist/esm/components/Section/Styles.js.map +1 -0
- package/dist/esm/components/Section/index.d.ts +2 -0
- package/dist/esm/components/Section/index.d.ts.map +1 -0
- package/dist/esm/components/Section/index.js +2 -0
- package/dist/esm/components/Section/index.js.map +1 -0
- package/dist/esm/components/Sheet/Sheet.d.ts +4 -0
- package/dist/esm/components/Sheet/Sheet.d.ts.map +1 -1
- package/dist/esm/components/Sheet/Sheet.js +8 -3
- package/dist/esm/components/Sheet/Sheet.js.map +1 -1
- package/dist/esm/components/Sheet/Styles.d.ts +2 -0
- package/dist/esm/components/Sheet/Styles.d.ts.map +1 -1
- package/dist/esm/components/Sheet/Styles.js +6 -2
- package/dist/esm/components/Sheet/Styles.js.map +1 -1
- package/dist/esm/components/Steppers/DateStepper/Styles.d.ts +1 -0
- package/dist/esm/components/Steppers/DateStepper/Styles.d.ts.map +1 -1
- package/dist/esm/components/Typography/Styles.d.ts +2 -2
- package/dist/esm/components/Typography/Styles.d.ts.map +1 -1
- package/dist/esm/components/Typography/Styles.js +6 -2
- package/dist/esm/components/Typography/Styles.js.map +1 -1
- package/dist/esm/components/Typography/Typography.d.ts +2 -2
- package/dist/esm/components/Typography/Typography.d.ts.map +1 -1
- package/dist/esm/components/Typography/Typography.js.map +1 -1
- package/dist/esm/components/Typography/Variants/Title3.d.ts +8 -0
- package/dist/esm/components/Typography/Variants/Title3.d.ts.map +1 -0
- package/dist/esm/components/Typography/Variants/Title3.js +18 -0
- package/dist/esm/components/Typography/Variants/Title3.js.map +1 -0
- package/dist/esm/components/Typography/index.d.ts +1 -0
- package/dist/esm/components/Typography/index.d.ts.map +1 -1
- package/dist/esm/components/Typography/index.js +1 -0
- package/dist/esm/components/Typography/index.js.map +1 -1
- package/dist/esm/components/index.d.ts +13 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +13 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/hooks/index.d.ts +2 -0
- package/dist/esm/hooks/index.d.ts.map +1 -1
- package/dist/esm/hooks/index.js +2 -0
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/hooks/useLongPress.d.ts +23 -0
- package/dist/esm/hooks/useLongPress.d.ts.map +1 -0
- package/dist/esm/hooks/useLongPress.js +82 -0
- package/dist/esm/hooks/useLongPress.js.map +1 -0
- package/dist/esm/hooks/useResizablePanel.d.ts +27 -0
- package/dist/esm/hooks/useResizablePanel.d.ts.map +1 -0
- package/dist/esm/hooks/useResizablePanel.js +98 -0
- package/dist/esm/hooks/useResizablePanel.js.map +1 -0
- package/dist/esm/utils/useContainerCss.d.ts +2 -0
- package/dist/esm/utils/useContainerCss.d.ts.map +1 -0
- package/dist/esm/utils/useContainerCss.js +12 -0
- package/dist/esm/utils/useContainerCss.js.map +1 -0
- package/dist/index.js +3307 -881
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/DockedCard/index.ts"],"sourcesContent":["export * from \"./DockedCard\";\nexport * from \"./useDockedCard\";\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,iBAAiB","ignoreList":[]}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
/** The closest ancestor that scrolls. The full page scrolls the document. */
|
|
3
|
+
export declare const getScrollParent: (node?: Element | null) => HTMLElement;
|
|
4
|
+
export interface UseDockedCardOptions {
|
|
5
|
+
cardRef: RefObject<HTMLElement>;
|
|
6
|
+
open: boolean;
|
|
7
|
+
onOpenChange: (open: boolean) => void;
|
|
8
|
+
/** Set to false where the card is not docked. It then never opens and has no top limit. */
|
|
9
|
+
enabled?: boolean;
|
|
10
|
+
/** The time of the move, in milliseconds. */
|
|
11
|
+
duration?: number;
|
|
12
|
+
/** The height of the closed card that stays above the edge, in pixels. */
|
|
13
|
+
peek?: number;
|
|
14
|
+
/** The element whose bottom edge the open card must not pass. */
|
|
15
|
+
getTopLimit?: () => Element | null | undefined;
|
|
16
|
+
/** Called on Escape while the card is open. Without it Escape closes the card. */
|
|
17
|
+
onEscape?: () => void;
|
|
18
|
+
/** True while something in the card, such as an open menu, must take Escape itself. */
|
|
19
|
+
isBusy?: (card: HTMLElement) => boolean;
|
|
20
|
+
}
|
|
21
|
+
/** The moves of a docked card: its offset, its open state, the dim, the Escape key and the frozen scroll. */
|
|
22
|
+
export declare const useDockedCard: ({ cardRef, open, onOpenChange, enabled, duration, peek, getTopLimit, onEscape, isBusy, }: UseDockedCardOptions) => {
|
|
23
|
+
setOpen: (next: boolean) => void;
|
|
24
|
+
moving: boolean;
|
|
25
|
+
/** The card and its dim cover the page while the card is open or on its way. */
|
|
26
|
+
lifted: boolean;
|
|
27
|
+
/** The height of the scroll container. */
|
|
28
|
+
viewHeight: number;
|
|
29
|
+
/** The bottom edge of the limit element, from the top of the scroll container. Zero with no limit. */
|
|
30
|
+
topLimit: number;
|
|
31
|
+
cardHeight: number;
|
|
32
|
+
/** How far the closed card stands under the edge. */
|
|
33
|
+
offset: number;
|
|
34
|
+
dimRef: (node: HTMLElement | null) => void;
|
|
35
|
+
findScroller: () => HTMLElement;
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=useDockedCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDockedCard.d.ts","sourceRoot":"","sources":["../../../../src/components/DockedCard/useDockedCard.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAMV,MAAM,OAAO,CAAC;AAMf,6EAA6E;AAC7E,eAAO,MAAM,eAAe,GAAI,OAAO,OAAO,GAAG,IAAI,KAAG,WAcvD,CAAC;AAKF,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uFAAuF;IACvF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC;CACzC;AAED,6GAA6G;AAC7G,eAAO,MAAM,aAAa,GAAI,0FAU3B,oBAAoB;oBA4BZ,OAAO;;IA+Id,gFAAgF;;IAEhF,0CAA0C;;IAE1C,sGAAsG;;;IAGtG,qDAAqD;;mBA1D9C,WAAW,GAAG,IAAI;;CA+D5B,CAAC"}
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
2
|
+
import { flushSync } from "react-dom";
|
|
3
|
+
const getDocumentScroller = () => document.scrollingElement || document.documentElement;
|
|
4
|
+
|
|
5
|
+
/** The closest ancestor that scrolls. The full page scrolls the document. */
|
|
6
|
+
export const getScrollParent = node => {
|
|
7
|
+
let element = node == null ? void 0 : node.parentElement;
|
|
8
|
+
while (element && element !== document.body) {
|
|
9
|
+
const _window$getComputedSt = window.getComputedStyle(element),
|
|
10
|
+
overflowY = _window$getComputedSt.overflowY;
|
|
11
|
+
if (overflowY === "auto" || overflowY === "scroll") {
|
|
12
|
+
return element;
|
|
13
|
+
}
|
|
14
|
+
element = element.parentElement;
|
|
15
|
+
}
|
|
16
|
+
return getDocumentScroller();
|
|
17
|
+
};
|
|
18
|
+
const isDocumentScroller = element => element === document.scrollingElement || element === document.documentElement;
|
|
19
|
+
/** The moves of a docked card: its offset, its open state, the dim, the Escape key and the frozen scroll. */
|
|
20
|
+
export const useDockedCard = _ref => {
|
|
21
|
+
let cardRef = _ref.cardRef,
|
|
22
|
+
open = _ref.open,
|
|
23
|
+
onOpenChange = _ref.onOpenChange,
|
|
24
|
+
_ref$enabled = _ref.enabled,
|
|
25
|
+
enabled = _ref$enabled === void 0 ? true : _ref$enabled,
|
|
26
|
+
_ref$duration = _ref.duration,
|
|
27
|
+
duration = _ref$duration === void 0 ? 200 : _ref$duration,
|
|
28
|
+
_ref$peek = _ref.peek,
|
|
29
|
+
peek = _ref$peek === void 0 ? 0 : _ref$peek,
|
|
30
|
+
getTopLimit = _ref.getTopLimit,
|
|
31
|
+
onEscape = _ref.onEscape,
|
|
32
|
+
isBusy = _ref.isBusy;
|
|
33
|
+
const scrollerRef = useRef(null);
|
|
34
|
+
const dimNodeRef = useRef(null);
|
|
35
|
+
const timerRef = useRef();
|
|
36
|
+
const _useState = useState(0),
|
|
37
|
+
viewHeight = _useState[0],
|
|
38
|
+
setViewHeight = _useState[1];
|
|
39
|
+
const _useState2 = useState(0),
|
|
40
|
+
cardHeight = _useState2[0],
|
|
41
|
+
setCardHeight = _useState2[1];
|
|
42
|
+
const _useState3 = useState(0),
|
|
43
|
+
topLimit = _useState3[0],
|
|
44
|
+
setTopLimit = _useState3[1];
|
|
45
|
+
const _useState4 = useState(false),
|
|
46
|
+
moving = _useState4[0],
|
|
47
|
+
setMoving = _useState4[1];
|
|
48
|
+
const latest = useRef({
|
|
49
|
+
enabled,
|
|
50
|
+
onOpenChange,
|
|
51
|
+
onEscape,
|
|
52
|
+
isBusy,
|
|
53
|
+
getTopLimit
|
|
54
|
+
});
|
|
55
|
+
latest.current = {
|
|
56
|
+
enabled,
|
|
57
|
+
onOpenChange,
|
|
58
|
+
onEscape,
|
|
59
|
+
isBusy,
|
|
60
|
+
getTopLimit
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
// Found once: a frozen scroller has no scroll in its style, so a later search would miss it.
|
|
64
|
+
const findScroller = useCallback(() => {
|
|
65
|
+
var _scrollerRef$current;
|
|
66
|
+
scrollerRef.current = (_scrollerRef$current = scrollerRef.current) != null ? _scrollerRef$current : getScrollParent(cardRef.current);
|
|
67
|
+
return scrollerRef.current;
|
|
68
|
+
}, [cardRef]);
|
|
69
|
+
|
|
70
|
+
// The card moves with a transition only when it opens or closes, not when its content changes its height.
|
|
71
|
+
const setOpen = useCallback(next => {
|
|
72
|
+
if (!latest.current.enabled) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
if (!next) {
|
|
76
|
+
var _dimNodeRef$current;
|
|
77
|
+
(_dimNodeRef$current = dimNodeRef.current) == null || _dimNodeRef$current.animate == null || _dimNodeRef$current.animate([{
|
|
78
|
+
opacity: 1
|
|
79
|
+
}, {
|
|
80
|
+
opacity: 0
|
|
81
|
+
}], {
|
|
82
|
+
duration,
|
|
83
|
+
fill: "forwards"
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
clearTimeout(timerRef.current);
|
|
87
|
+
setMoving(true);
|
|
88
|
+
latest.current.onOpenChange(next);
|
|
89
|
+
timerRef.current = setTimeout(() => setMoving(false), duration + 50);
|
|
90
|
+
}, [duration]);
|
|
91
|
+
useEffect(() => () => clearTimeout(timerRef.current), []);
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
const scroller = findScroller();
|
|
94
|
+
const isDocument = isDocumentScroller(scroller);
|
|
95
|
+
const measure = () => setViewHeight(isDocument ? window.innerHeight : scroller.clientHeight);
|
|
96
|
+
measure();
|
|
97
|
+
if (typeof ResizeObserver === "undefined") {
|
|
98
|
+
return undefined;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// eslint-disable-next-line compat/compat
|
|
102
|
+
const observer = new ResizeObserver(measure);
|
|
103
|
+
observer.observe(isDocument ? document.documentElement : scroller);
|
|
104
|
+
return () => observer.disconnect();
|
|
105
|
+
}, [findScroller]);
|
|
106
|
+
useLayoutEffect(() => {
|
|
107
|
+
const scroller = findScroller();
|
|
108
|
+
const limit = latest.current.getTopLimit == null ? void 0 : latest.current.getTopLimit();
|
|
109
|
+
if (!enabled || !scroller || !limit) {
|
|
110
|
+
setTopLimit(0);
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
const scrollerTop = scroller === getDocumentScroller() ? 0 : scroller.getBoundingClientRect().top;
|
|
114
|
+
setTopLimit(Math.max(0, Math.round(limit.getBoundingClientRect().bottom - scrollerTop)));
|
|
115
|
+
}, [open, enabled, viewHeight, findScroller]);
|
|
116
|
+
|
|
117
|
+
// A menu, a list or a dialog above the card takes its own Escape.
|
|
118
|
+
useEffect(() => {
|
|
119
|
+
if (!open) {
|
|
120
|
+
return undefined;
|
|
121
|
+
}
|
|
122
|
+
const handleKeyDown = event => {
|
|
123
|
+
var _latest$current$isBus;
|
|
124
|
+
const card = cardRef.current;
|
|
125
|
+
const target = event.target;
|
|
126
|
+
const isOwn = target === document.body || (target.closest == null ? void 0 : target.closest(".c-window")) === (card == null ? void 0 : card.closest(".c-window"));
|
|
127
|
+
const busy = card ? (_latest$current$isBus = latest.current.isBusy == null ? void 0 : latest.current.isBusy(card)) != null ? _latest$current$isBus : false : false;
|
|
128
|
+
if (event.key === "Escape" && !event.defaultPrevented && isOwn && !busy) {
|
|
129
|
+
var _latest$current$onEsc;
|
|
130
|
+
event.preventDefault();
|
|
131
|
+
event.stopPropagation();
|
|
132
|
+
((_latest$current$onEsc = latest.current.onEscape) != null ? _latest$current$onEsc : () => setOpen(false))();
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
document.addEventListener("keydown", handleKeyDown, true);
|
|
136
|
+
return () => document.removeEventListener("keydown", handleKeyDown, true);
|
|
137
|
+
}, [open, cardRef, setOpen]);
|
|
138
|
+
const dimRef = useCallback(node => {
|
|
139
|
+
dimNodeRef.current = node;
|
|
140
|
+
node == null || node.animate == null || node.animate([{
|
|
141
|
+
opacity: 0
|
|
142
|
+
}, {
|
|
143
|
+
opacity: 1
|
|
144
|
+
}], duration);
|
|
145
|
+
}, [duration]);
|
|
146
|
+
|
|
147
|
+
// The height places the card, so each render reads it before the paint. The observer covers what comes in later.
|
|
148
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
149
|
+
useLayoutEffect(() => {
|
|
150
|
+
var _cardRef$current$offs, _cardRef$current;
|
|
151
|
+
setCardHeight((_cardRef$current$offs = (_cardRef$current = cardRef.current) == null ? void 0 : _cardRef$current.offsetHeight) != null ? _cardRef$current$offs : 0);
|
|
152
|
+
});
|
|
153
|
+
useLayoutEffect(() => {
|
|
154
|
+
const card = cardRef.current;
|
|
155
|
+
if (!card || typeof ResizeObserver === "undefined") {
|
|
156
|
+
return undefined;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// eslint-disable-next-line compat/compat
|
|
160
|
+
const observer = new ResizeObserver(() => flushSync(() => setCardHeight(card.offsetHeight)));
|
|
161
|
+
observer.observe(card);
|
|
162
|
+
return () => observer.disconnect();
|
|
163
|
+
}, [cardRef]);
|
|
164
|
+
|
|
165
|
+
// The page does not scroll under the open card.
|
|
166
|
+
const frozen = open || moving;
|
|
167
|
+
useEffect(() => {
|
|
168
|
+
if (!frozen) {
|
|
169
|
+
return undefined;
|
|
170
|
+
}
|
|
171
|
+
const scroller = findScroller();
|
|
172
|
+
const previous = scroller.style.overflow;
|
|
173
|
+
scroller.style.overflow = "hidden";
|
|
174
|
+
return () => {
|
|
175
|
+
scroller.style.overflow = previous;
|
|
176
|
+
};
|
|
177
|
+
}, [frozen, findScroller]);
|
|
178
|
+
return {
|
|
179
|
+
setOpen,
|
|
180
|
+
moving,
|
|
181
|
+
/** The card and its dim cover the page while the card is open or on its way. */
|
|
182
|
+
lifted: frozen,
|
|
183
|
+
/** The height of the scroll container. */
|
|
184
|
+
viewHeight,
|
|
185
|
+
/** The bottom edge of the limit element, from the top of the scroll container. Zero with no limit. */
|
|
186
|
+
topLimit,
|
|
187
|
+
cardHeight,
|
|
188
|
+
/** How far the closed card stands under the edge. */
|
|
189
|
+
offset: Math.max(0, cardHeight - peek),
|
|
190
|
+
dimRef,
|
|
191
|
+
findScroller
|
|
192
|
+
};
|
|
193
|
+
};
|
|
194
|
+
//# sourceMappingURL=useDockedCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDockedCard.js","names":["useCallback","useEffect","useLayoutEffect","useRef","useState","flushSync","getDocumentScroller","document","scrollingElement","documentElement","getScrollParent","node","element","parentElement","body","_window$getComputedSt","window","getComputedStyle","overflowY","isDocumentScroller","useDockedCard","_ref","cardRef","open","onOpenChange","_ref$enabled","enabled","_ref$duration","duration","_ref$peek","peek","getTopLimit","onEscape","isBusy","scrollerRef","dimNodeRef","timerRef","_useState","viewHeight","setViewHeight","_useState2","cardHeight","setCardHeight","_useState3","topLimit","setTopLimit","_useState4","moving","setMoving","latest","current","findScroller","_scrollerRef$current","setOpen","next","_dimNodeRef$current","animate","opacity","fill","clearTimeout","setTimeout","scroller","isDocument","measure","innerHeight","clientHeight","ResizeObserver","undefined","observer","observe","disconnect","limit","scrollerTop","getBoundingClientRect","top","Math","max","round","bottom","handleKeyDown","event","_latest$current$isBus","card","target","isOwn","closest","busy","key","defaultPrevented","_latest$current$onEsc","preventDefault","stopPropagation","addEventListener","removeEventListener","dimRef","_cardRef$current$offs","_cardRef$current","offsetHeight","frozen","previous","style","overflow","lifted","offset"],"sources":["../../../../src/components/DockedCard/useDockedCard.ts"],"sourcesContent":["import {\n RefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\nconst getDocumentScroller = () =>\n (document.scrollingElement || document.documentElement) as HTMLElement;\n\n/** The closest ancestor that scrolls. The full page scrolls the document. */\nexport const getScrollParent = (node?: Element | null): HTMLElement => {\n let element = node?.parentElement;\n\n while (element && element !== document.body) {\n const { overflowY } = window.getComputedStyle(element);\n\n if (overflowY === \"auto\" || overflowY === \"scroll\") {\n return element;\n }\n\n element = element.parentElement;\n }\n\n return getDocumentScroller();\n};\n\nconst isDocumentScroller = (element: HTMLElement) =>\n element === document.scrollingElement || element === document.documentElement;\n\nexport interface UseDockedCardOptions {\n cardRef: RefObject<HTMLElement>;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /** Set to false where the card is not docked. It then never opens and has no top limit. */\n enabled?: boolean;\n /** The time of the move, in milliseconds. */\n duration?: number;\n /** The height of the closed card that stays above the edge, in pixels. */\n peek?: number;\n /** The element whose bottom edge the open card must not pass. */\n getTopLimit?: () => Element | null | undefined;\n /** Called on Escape while the card is open. Without it Escape closes the card. */\n onEscape?: () => void;\n /** True while something in the card, such as an open menu, must take Escape itself. */\n isBusy?: (card: HTMLElement) => boolean;\n}\n\n/** The moves of a docked card: its offset, its open state, the dim, the Escape key and the frozen scroll. */\nexport const useDockedCard = ({\n cardRef,\n open,\n onOpenChange,\n enabled = true,\n duration = 200,\n peek = 0,\n getTopLimit,\n onEscape,\n isBusy,\n}: UseDockedCardOptions) => {\n const scrollerRef = useRef<HTMLElement | null>(null);\n const dimNodeRef = useRef<HTMLElement | null>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout>>();\n const [viewHeight, setViewHeight] = useState(0);\n const [cardHeight, setCardHeight] = useState(0);\n const [topLimit, setTopLimit] = useState(0);\n const [moving, setMoving] = useState(false);\n const latest = useRef({\n enabled,\n onOpenChange,\n onEscape,\n isBusy,\n getTopLimit,\n });\n\n latest.current = { enabled, onOpenChange, onEscape, isBusy, getTopLimit };\n\n // Found once: a frozen scroller has no scroll in its style, so a later search would miss it.\n const findScroller = useCallback(() => {\n scrollerRef.current =\n scrollerRef.current ?? getScrollParent(cardRef.current);\n\n return scrollerRef.current;\n }, [cardRef]);\n\n // The card moves with a transition only when it opens or closes, not when its content changes its height.\n const setOpen = useCallback(\n (next: boolean) => {\n if (!latest.current.enabled) {\n return;\n }\n\n if (!next) {\n dimNodeRef.current?.animate?.([{ opacity: 1 }, { opacity: 0 }], {\n duration,\n fill: \"forwards\",\n });\n }\n\n clearTimeout(timerRef.current);\n setMoving(true);\n latest.current.onOpenChange(next);\n timerRef.current = setTimeout(() => setMoving(false), duration + 50);\n },\n [duration]\n );\n\n useEffect(() => () => clearTimeout(timerRef.current), []);\n\n useEffect(() => {\n const scroller = findScroller();\n const isDocument = isDocumentScroller(scroller);\n const measure = () =>\n setViewHeight(isDocument ? window.innerHeight : scroller.clientHeight);\n\n measure();\n\n if (typeof ResizeObserver === \"undefined\") {\n return undefined;\n }\n\n // eslint-disable-next-line compat/compat\n const observer = new ResizeObserver(measure);\n\n observer.observe(isDocument ? document.documentElement : scroller);\n\n return () => observer.disconnect();\n }, [findScroller]);\n\n useLayoutEffect(() => {\n const scroller = findScroller();\n const limit = latest.current.getTopLimit?.();\n\n if (!enabled || !scroller || !limit) {\n setTopLimit(0);\n\n return;\n }\n\n const scrollerTop =\n scroller === getDocumentScroller()\n ? 0\n : scroller.getBoundingClientRect().top;\n\n setTopLimit(\n Math.max(\n 0,\n Math.round(limit.getBoundingClientRect().bottom - scrollerTop)\n )\n );\n }, [open, enabled, viewHeight, findScroller]);\n\n // A menu, a list or a dialog above the card takes its own Escape.\n useEffect(() => {\n if (!open) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n const card = cardRef.current;\n const target = event.target as Element;\n const isOwn =\n target === document.body ||\n target.closest?.(\".c-window\") === card?.closest(\".c-window\");\n const busy = card ? latest.current.isBusy?.(card) ?? false : false;\n\n if (event.key === \"Escape\" && !event.defaultPrevented && isOwn && !busy) {\n event.preventDefault();\n event.stopPropagation();\n (latest.current.onEscape ?? (() => setOpen(false)))();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown, true);\n\n return () => document.removeEventListener(\"keydown\", handleKeyDown, true);\n }, [open, cardRef, setOpen]);\n\n const dimRef = useCallback(\n (node: HTMLElement | null) => {\n dimNodeRef.current = node;\n node?.animate?.([{ opacity: 0 }, { opacity: 1 }], duration);\n },\n [duration]\n );\n\n // The height places the card, so each render reads it before the paint. The observer covers what comes in later.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n setCardHeight(cardRef.current?.offsetHeight ?? 0);\n });\n\n useLayoutEffect(() => {\n const card = cardRef.current;\n\n if (!card || typeof ResizeObserver === \"undefined\") {\n return undefined;\n }\n\n // eslint-disable-next-line compat/compat\n const observer = new ResizeObserver(() =>\n flushSync(() => setCardHeight(card.offsetHeight))\n );\n\n observer.observe(card);\n\n return () => observer.disconnect();\n }, [cardRef]);\n\n // The page does not scroll under the open card.\n const frozen = open || moving;\n\n useEffect(() => {\n if (!frozen) {\n return undefined;\n }\n\n const scroller = findScroller();\n const previous = scroller.style.overflow;\n\n scroller.style.overflow = \"hidden\";\n\n return () => {\n scroller.style.overflow = previous;\n };\n }, [frozen, findScroller]);\n\n return {\n setOpen,\n moving,\n /** The card and its dim cover the page while the card is open or on its way. */\n lifted: frozen,\n /** The height of the scroll container. */\n viewHeight,\n /** The bottom edge of the limit element, from the top of the scroll container. Zero with no limit. */\n topLimit,\n cardHeight,\n /** How far the closed card stands under the edge. */\n offset: Math.max(0, cardHeight - peek),\n dimRef,\n findScroller,\n };\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,7 +4,7 @@ export interface EditableContentInterface {
|
|
|
4
4
|
/** Typography variant. */
|
|
5
5
|
variant?: Variant;
|
|
6
6
|
/** Typography weight. */
|
|
7
|
-
weight?: "light" | "regular" | "bold" | "medium";
|
|
7
|
+
weight?: "light" | "regular" | "bold" | "medium" | "semibold";
|
|
8
8
|
/** Input props. */
|
|
9
9
|
inputProps?: Partial<React.ComponentPropsWithoutRef<"input">>;
|
|
10
10
|
/** Disable edit mode. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAKpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAKpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC9D,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,oOA8F3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","StyledDiv","StyledInput","StyledSpan","useHoverSuppression","useForkRef","EditableContent","_ref","ref","className","_ref$variant","variant","weight","_ref$disabled","disabled","inputProps","wrapRef","children","invalid","onMouseLeave","props","_objectWithoutPropertiesLoose","_excluded","intInputRef","handleRef","_useHoverSuppression","hoverSuppressed","suppressHoverOnKey","releaseHover","handleBlur","evt","current","scrollLeft","onBlur","handleKeyDown","onKeyDown","handleFocus","onFocus","handleMouseLeave","createElement","_extends","forwardedAs","$disabled","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\n\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\nimport { useHoverSuppression } from \"./useHoverSuppression\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n invalid?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n children,\n invalid,\n onMouseLeave,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n const { hoverSuppressed, suppressHoverOnKey, releaseHover } =\n useHoverSuppression();\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n const handleKeyDown = useCallback(\n (evt) => {\n suppressHoverOnKey(evt);\n typeof inputProps?.onKeyDown === \"function\" &&\n inputProps.onKeyDown(evt);\n },\n [inputProps, suppressHoverOnKey]\n );\n\n const handleFocus = useCallback(\n (evt) => {\n releaseHover();\n typeof inputProps?.onFocus === \"function\" && inputProps.onFocus(evt);\n },\n [inputProps, releaseHover]\n );\n\n const handleMouseLeave = useCallback(\n (evt) => {\n releaseHover();\n typeof onMouseLeave === \"function\" && onMouseLeave(evt);\n },\n [onMouseLeave, releaseHover]\n );\n\n return (\n <StyledDiv\n className={className}\n ref={wrapRef}\n {...props}\n onMouseLeave={handleMouseLeave}\n >\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n className=\"presentation\"\n >\n {children ? children : inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n disabled={disabled}\n data-form-type=\"other\"\n data-hover-suppressed={hoverSuppressed}\n invalid={invalid}\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","StyledDiv","StyledInput","StyledSpan","useHoverSuppression","useForkRef","EditableContent","_ref","ref","className","_ref$variant","variant","weight","_ref$disabled","disabled","inputProps","wrapRef","children","invalid","onMouseLeave","props","_objectWithoutPropertiesLoose","_excluded","intInputRef","handleRef","_useHoverSuppression","hoverSuppressed","suppressHoverOnKey","releaseHover","handleBlur","evt","current","scrollLeft","onBlur","handleKeyDown","onKeyDown","handleFocus","onFocus","handleMouseLeave","createElement","_extends","forwardedAs","$disabled","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\n\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\nimport { useHoverSuppression } from \"./useHoverSuppression\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\" | \"semibold\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n invalid?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n children,\n invalid,\n onMouseLeave,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n const { hoverSuppressed, suppressHoverOnKey, releaseHover } =\n useHoverSuppression();\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n const handleKeyDown = useCallback(\n (evt) => {\n suppressHoverOnKey(evt);\n typeof inputProps?.onKeyDown === \"function\" &&\n inputProps.onKeyDown(evt);\n },\n [inputProps, suppressHoverOnKey]\n );\n\n const handleFocus = useCallback(\n (evt) => {\n releaseHover();\n typeof inputProps?.onFocus === \"function\" && inputProps.onFocus(evt);\n },\n [inputProps, releaseHover]\n );\n\n const handleMouseLeave = useCallback(\n (evt) => {\n releaseHover();\n typeof onMouseLeave === \"function\" && onMouseLeave(evt);\n },\n [onMouseLeave, releaseHover]\n );\n\n return (\n <StyledDiv\n className={className}\n ref={wrapRef}\n {...props}\n onMouseLeave={handleMouseLeave}\n >\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n className=\"presentation\"\n >\n {children ? children : inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n disabled={disabled}\n data-form-type=\"other\"\n data-hover-suppressed={hoverSuppressed}\n invalid={invalid}\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
export type EditorFrameLook = "field" | "card" | "raised";
|
|
3
|
+
export interface IEditorFrameProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/** "field" for an edit in place, "card" for a composer, "raised" for an editor on the page. */
|
|
5
|
+
look?: EditorFrameLook;
|
|
6
|
+
/** The corner radius in pixels. Each look has its own default. */
|
|
7
|
+
radius?: number;
|
|
8
|
+
/** The element of the frame. A form keeps its submit handling on the frame. */
|
|
9
|
+
as?: "div" | "form";
|
|
10
|
+
}
|
|
11
|
+
export declare const EditorFrame: React.ForwardRefExoticComponent<IEditorFrameProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
/** The row of actions under the editor, with a line above it. */
|
|
13
|
+
export declare const EditorFrameFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
//# sourceMappingURL=EditorFrame.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorFrame.d.ts","sourceRoot":"","sources":["../../../../src/components/EditorFrame/EditorFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAW1D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+FAA+F;IAC/F,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAQD,eAAO,MAAM,WAAW,0FAYvB,CAAC;AAIF,iEAAiE;AACjE,eAAO,MAAM,iBAAiB,6GAe5B,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["look", "radius", "className", "children"],
|
|
4
|
+
_excluded2 = ["className", "children"];
|
|
5
|
+
import React, { forwardRef } from "react";
|
|
6
|
+
import classnames from "classnames";
|
|
7
|
+
import { FOOTER_CONTAINER_CSS, StyledEditorFrame, StyledEditorFrameFooter } from "./Styles";
|
|
8
|
+
import { useContainerCss } from "../../utils/useContainerCss";
|
|
9
|
+
const RADIUS = {
|
|
10
|
+
field: 14,
|
|
11
|
+
card: 16,
|
|
12
|
+
raised: 20
|
|
13
|
+
};
|
|
14
|
+
export const EditorFrame = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
15
|
+
let _ref$look = _ref.look,
|
|
16
|
+
look = _ref$look === void 0 ? "field" : _ref$look,
|
|
17
|
+
radius = _ref.radius,
|
|
18
|
+
className = _ref.className,
|
|
19
|
+
children = _ref.children,
|
|
20
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
21
|
+
return /*#__PURE__*/React.createElement(StyledEditorFrame, _extends({}, rest, {
|
|
22
|
+
ref: ref,
|
|
23
|
+
$look: look,
|
|
24
|
+
$radius: radius != null ? radius : RADIUS[look],
|
|
25
|
+
className: classnames("c-editor-frame", className)
|
|
26
|
+
}), children);
|
|
27
|
+
});
|
|
28
|
+
EditorFrame.displayName = "EditorFrame";
|
|
29
|
+
|
|
30
|
+
/** The row of actions under the editor, with a line above it. */
|
|
31
|
+
export const EditorFrameFooter = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
32
|
+
let className = _ref2.className,
|
|
33
|
+
children = _ref2.children,
|
|
34
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
35
|
+
useContainerCss("c-editor-frame-container", FOOTER_CONTAINER_CSS);
|
|
36
|
+
return /*#__PURE__*/React.createElement(StyledEditorFrameFooter, _extends({}, rest, {
|
|
37
|
+
ref: ref,
|
|
38
|
+
className: classnames("c-editor-frame__footer", className)
|
|
39
|
+
}), children);
|
|
40
|
+
});
|
|
41
|
+
EditorFrameFooter.displayName = "EditorFrameFooter";
|
|
42
|
+
//# sourceMappingURL=EditorFrame.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorFrame.js","names":["React","forwardRef","classnames","FOOTER_CONTAINER_CSS","StyledEditorFrame","StyledEditorFrameFooter","useContainerCss","RADIUS","field","card","raised","EditorFrame","_ref","ref","_ref$look","look","radius","className","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$look","$radius","displayName","EditorFrameFooter","_ref2","_excluded2"],"sources":["../../../../src/components/EditorFrame/EditorFrame.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n FOOTER_CONTAINER_CSS,\n StyledEditorFrame,\n StyledEditorFrameFooter,\n} from \"./Styles\";\nimport { useContainerCss } from \"../../utils/useContainerCss\";\n\nexport type EditorFrameLook = \"field\" | \"card\" | \"raised\";\n\nexport interface IEditorFrameProps extends HTMLAttributes<HTMLDivElement> {\n /** \"field\" for an edit in place, \"card\" for a composer, \"raised\" for an editor on the page. */\n look?: EditorFrameLook;\n /** The corner radius in pixels. Each look has its own default. */\n radius?: number;\n /** The element of the frame. A form keeps its submit handling on the frame. */\n as?: \"div\" | \"form\";\n}\n\nconst RADIUS: Record<EditorFrameLook, number> = {\n field: 14,\n card: 16,\n raised: 20,\n};\n\nexport const EditorFrame = forwardRef<HTMLDivElement, IEditorFrameProps>(\n ({ look = \"field\", radius, className, children, ...rest }, ref) => (\n <StyledEditorFrame\n {...rest}\n ref={ref}\n $look={look}\n $radius={radius ?? RADIUS[look]}\n className={classnames(\"c-editor-frame\", className)}\n >\n {children}\n </StyledEditorFrame>\n )\n);\n\nEditorFrame.displayName = \"EditorFrame\";\n\n/** The row of actions under the editor, with a line above it. */\nexport const EditorFrameFooter = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...rest }, ref) => {\n useContainerCss(\"c-editor-frame-container\", FOOTER_CONTAINER_CSS);\n\n return (\n <StyledEditorFrameFooter\n {...rest}\n ref={ref}\n className={classnames(\"c-editor-frame__footer\", className)}\n >\n {children}\n </StyledEditorFrameFooter>\n );\n});\n\nEditorFrameFooter.displayName = \"EditorFrameFooter\";\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAoBC,UAAU,QAAQ,OAAO;AAEzD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,oBAAoB,EACpBC,iBAAiB,EACjBC,uBAAuB,QAClB,UAAU;AACjB,SAASC,eAAe,QAAQ,6BAA6B;AAa7D,MAAMC,MAAuC,GAAG;EAC9CC,KAAK,EAAE,EAAE;EACTC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE;AACV,CAAC;AAED,OAAO,MAAMC,WAAW,gBAAGV,UAAU,CACnC,CAAAW,IAAA,EAA2DC,GAAG;EAAA,IAAAC,SAAA,GAAAF,IAAA,CAA3DG,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA;IAAEE,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAEC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBACrDrB,KAAA,CAAAsB,aAAA,CAAClB,iBAAiB,EAAAmB,QAAA,KACZJ,IAAI;IACRN,GAAG,EAAEA,GAAI;IACTW,KAAK,EAAET,IAAK;IACZU,OAAO,EAAET,MAAM,WAANA,MAAM,GAAIT,MAAM,CAACQ,IAAI,CAAE;IAChCE,SAAS,EAAEf,UAAU,CAAC,gBAAgB,EAAEe,SAAS;EAAE,IAElDC,QACgB,CAAC;AAAA,CAExB,CAAC;AAEDP,WAAW,CAACe,WAAW,GAAG,aAAa;;AAEvC;AACA,OAAO,MAAMC,iBAAiB,gBAAG1B,UAAU,CAGzC,CAAA2B,KAAA,EAAmCf,GAAG,KAAK;EAAA,IAAxCI,SAAS,GAAAW,KAAA,CAATX,SAAS;IAAEC,QAAQ,GAAAU,KAAA,CAARV,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAQ,KAAA,EAAAC,UAAA;EAC/BvB,eAAe,CAAC,0BAA0B,EAAEH,oBAAoB,CAAC;EAEjE,oBACEH,KAAA,CAAAsB,aAAA,CAACjB,uBAAuB,EAAAkB,QAAA,KAClBJ,IAAI;IACRN,GAAG,EAAEA,GAAI;IACTI,SAAS,EAAEf,UAAU,CAAC,wBAAwB,EAAEe,SAAS;EAAE,IAE1DC,QACsB,CAAC;AAE9B,CAAC,CAAC;AAEFS,iBAAiB,CAACD,WAAW,GAAG,mBAAmB","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare const LOOKS: {
|
|
2
|
+
field: import("styled-components").FlattenSimpleInterpolation;
|
|
3
|
+
card: import("styled-components").FlattenSimpleInterpolation;
|
|
4
|
+
raised: import("styled-components").FlattenSimpleInterpolation;
|
|
5
|
+
};
|
|
6
|
+
export declare const StyledEditorFrame: import("styled-components").StyledComponent<"div", any, {
|
|
7
|
+
$look: keyof typeof LOOKS;
|
|
8
|
+
$radius: number;
|
|
9
|
+
}, never>;
|
|
10
|
+
export declare const FOOTER_CONTAINER_CSS = "\n@container (min-width: 900px) {\n .c-editor-frame__footer { padding-right: 19px; padding-left: 19px; }\n}\n";
|
|
11
|
+
export declare const StyledEditorFrameFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EditorFrame/Styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,KAAK;;;;CAYV,CAAC;AAEF,eAAO,MAAM,iBAAiB;WACrB,MAAM,OAAO,KAAK;aAChB,MAAM;SAQhB,CAAC;AAEF,eAAO,MAAM,oBAAoB,mHAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oEAQnC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
const LOOKS = {
|
|
3
|
+
field: css(["background-color:var(--color-theme-200);"]),
|
|
4
|
+
card: css(["background-color:var(--surface-bubble);box-shadow:var(--shadow-soft);"]),
|
|
5
|
+
raised: css(["background-color:var(--surface-raised);box-shadow:var(--shadow-float);"])
|
|
6
|
+
};
|
|
7
|
+
export const StyledEditorFrame = styled.div.withConfig({
|
|
8
|
+
displayName: "Styles__StyledEditorFrame",
|
|
9
|
+
componentId: "sc-ruvdwa-0"
|
|
10
|
+
})(["position:relative;min-width:0;border:1px solid var(--border-raised);border-radius:", "px;", ""], _ref => {
|
|
11
|
+
let $radius = _ref.$radius;
|
|
12
|
+
return $radius;
|
|
13
|
+
}, _ref2 => {
|
|
14
|
+
let $look = _ref2.$look;
|
|
15
|
+
return LOOKS[$look];
|
|
16
|
+
});
|
|
17
|
+
export const FOOTER_CONTAINER_CSS = "\n@container (min-width: 900px) {\n .c-editor-frame__footer { padding-right: 19px; padding-left: 19px; }\n}\n";
|
|
18
|
+
export const StyledEditorFrameFooter = styled.div.withConfig({
|
|
19
|
+
displayName: "Styles__StyledEditorFrameFooter",
|
|
20
|
+
componentId: "sc-ruvdwa-1"
|
|
21
|
+
})(["display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding:10px 11px;border-top:1px solid var(--border-raised);"]);
|
|
22
|
+
//# sourceMappingURL=Styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","LOOKS","field","card","raised","StyledEditorFrame","div","withConfig","displayName","componentId","_ref","$radius","_ref2","$look","FOOTER_CONTAINER_CSS","StyledEditorFrameFooter"],"sources":["../../../../src/components/EditorFrame/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nconst LOOKS = {\n field: css`\n background-color: var(--color-theme-200);\n `,\n card: css`\n background-color: var(--surface-bubble);\n box-shadow: var(--shadow-soft);\n `,\n raised: css`\n background-color: var(--surface-raised);\n box-shadow: var(--shadow-float);\n `,\n};\n\nexport const StyledEditorFrame = styled.div<{\n $look: keyof typeof LOOKS;\n $radius: number;\n}>`\n position: relative;\n min-width: 0;\n border: 1px solid var(--border-raised);\n border-radius: ${({ $radius }) => $radius}px;\n\n ${({ $look }) => LOOKS[$look]}\n`;\n\nexport const FOOTER_CONTAINER_CSS = `\n@container (min-width: 900px) {\n .c-editor-frame__footer { padding-right: 19px; padding-left: 19px; }\n}\n`;\n\nexport const StyledEditorFrameFooter = styled.div`\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 12px;\n min-height: 52px;\n padding: 10px 11px;\n border-top: 1px solid var(--border-raised);\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,MAAMC,KAAK,GAAG;EACZC,KAAK,EAAEF,GAAG,8CAET;EACDG,IAAI,EAAEH,GAAG,2EAGR;EACDI,MAAM,EAAEJ,GAAG;AAIb,CAAC;AAED,OAAO,MAAMK,iBAAiB,GAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sGAOxBC,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OAAOA,OAAO;AAAA,GAEvCC,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAAOZ,KAAK,CAACY,KAAK,CAAC;AAAA,EAC9B;AAED,OAAO,MAAMC,oBAAoB,mHAIhC;AAED,OAAO,MAAMC,uBAAuB,GAAGhB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gJAQhD","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EditorFrame/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/EditorFrame/index.ts"],"sourcesContent":["export * from \"./EditorFrame\";\n"],"mappings":"AAAA,cAAc,eAAe","ignoreList":[]}
|
|
@@ -1,12 +1,17 @@
|
|
|
1
|
-
import React, { HTMLAttributes } from "react";
|
|
1
|
+
import React, { HTMLAttributes, ReactNode } from "react";
|
|
2
2
|
export interface EmptySlateProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/** The image. Not needed with an illustration. */
|
|
4
|
+
src?: string;
|
|
5
|
+
alt?: string;
|
|
5
6
|
title: string;
|
|
6
7
|
description?: string;
|
|
8
|
+
/** A drawing in place of the image, such as an inline SVG that follows the theme. */
|
|
9
|
+
illustration?: ReactNode;
|
|
10
|
+
/** "compact" is stacked and centered, with small text, for a panel. */
|
|
11
|
+
size?: "regular" | "compact";
|
|
7
12
|
}
|
|
8
13
|
export declare const EmptySlate: {
|
|
9
|
-
({ title, description, src, alt, children, ...rest }: EmptySlateProps): React.JSX.Element;
|
|
14
|
+
({ title, description, src, alt, illustration, size, children, ...rest }: EmptySlateProps): React.JSX.Element;
|
|
10
15
|
Footer: {
|
|
11
16
|
({ children, ...rest }: {
|
|
12
17
|
[x: string]: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptySlate.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,
|
|
1
|
+
{"version":3,"file":"EmptySlate.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAC9B;AAKD,eAAO,MAAM,UAAU;8EASpB,eAAe;;;;;;;;;CA+CjB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["title", "description", "src", "alt", "children"];
|
|
3
|
+
const _excluded = ["title", "description", "src", "alt", "illustration", "size", "children"];
|
|
4
4
|
import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
|
|
5
5
|
import { Container, Description, SubContainer, Title, StyledImg } from "./EmptySlate.styles";
|
|
6
6
|
import { EmptySlateFooter } from "./EmptySlateFooter";
|
|
@@ -9,9 +9,14 @@ export const EmptySlate = _ref => {
|
|
|
9
9
|
let title = _ref.title,
|
|
10
10
|
description = _ref.description,
|
|
11
11
|
src = _ref.src,
|
|
12
|
-
alt = _ref.alt,
|
|
12
|
+
_ref$alt = _ref.alt,
|
|
13
|
+
alt = _ref$alt === void 0 ? "" : _ref$alt,
|
|
14
|
+
illustration = _ref.illustration,
|
|
15
|
+
_ref$size = _ref.size,
|
|
16
|
+
size = _ref$size === void 0 ? "regular" : _ref$size,
|
|
13
17
|
children = _ref.children,
|
|
14
18
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
19
|
+
const compact = size === "compact";
|
|
15
20
|
const imageRef = useRef(null);
|
|
16
21
|
const _useState = useState(),
|
|
17
22
|
loadedSrc = _useState[0],
|
|
@@ -23,19 +28,24 @@ export const EmptySlate = _ref => {
|
|
|
23
28
|
}
|
|
24
29
|
}, [markLoaded]);
|
|
25
30
|
return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
|
|
26
|
-
role: "status"
|
|
27
|
-
|
|
31
|
+
role: "status",
|
|
32
|
+
$compact: compact
|
|
33
|
+
}), illustration != null ? illustration : src ? /*#__PURE__*/React.createElement(StyledImg, {
|
|
28
34
|
ref: imageRef,
|
|
29
35
|
src: src,
|
|
30
36
|
alt: alt,
|
|
31
37
|
onLoad: markLoaded,
|
|
32
38
|
$loaded: loadedSrc === src
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
|
|
39
|
+
}) : null, /*#__PURE__*/React.createElement(SubContainer, {
|
|
40
|
+
$compact: compact
|
|
41
|
+
}, /*#__PURE__*/React.createElement(Title, {
|
|
42
|
+
weight: compact ? "semibold" : "light",
|
|
43
|
+
variant: compact ? "Body 1" : "Title 1",
|
|
44
|
+
$compact: compact
|
|
36
45
|
}, title), description && /*#__PURE__*/React.createElement(Description, {
|
|
37
|
-
color: "tertiary",
|
|
38
|
-
variant: "Body 1"
|
|
46
|
+
color: compact ? "secondary" : "tertiary",
|
|
47
|
+
variant: compact ? "Body 2" : "Body 1",
|
|
48
|
+
$compact: compact
|
|
39
49
|
}, description), children));
|
|
40
50
|
};
|
|
41
51
|
EmptySlate.Footer = EmptySlateFooter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptySlate.js","names":["React","useCallback","useLayoutEffect","useRef","useState","Container","Description","SubContainer","Title","StyledImg","EmptySlateFooter","isAlreadyLoaded","image","complete","naturalWidth","EmptySlate","_ref","title","description","src","alt","children","rest","_objectWithoutPropertiesLoose","_excluded","imageRef","_useState","loadedSrc","setLoadedSrc","markLoaded","current","createElement","_extends","role","ref","onLoad","$loaded","weight","variant","color","Footer","displayName"],"sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"sourcesContent":["import React, {\n HTMLAttributes,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport {\n Container,\n Description,\n SubContainer,\n Title,\n StyledImg,\n} from \"./EmptySlate.styles\";\nimport { EmptySlateFooter } from \"./EmptySlateFooter\";\n\nexport interface EmptySlateProps extends HTMLAttributes<HTMLDivElement> {\n src
|
|
1
|
+
{"version":3,"file":"EmptySlate.js","names":["React","useCallback","useLayoutEffect","useRef","useState","Container","Description","SubContainer","Title","StyledImg","EmptySlateFooter","isAlreadyLoaded","image","complete","naturalWidth","EmptySlate","_ref","title","description","src","_ref$alt","alt","illustration","_ref$size","size","children","rest","_objectWithoutPropertiesLoose","_excluded","compact","imageRef","_useState","loadedSrc","setLoadedSrc","markLoaded","current","createElement","_extends","role","$compact","ref","onLoad","$loaded","weight","variant","color","Footer","displayName"],"sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"sourcesContent":["import React, {\n HTMLAttributes,\n ReactNode,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport {\n Container,\n Description,\n SubContainer,\n Title,\n StyledImg,\n} from \"./EmptySlate.styles\";\nimport { EmptySlateFooter } from \"./EmptySlateFooter\";\n\nexport interface EmptySlateProps extends HTMLAttributes<HTMLDivElement> {\n /** The image. Not needed with an illustration. */\n src?: string;\n alt?: string;\n title: string;\n description?: string;\n /** A drawing in place of the image, such as an inline SVG that follows the theme. */\n illustration?: ReactNode;\n /** \"compact\" is stacked and centered, with small text, for a panel. */\n size?: \"regular\" | \"compact\";\n}\n\nconst isAlreadyLoaded = (image: HTMLImageElement | null) =>\n !!image && image.complete && image.naturalWidth > 0;\n\nexport const EmptySlate = ({\n title,\n description,\n src,\n alt = \"\",\n illustration,\n size = \"regular\",\n children,\n ...rest\n}: EmptySlateProps) => {\n const compact = size === \"compact\";\n const imageRef = useRef<HTMLImageElement>(null);\n const [loadedSrc, setLoadedSrc] = useState<string>();\n\n const markLoaded = useCallback(() => setLoadedSrc(src), [src]);\n\n useLayoutEffect(() => {\n if (isAlreadyLoaded(imageRef.current)) {\n markLoaded();\n }\n }, [markLoaded]);\n\n return (\n <Container {...rest} role=\"status\" $compact={compact}>\n {illustration ??\n (src ? (\n <StyledImg\n ref={imageRef}\n src={src}\n alt={alt}\n onLoad={markLoaded}\n $loaded={loadedSrc === src}\n />\n ) : null)}\n <SubContainer $compact={compact}>\n <Title\n weight={compact ? \"semibold\" : \"light\"}\n variant={compact ? \"Body 1\" : \"Title 1\"}\n $compact={compact}\n >\n {title}\n </Title>\n {description && (\n <Description\n color={compact ? \"secondary\" : \"tertiary\"}\n variant={compact ? \"Body 2\" : \"Body 1\"}\n $compact={compact}\n >\n {description}\n </Description>\n )}\n\n {children}\n </SubContainer>\n </Container>\n );\n};\n\nEmptySlate.Footer = EmptySlateFooter;\n\nEmptySlate.displayName = \"EmptySlate\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,eAAe,EACfC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,SACEC,SAAS,EACTC,WAAW,EACXC,YAAY,EACZC,KAAK,EACLC,SAAS,QACJ,qBAAqB;AAC5B,SAASC,gBAAgB,QAAQ,oBAAoB;AAcrD,MAAMC,eAAe,GAAIC,KAA8B,IACrD,CAAC,CAACA,KAAK,IAAIA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,YAAY,GAAG,CAAC;AAErD,OAAO,MAAMC,UAAU,GAAGC,IAAA,IASH;EAAA,IARrBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IAAAC,QAAA,GAAAJ,IAAA,CACHK,GAAG;IAAHA,GAAG,GAAAD,QAAA,cAAG,EAAE,GAAAA,QAAA;IACRE,YAAY,GAAAN,IAAA,CAAZM,YAAY;IAAAC,SAAA,GAAAP,IAAA,CACZQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,SAAS,GAAAA,SAAA;IAChBE,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,MAAMC,OAAO,GAAGL,IAAI,KAAK,SAAS;EAClC,MAAMM,QAAQ,GAAG3B,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAA4B,SAAA,GAAkC3B,QAAQ,CAAS,CAAC;IAA7C4B,SAAS,GAAAD,SAAA;IAAEE,YAAY,GAAAF,SAAA;EAE9B,MAAMG,UAAU,GAAGjC,WAAW,CAAC,MAAMgC,YAAY,CAACd,GAAG,CAAC,EAAE,CAACA,GAAG,CAAC,CAAC;EAE9DjB,eAAe,CAAC,MAAM;IACpB,IAAIS,eAAe,CAACmB,QAAQ,CAACK,OAAO,CAAC,EAAE;MACrCD,UAAU,CAAC,CAAC;IACd;EACF,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,oBACElC,KAAA,CAAAoC,aAAA,CAAC/B,SAAS,EAAAgC,QAAA,KAAKX,IAAI;IAAEY,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAEV;EAAQ,IAClDP,YAAY,WAAZA,YAAY,GACVH,GAAG,gBACFnB,KAAA,CAAAoC,aAAA,CAAC3B,SAAS;IACR+B,GAAG,EAAEV,QAAS;IACdX,GAAG,EAAEA,GAAI;IACTE,GAAG,EAAEA,GAAI;IACToB,MAAM,EAAEP,UAAW;IACnBQ,OAAO,EAAEV,SAAS,KAAKb;EAAI,CAC5B,CAAC,GACA,IAAI,eACVnB,KAAA,CAAAoC,aAAA,CAAC7B,YAAY;IAACgC,QAAQ,EAAEV;EAAQ,gBAC9B7B,KAAA,CAAAoC,aAAA,CAAC5B,KAAK;IACJmC,MAAM,EAAEd,OAAO,GAAG,UAAU,GAAG,OAAQ;IACvCe,OAAO,EAAEf,OAAO,GAAG,QAAQ,GAAG,SAAU;IACxCU,QAAQ,EAAEV;EAAQ,GAEjBZ,KACI,CAAC,EACPC,WAAW,iBACVlB,KAAA,CAAAoC,aAAA,CAAC9B,WAAW;IACVuC,KAAK,EAAEhB,OAAO,GAAG,WAAW,GAAG,UAAW;IAC1Ce,OAAO,EAAEf,OAAO,GAAG,QAAQ,GAAG,QAAS;IACvCU,QAAQ,EAAEV;EAAQ,GAEjBX,WACU,CACd,EAEAO,QACW,CACL,CAAC;AAEhB,CAAC;AAEDV,UAAU,CAAC+B,MAAM,GAAGpC,gBAAgB;AAEpCK,UAAU,CAACgC,WAAW,GAAG,YAAY","ignoreList":[]}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
interface Compact {
|
|
2
|
+
$compact?: boolean;
|
|
3
|
+
}
|
|
4
|
+
export declare const Container: import("styled-components").StyledComponent<"div", any, Compact, never>;
|
|
5
|
+
export declare const SubContainer: import("styled-components").StyledComponent<"div", any, Compact, never>;
|
|
3
6
|
export declare const StyledImg: import("styled-components").StyledComponent<"img", any, {
|
|
4
7
|
$loaded: boolean;
|
|
5
8
|
}, never>;
|
|
6
9
|
export declare const Title: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
7
10
|
displayName?: string;
|
|
8
|
-
}, any,
|
|
11
|
+
}, any, Compact, never>;
|
|
9
12
|
export declare const Description: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
10
13
|
displayName?: string;
|
|
11
|
-
}, any,
|
|
14
|
+
}, any, Compact, never>;
|
|
12
15
|
export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
|
+
export {};
|
|
13
17
|
//# sourceMappingURL=EmptySlate.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptySlate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"EmptySlate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.styles.ts"],"names":[],"mappings":"AAKA,UAAU,OAAO;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,yEAkBrB,CAAC;AAEF,eAAO,MAAM,YAAY,yEAgBxB,CAAC;AAEF,eAAO,MAAM,SAAS;aAAyB,OAAO;SAIrD,CAAC;AAEF,eAAO,MAAM,KAAK;;uBAmBjB,CAAC;AAEF,eAAO,MAAM,WAAW;;uBAkBvB,CAAC;AAEF,eAAO,MAAM,eAAe,oEAU3B,CAAC"}
|