@procore/core-react 12.34.1 → 12.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/dist/AnchorNavigation/AnchorNavigation.styles.js +3 -3
- package/dist/Avatar/Avatar.styles.js +5 -5
- package/dist/AvatarStack/AvatarStack.styles.js +7 -7
- package/dist/Badge/Badge.styles.js +2 -2
- package/dist/BadgePill/BadgePill.styles.js +4 -4
- package/dist/Banner/Banner.styles.js +10 -10
- package/dist/Box/Box.styles.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
- package/dist/Button/Button.styles.js +5 -5
- package/dist/Calendar/Calendar.d.ts +2 -2
- package/dist/Calendar/Calendar.js.map +1 -1
- package/dist/Calendar/Calendar.styles.d.ts +6 -3
- package/dist/Calendar/Calendar.styles.js +15 -9
- package/dist/Calendar/Calendar.styles.js.map +1 -1
- package/dist/Calendar/Calendar.types.d.ts +1 -31
- package/dist/Calendar/Calendar.types.js.map +1 -1
- package/dist/Card/Card.styles.js +1 -1
- package/dist/Checkbox/Checkbox.styles.js +6 -6
- package/dist/Checkbox/CheckboxTooltip.js +1 -1
- package/dist/ContactItem/ContactItem.styles.js +5 -5
- package/dist/ContactItem/ContactItem.types.d.ts +2 -0
- package/dist/ContactItem/ContactItem.types.js.map +1 -1
- package/dist/Content/Content.styles.js +2 -2
- package/dist/DateInput/DateInput.js +58 -53
- package/dist/DateInput/DateInput.js.map +1 -1
- package/dist/DateInput/DateInput.styles.js +6 -6
- package/dist/DetailPage/DetailPage.styles.js +7 -7
- package/dist/Dropdown/Dropdown.styles.js +3 -3
- package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
- package/dist/Dropzone/Dropzone.js +1 -1
- package/dist/Dropzone/Dropzone.styles.js +9 -9
- package/dist/EmptyState/EmptyState.styles.js +6 -6
- package/dist/Field/Field.styles.js +3 -3
- package/dist/FileList/FileList.styles.js +4 -4
- package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
- package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
- package/dist/FileSelect/FileSelect.styles.js +2 -2
- package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
- package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
- package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
- package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
- package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
- package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
- package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
- package/dist/FileToken/FileToken.styles.js +4 -4
- package/dist/FilterToken/FilterToken.styles.js +5 -5
- package/dist/FlexList/FlexList.styles.js +1 -1
- package/dist/Form/Form.styles.js +14 -14
- package/dist/Form/StyledFormikForm.styles.js +2 -2
- package/dist/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
- package/dist/Grid/Grid.styles.js +2 -2
- package/dist/GroupSelect/GroupSelect.styles.js +1 -1
- package/dist/Input/Input.styles.js +1 -1
- package/dist/Link/Link.styles.js +1 -1
- package/dist/ListPage/ListPage.styles.js +8 -8
- package/dist/Loader/Loader.styles.js +2 -2
- package/dist/MenuImperative/MenuImperative.styles.js +10 -10
- package/dist/Modal/Modal.styles.js +13 -13
- package/dist/MultiSelect/MultiSelect.styles.js +6 -6
- package/dist/NextMenu/NextMenu.styles.js +3 -3
- package/dist/Notation/Notation.js +1 -1
- package/dist/NumberInput/NumberInput.styles.js +7 -7
- package/dist/Overlay/OverlayArrow.styles.js +1 -1
- package/dist/PageLayout/PageLayout.styles.js +16 -16
- package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
- package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
- package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
- package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js +3 -3
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Panel/Panel.js +6 -2
- package/dist/Panel/Panel.js.map +1 -1
- package/dist/Panel/Panel.styles.js +11 -11
- package/dist/Pill/Pill.styles.js +3 -3
- package/dist/PillSelect/PillSelect.styles.js +4 -4
- package/dist/Popover/Popover.styles.js +2 -2
- package/dist/Portal/Portal.js +4 -1
- package/dist/Portal/Portal.js.map +1 -1
- package/dist/Portal/Portal.styles.js +1 -1
- package/dist/Portal/Portal.types.d.ts +1 -1
- package/dist/Portal/Portal.types.js.map +1 -1
- package/dist/Portal/PortalProvider.d.ts +5 -0
- package/dist/Portal/PortalProvider.js +14 -0
- package/dist/Portal/PortalProvider.js.map +1 -0
- package/dist/Portal/PortalProvider.types.d.ts +4 -0
- package/dist/Portal/PortalProvider.types.js +2 -0
- package/dist/Portal/PortalProvider.types.js.map +1 -0
- package/dist/Portal/index.d.ts +2 -0
- package/dist/Portal/index.js +1 -0
- package/dist/Portal/index.js.map +1 -1
- package/dist/ProgressBar/ProgressBar.styles.js +2 -2
- package/dist/RadioButton/RadioButton.styles.js +3 -3
- package/dist/Required/Required.styles.js +3 -3
- package/dist/Search/Search.styles.js +5 -5
- package/dist/Section/Section.styles.js +7 -7
- package/dist/SegmentedController/SegmentedController.styles.js +4 -4
- package/dist/Select/Select.styles.js +7 -7
- package/dist/Semantic/Semantic.styles.js +9 -9
- package/dist/Slider/Slider.styles.js +5 -5
- package/dist/Spinner/Spinner.styles.js +7 -7
- package/dist/SplitViewCard/SplitViewCard.context.js +10 -2
- package/dist/SplitViewCard/SplitViewCard.context.js.map +1 -1
- package/dist/SplitViewCard/SplitViewCard.js +4 -2
- package/dist/SplitViewCard/SplitViewCard.js.map +1 -1
- package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
- package/dist/SplitViewCard/SplitViewCard.types.js.map +1 -1
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.js +38 -38
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.d.ts +2 -2
- package/dist/Table/Table.js +58 -18
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/Table.styles.d.ts +3 -1
- package/dist/Table/Table.styles.js +32 -31
- package/dist/Table/Table.styles.js.map +1 -1
- package/dist/Table/Table.types.d.ts +5 -0
- package/dist/Table/Table.types.js.map +1 -1
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tabs.styles.js +15 -15
- package/dist/Tearsheet/Tearsheet.styles.js +5 -5
- package/dist/TextArea/TextArea.js +1 -0
- package/dist/TextArea/TextArea.js.map +1 -1
- package/dist/TextArea/TextArea.styles.js +1 -1
- package/dist/TextEditor/TextEditor.d.ts +1 -1
- package/dist/TextEditor/TextEditor.js +67 -12
- package/dist/TextEditor/TextEditor.js.map +1 -1
- package/dist/TextEditor/TextEditor.types.d.ts +17 -0
- package/dist/TextEditor/TextEditor.types.js.map +1 -1
- package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
- package/dist/Thumbnail/Thumbnail.styles.js +17 -17
- package/dist/Thumbnail/ThumbnailDocumentIcon.d.ts +3 -1
- package/dist/Thumbnail/ThumbnailDocumentIcon.js +61 -21
- package/dist/Thumbnail/ThumbnailDocumentIcon.js.map +1 -1
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TieredSelect.styles.js +9 -9
- package/dist/Tile/Tile.styles.js +8 -8
- package/dist/Title/Title.styles.js +7 -7
- package/dist/Toast/Toast.js +1 -1
- package/dist/Toast/Toast.js.map +1 -1
- package/dist/Toast/Toast.styles.js +3 -3
- package/dist/ToggleButton/ToggleButton.styles.js +1 -1
- package/dist/Token/Token.styles.js +3 -3
- package/dist/ToolHeader/ToolHeader.styles.js +6 -6
- package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
- package/dist/Tooltip/Tooltip.styles.js +2 -2
- package/dist/Tree/Tree.styles.js +9 -9
- package/dist/Typeahead/Typeahead.styles.js +3 -3
- package/dist/Typography/Typography.styles.js +1 -1
- package/dist/Typography/Typography.table.story.js +2 -2
- package/dist/_hooks/I18n.d.ts +162 -11
- package/dist/_locales/de-DE.json +9 -3
- package/dist/_locales/en-AU.json +8 -2
- package/dist/_locales/en-CA.json +8 -2
- package/dist/_locales/en-GB.json +8 -2
- package/dist/_locales/en.json +4 -0
- package/dist/_locales/es-ES.json +10 -4
- package/dist/_locales/es.json +13 -7
- package/dist/_locales/fr-CA.json +9 -3
- package/dist/_locales/fr-FR.json +10 -4
- package/dist/_locales/is-IS.json +9 -3
- package/dist/_locales/it-IT.json +54 -48
- package/dist/_locales/ja-JP.json +10 -4
- package/dist/_locales/pl-PL.json +8 -2
- package/dist/_locales/pseudo.json +4 -0
- package/dist/_locales/pt-BR.json +9 -3
- package/dist/_locales/pt-PT.json +188 -182
- package/dist/_locales/th-TH.json +11 -5
- package/dist/_locales/zh-SG.json +8 -2
- package/dist/_locales/zh-TW.json +13 -7
- package/dist/_storyHelpers_/components/Deprecation.styles.js +1 -1
- package/dist/_storyHelpers_/components/StoryGrid.js +3 -3
- package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +3 -3
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +24 -24
- package/dist/_typedoc/Badge/Badge.types.json +6 -6
- package/dist/_typedoc/Banner/Banner.types.json +13 -13
- package/dist/_typedoc/Box/Box.types.json +68 -68
- package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
- package/dist/_typedoc/Button/Button.types.json +13 -13
- package/dist/_typedoc/Calendar/Calendar.types.json +89 -89
- package/dist/_typedoc/Card/Card.types.json +6 -6
- package/dist/_typedoc/Checkbox/Checkbox.types.json +8 -8
- package/dist/_typedoc/ContactItem/ContactItem.types.json +12 -10
- package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
- package/dist/_typedoc/DateSelect/DateSelect.types.json +13 -13
- package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
- package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +30 -30
- package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
- package/dist/_typedoc/EmptyState/EmptyState.types.json +16 -16
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
- package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
- package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
- package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
- package/dist/_typedoc/Flex/Flex.types.json +27 -27
- package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
- package/dist/_typedoc/Form/Form.types.json +794 -754
- package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +52 -52
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +1 -1
- package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
- package/dist/_typedoc/Menu/Menu.types.json +62 -62
- package/dist/_typedoc/MenuImperative/MenuImperative.types.json +77 -77
- package/dist/_typedoc/Modal/Modal.types.json +46 -46
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +31 -31
- package/dist/_typedoc/NextTile/NextTile.types.json +32 -32
- package/dist/_typedoc/Notation/Notation.types.json +4 -4
- package/dist/_typedoc/NumberInput/NumberInput.types.json +48 -48
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +34 -34
- package/dist/_typedoc/PageLayout/PageLayout.types.json +26 -26
- package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
- package/dist/_typedoc/Panel/Panel.types.json +30 -30
- package/dist/_typedoc/Pill/Pill.types.json +2 -2
- package/dist/_typedoc/PillSelect/PillSelect.types.json +51 -51
- package/dist/_typedoc/Popover/Popover.types.json +15 -15
- package/dist/_typedoc/ProgressBar/ProgressBar.types.json +7 -7
- package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
- package/dist/_typedoc/Required/Required.types.json +5 -5
- package/dist/_typedoc/Search/Search.types.json +18 -18
- package/dist/_typedoc/Section/Section.types.json +15 -15
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
- package/dist/_typedoc/Select/Select.types.json +64 -64
- package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
- package/dist/_typedoc/Slider/Slider.types.json +6 -6
- package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
- package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +14 -14
- package/dist/_typedoc/Table/Table.types.json +113 -103
- package/dist/_typedoc/Tabs/Tabs.types.json +20 -20
- package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
- package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
- package/dist/_typedoc/TextEditor/TextEditor.types.json +29 -9
- package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
- package/dist/_typedoc/Thumbnail/Thumbnail.types.json +19 -19
- package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +43 -43
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +29 -29
- package/dist/_typedoc/Tile/Tile.types.json +8 -8
- package/dist/_typedoc/Title/Title.types.json +1 -1
- package/dist/_typedoc/Toast/Toast.types.json +4 -4
- package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
- package/dist/_typedoc/Token/Token.types.json +7 -7
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
- package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +8 -8
- package/dist/_typedoc/Tooltip/Tooltip.types.json +13 -13
- package/dist/_typedoc/Tree/Tree.types.json +86 -86
- package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
- package/dist/_typedoc/Typography/Typography.types.json +9 -9
- package/dist/_typedoc/_utils/types.json +3 -3
- package/dist/_typedoc/deprecations.json +1 -1
- package/dist/_utils/a11y.d.ts +1 -0
- package/dist/_utils/a11y.js +8 -0
- package/dist/_utils/a11y.js.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.types.js","names":[],"sources":["../../src/Table/Table.types.ts"],"sourcesContent":["import type { CurrencyOptions } from '@procore/globalization-toolkit'\nimport type React from 'react'\nimport type { DateSelectProps } from '../DateSelect'\nimport type { InputProps } from '../Input'\nimport type { SelectProps } from '../Select'\nimport type { Props, Size } from '../_utils/types'\n\nexport type InputCellSize = Extract<\n Size,\n 'block' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'\n>\n\nexport type TableVariant = '' | 'fixed'\n\nexport type TableColumnSortOrder = 'asc' | 'desc' | ''\n\nexport type TableCellVariant = '' | 'asc' | 'desc' | 'snugfit'\n\nexport interface BodyCellProps extends Props {\n /**\n * Shrink the cell around the contents\n * @since 10.19.0\n */\n snugfit?: boolean\n\n /**\n * The table body cell variant\n * @since 10.19.0\n * @deprecated Please use `sortOrder` prop instead of `esc/desc` variants, and `snugfit` prop instead of `snugfit` variant\n * @deprecatedSince 11.15.1\n */\n variant?: TableCellVariant\n}\n\nexport interface BodyProps extends Props {}\n\nexport interface BodyRowProps extends Props {\n /**\n * Sets row text color to red to signify overdue items\n * @since 10.19.0\n */\n overdue?: boolean\n}\n\nexport interface CaratProps {\n /**\n * Whether or not the carat is rotated\n * @since 10.19.0\n */\n expanded?: boolean\n\n /**\n * Callback to fire when clicked\n * @since 10.19.0\n */\n onClick?: React.EventHandler<any>\n}\n\nexport interface ContainerProps {\n /**\n * @since 10.19.0\n */\n children?: React.ReactNode\n\n /**\n * Adjust the container to support a table shelf\n * @default false\n * @since 10.19.0\n * */\n shelf?: boolean\n}\n\nexport interface CurrencyCellProps extends Omit<Props, 'children'> {\n /**\n * @deprecated Please use `value` prop instead\n * @deprecatedSince 11.28.0\n */\n children?: React.ReactNode\n\n /**\n * Optional formatting configs\n * @since 11.28.0\n */\n currencyOptions?: CurrencyOptions\n\n /**\n * Unformatted value to be displayed\n * @since 11.28.0\n */\n value?: number\n}\n\nexport interface GroupProps extends Props {\n /**\n * Number of columns in table\n * @since 10.19.0\n */\n colSpan?: number\n\n /**\n * Determines indentation of the group and content\n * @since 10.19.0\n */\n depth?: number\n}\n\nexport interface GroupTitleProps extends Props {}\n\nexport interface TableHeaderCellProps extends BodyCellProps {\n /**\n * Is this the column sortable\n * @since 10.19.0\n * @deprecated Please use `sortOrder` prop instead\n * @deprecatedSince 11.15.1\n */\n sortable?: boolean\n\n /**\n * Column sorting order\n * @since 11.15.1\n */\n sortOrder?: TableColumnSortOrder\n\n /**\n * Column sorting order change callback.\n * Loops over from \"asc\" to \"desc\" to \"\", set should be assigned to `sortOrder` prop.\n * @since 11.15.1\n */\n onSortOrderChange?: (nextSortOrder: TableColumnSortOrder) => void\n}\n\nexport interface HeaderProps extends Props {}\n\nexport interface HeaderRowProps extends Props {}\n\nexport interface IconCellProps extends Props {}\n\nexport interface InputCellProps extends Omit<InputProps, 'size'> {\n /**\n * Message to be displayed below the input during an error\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner for processing inline editable content\n * @default false\n * @since 10.19.0\n */\n processing?: boolean\n\n /**\n * The size of the input cell and corresponding error message\n * @default 'block'\n * @since 10.19.0\n */\n size?: InputCellSize\n}\n\nexport interface LinkCellProps extends Props {\n /**\n * Destination url\n * @default ''\n * @since 10.19.0\n * */\n href: string\n}\n\nexport interface PercentCellProps extends Props {}\n\nexport interface TableSelectCellProps extends SelectProps {\n /**\n * Message to be displayed below the select during an error\n * @default ''\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner that covers inline editable content\n * @default false\n * @since 10.19.0\n */\n processing?: boolean\n}\n\nexport interface DateSelectCellProps extends DateSelectProps {\n /**\n * @since 10.19.0\n */\n className?: string\n\n /**\n * Message to be displayed below the date select during an error\n * @default ''\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner that covers inline editable content\n * @default false\n * @since 10.19.0\n */\n processing?: boolean\n}\n\nexport interface TableProps extends Props {\n /**\n * @since 10.19.0\n */\n inline?: boolean\n\n /**\n * The table variant\n * @since 10.19.0\n */\n variant?: TableVariant\n}\n\nexport interface TextAreaCellProps extends Props {\n /**\n * Message to be displayed below the textarea during an error\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner for processing inline editable content\n * @since 10.19.0\n */\n processing?: boolean\n\n /**\n * Sets whether it is resizable\n * @since 10.19.0\n */\n resizable?: boolean\n}\n\nexport interface TableTextCellProps extends Props {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Table.types.js","names":[],"sources":["../../src/Table/Table.types.ts"],"sourcesContent":["import type { CurrencyOptions } from '@procore/globalization-toolkit'\nimport type React from 'react'\nimport type { DateSelectProps } from '../DateSelect'\nimport type { InputProps } from '../Input'\nimport type { SelectProps } from '../Select'\nimport type { Props, Size } from '../_utils/types'\n\nexport type InputCellSize = Extract<\n Size,\n 'block' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'\n>\n\nexport type TableVariant = '' | 'fixed'\n\nexport type TableColumnSortOrder = 'asc' | 'desc' | ''\n\nexport type TableCellVariant = '' | 'asc' | 'desc' | 'snugfit'\n\nexport interface BodyCellProps extends Props {\n /**\n * Shrink the cell around the contents\n * @since 10.19.0\n */\n snugfit?: boolean\n\n /**\n * The table body cell variant\n * @since 10.19.0\n * @deprecated Please use `sortOrder` prop instead of `esc/desc` variants, and `snugfit` prop instead of `snugfit` variant\n * @deprecatedSince 11.15.1\n */\n variant?: TableCellVariant\n}\n\nexport interface BodyProps extends Props {}\n\nexport interface BodyRowProps extends Props {\n /**\n * Sets row text color to red to signify overdue items\n * @since 10.19.0\n */\n overdue?: boolean\n}\n\nexport interface CaratProps {\n /**\n * Whether or not the carat is rotated\n * @since 10.19.0\n */\n expanded?: boolean\n\n /**\n * Callback to fire when clicked\n * @since 10.19.0\n */\n onClick?: React.EventHandler<any>\n\n /**\n * Custom aria-label for the carat button. If not provided, defaults to internationalized \"Expand\" or \"Collapse\" based on expanded state.\n * @since 12.34.0\n */\n 'aria-label'?: string\n}\n\nexport interface ContainerProps {\n /**\n * @since 10.19.0\n */\n children?: React.ReactNode\n\n /**\n * Adjust the container to support a table shelf\n * @default false\n * @since 10.19.0\n * */\n shelf?: boolean\n}\n\nexport interface CurrencyCellProps extends Omit<Props, 'children'> {\n /**\n * @deprecated Please use `value` prop instead\n * @deprecatedSince 11.28.0\n */\n children?: React.ReactNode\n\n /**\n * Optional formatting configs\n * @since 11.28.0\n */\n currencyOptions?: CurrencyOptions\n\n /**\n * Unformatted value to be displayed\n * @since 11.28.0\n */\n value?: number\n}\n\nexport interface GroupProps extends Props {\n /**\n * Number of columns in table\n * @since 10.19.0\n */\n colSpan?: number\n\n /**\n * Determines indentation of the group and content\n * @since 10.19.0\n */\n depth?: number\n}\n\nexport interface GroupTitleProps extends Props {}\n\nexport interface TableHeaderCellProps extends BodyCellProps {\n /**\n * Is this the column sortable\n * @since 10.19.0\n * @deprecated Please use `sortOrder` prop instead\n * @deprecatedSince 11.15.1\n */\n sortable?: boolean\n\n /**\n * Column sorting order\n * @since 11.15.1\n */\n sortOrder?: TableColumnSortOrder\n\n /**\n * Column sorting order change callback.\n * Loops over from \"asc\" to \"desc\" to \"\", set should be assigned to `sortOrder` prop.\n * @since 11.15.1\n */\n onSortOrderChange?: (nextSortOrder: TableColumnSortOrder) => void\n}\n\nexport interface HeaderProps extends Props {}\n\nexport interface HeaderRowProps extends Props {}\n\nexport interface IconCellProps extends Props {}\n\nexport interface InputCellProps extends Omit<InputProps, 'size'> {\n /**\n * Message to be displayed below the input during an error\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner for processing inline editable content\n * @default false\n * @since 10.19.0\n */\n processing?: boolean\n\n /**\n * The size of the input cell and corresponding error message\n * @default 'block'\n * @since 10.19.0\n */\n size?: InputCellSize\n}\n\nexport interface LinkCellProps extends Props {\n /**\n * Destination url\n * @default ''\n * @since 10.19.0\n * */\n href: string\n}\n\nexport interface PercentCellProps extends Props {}\n\nexport interface TableSelectCellProps extends SelectProps {\n /**\n * Message to be displayed below the select during an error\n * @default ''\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner that covers inline editable content\n * @default false\n * @since 10.19.0\n */\n processing?: boolean\n}\n\nexport interface DateSelectCellProps extends DateSelectProps {\n /**\n * @since 10.19.0\n */\n className?: string\n\n /**\n * Message to be displayed below the date select during an error\n * @default ''\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner that covers inline editable content\n * @default false\n * @since 10.19.0\n */\n processing?: boolean\n}\n\nexport interface TableProps extends Props {\n /**\n * @since 10.19.0\n */\n inline?: boolean\n\n /**\n * The table variant\n * @since 10.19.0\n */\n variant?: TableVariant\n}\n\nexport interface TextAreaCellProps extends Props {\n /**\n * Message to be displayed below the textarea during an error\n * @since 10.19.0\n */\n errorMessage?: string\n\n /**\n * Triggers the spinner for processing inline editable content\n * @since 10.19.0\n */\n processing?: boolean\n\n /**\n * Sets whether it is resizable\n * @since 10.19.0\n */\n resizable?: boolean\n}\n\nexport interface TableTextCellProps extends Props {}\n"],"mappings":""}
|
|
@@ -4,22 +4,22 @@ import { spacing } from '../_styles/spacing';
|
|
|
4
4
|
var tableShelfShadow = '-4px 0px 5px 0px rgba(112, 112, 112, 0.1)';
|
|
5
5
|
export var StyledShelf = /*#__PURE__*/styled.div.withConfig({
|
|
6
6
|
displayName: "StyledShelf",
|
|
7
|
-
componentId: "core-
|
|
7
|
+
componentId: "core-12_35_0__sc-a6498a-0"
|
|
8
8
|
})(["position:absolute;right:0;top:0;bottom:0;box-shadow:", ";background-color:", ";"], tableShelfShadow, colors.white);
|
|
9
9
|
export var StyledHead = /*#__PURE__*/styled.div.withConfig({
|
|
10
10
|
displayName: "StyledHead",
|
|
11
|
-
componentId: "core-
|
|
11
|
+
componentId: "core-12_35_0__sc-a6498a-1"
|
|
12
12
|
})(["background-color:", ";transition:background-color 0.2s ease-in-out;"], colors.gray96);
|
|
13
13
|
export var StyledBodyRow = /*#__PURE__*/styled.div.withConfig({
|
|
14
14
|
displayName: "StyledBodyRow",
|
|
15
|
-
componentId: "core-
|
|
15
|
+
componentId: "core-12_35_0__sc-a6498a-2"
|
|
16
16
|
})(["border-top:1px solid ", ";transition:background-color 0.2s ease-in-out;"], colors.gray85);
|
|
17
17
|
export var StyledHeadCell = /*#__PURE__*/styled.div.withConfig({
|
|
18
18
|
displayName: "StyledHeadCell",
|
|
19
|
-
componentId: "core-
|
|
19
|
+
componentId: "core-12_35_0__sc-a6498a-3"
|
|
20
20
|
})(["text-align:left;padding:", "px;line-height:13px;"], spacing.lg);
|
|
21
21
|
export var StyledBodyCell = /*#__PURE__*/styled.div.withConfig({
|
|
22
22
|
displayName: "StyledBodyCell",
|
|
23
|
-
componentId: "core-
|
|
23
|
+
componentId: "core-12_35_0__sc-a6498a-4"
|
|
24
24
|
})(["padding:", "px;line-height:13px;"], spacing.lg);
|
|
25
25
|
//# sourceMappingURL=TableShelf.styles.js.map
|
package/dist/Tabs/Tabs.styles.js
CHANGED
|
@@ -17,17 +17,17 @@ var borderRadius = /*#__PURE__*/css(["border-radius:", "px ", "px 0 0;"], spacin
|
|
|
17
17
|
*/
|
|
18
18
|
var StyledTabBase = /*#__PURE__*/styled.div.withConfig({
|
|
19
19
|
displayName: "StyledTabBase",
|
|
20
|
-
componentId: "core-
|
|
20
|
+
componentId: "core-12_35_0__sc-17s58xs-0"
|
|
21
21
|
})(["align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;position:relative;white-space:nowrap;text-decoration:none;background-color:transparent;border:none;font-family:inherit;padding:0;"]);
|
|
22
22
|
var StyledTabInnerBase = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledTabInnerBase",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_35_0__sc-17s58xs-1"
|
|
25
25
|
})(["align-self:baseline;box-sizing:border-box;&,> a{display:flex;text-decoration:none;width:100%;}"]);
|
|
26
26
|
|
|
27
27
|
// This so that it can be visible/hidden via CSS down below
|
|
28
28
|
var StyledDropdownTabBase = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
29
29
|
displayName: "StyledDropdownTabBase",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_35_0__sc-17s58xs-2"
|
|
31
31
|
})(["", ""], hiddenTab);
|
|
32
32
|
|
|
33
33
|
//// END BASE LAYOUT COMPONENTS FOR TABS ////
|
|
@@ -50,11 +50,11 @@ function getTabStyle() {
|
|
|
50
50
|
}
|
|
51
51
|
var StyledTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
52
52
|
displayName: "StyledTab",
|
|
53
|
-
componentId: "core-
|
|
53
|
+
componentId: "core-12_35_0__sc-17s58xs-3"
|
|
54
54
|
})(["", ""], getTabStyle);
|
|
55
55
|
var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
56
56
|
displayName: "StyledTabInner",
|
|
57
|
-
componentId: "core-
|
|
57
|
+
componentId: "core-12_35_0__sc-17s58xs-4"
|
|
58
58
|
})(["", " padding:0 ", "px;font-weight:", ";&,> a{", ";color:", ";height:23px;}", ""], getTypographyIntent('body'), spacing.xs, function (_ref3) {
|
|
59
59
|
var $selected = _ref3.$selected;
|
|
60
60
|
return $selected ? 600 : 400;
|
|
@@ -67,15 +67,15 @@ var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
|
67
67
|
});
|
|
68
68
|
var StyledDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
|
|
69
69
|
displayName: "StyledDropdownTab",
|
|
70
|
-
componentId: "core-
|
|
70
|
+
componentId: "core-12_35_0__sc-17s58xs-5"
|
|
71
71
|
})(["", ""], getTabStyle);
|
|
72
72
|
var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
|
|
73
73
|
displayName: "StyledDropdownTabInner",
|
|
74
|
-
componentId: "core-
|
|
74
|
+
componentId: "core-12_35_0__sc-17s58xs-6"
|
|
75
75
|
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
|
|
76
76
|
var StyledLink = /*#__PURE__*/styled.span.withConfig({
|
|
77
77
|
displayName: "StyledLink",
|
|
78
|
-
componentId: "core-
|
|
78
|
+
componentId: "core-12_35_0__sc-17s58xs-7"
|
|
79
79
|
})(["align-items:center;display:flex;height:23px;", ";box-sizing:border-box;"], borderRadius);
|
|
80
80
|
|
|
81
81
|
//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////
|
|
@@ -92,34 +92,34 @@ function getHelixHeaderTabStyles() {
|
|
|
92
92
|
}
|
|
93
93
|
var StyledGlobalNavigationTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
94
94
|
displayName: "StyledGlobalNavigationTab",
|
|
95
|
-
componentId: "core-
|
|
95
|
+
componentId: "core-12_35_0__sc-17s58xs-8"
|
|
96
96
|
})(["", ""], getHelixHeaderTabStyles);
|
|
97
97
|
var StyledGlobalNavigationDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
|
|
98
98
|
displayName: "StyledGlobalNavigationDropdownTab",
|
|
99
|
-
componentId: "core-
|
|
99
|
+
componentId: "core-12_35_0__sc-17s58xs-9"
|
|
100
100
|
})(["", ""], getHelixHeaderTabStyles);
|
|
101
101
|
var StyledGlobalNavigationDropdownTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
102
102
|
displayName: "StyledGlobalNavigationDropdownTabInner",
|
|
103
|
-
componentId: "core-
|
|
103
|
+
componentId: "core-12_35_0__sc-17s58xs-10"
|
|
104
104
|
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
|
|
105
105
|
var StyledGlobalNavigationLink = /*#__PURE__*/styled.span.withConfig({
|
|
106
106
|
displayName: "StyledGlobalNavigationLink",
|
|
107
|
-
componentId: "core-
|
|
107
|
+
componentId: "core-12_35_0__sc-17s58xs-11"
|
|
108
108
|
})(["padding-left:6px;padding-right:6px;"]);
|
|
109
109
|
|
|
110
110
|
//// END HELIX GLOBAL NAVIGATION TAB STYLES ////
|
|
111
111
|
|
|
112
112
|
export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
|
|
113
113
|
displayName: "StyledOverlay",
|
|
114
|
-
componentId: "core-
|
|
114
|
+
componentId: "core-12_35_0__sc-17s58xs-12"
|
|
115
115
|
})(["max-height:40vh;", "{padding:0;display:flex;justify-content:center;a{margin:unset;padding:unset;}}", "{padding:0;display:flex;}", "{padding:2px 16px 4px 16px;}", ",", "{color:", ";border-radius:0;display:flex;width:100%;background:inherit;font-weight:inherit;font-size:inherit;padding:0;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInnerBase, StyledLink, StyledTabBase, colors.gray15, StyledLink, StyledTabBase, colors.blue50);
|
|
116
116
|
export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
|
|
117
117
|
displayName: "StyledTabList",
|
|
118
|
-
componentId: "core-
|
|
118
|
+
componentId: "core-12_35_0__sc-17s58xs-13"
|
|
119
119
|
})(["display:flex;width:100%;"]);
|
|
120
120
|
export var StyledTabs = /*#__PURE__*/styled.nav.withConfig({
|
|
121
121
|
displayName: "StyledTabs",
|
|
122
|
-
componentId: "core-
|
|
122
|
+
componentId: "core-12_35_0__sc-17s58xs-14"
|
|
123
123
|
})(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref6) {
|
|
124
124
|
var $dark = _ref6.$dark;
|
|
125
125
|
return $dark && colors.gray15;
|
|
@@ -48,7 +48,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
|
|
|
48
48
|
};
|
|
49
49
|
export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
|
|
50
50
|
displayName: "StyledTearsheetContent",
|
|
51
|
-
componentId: "core-
|
|
51
|
+
componentId: "core-12_35_0__sc-ljrxoq-0"
|
|
52
52
|
})(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
|
|
53
53
|
var $open = _ref.$open,
|
|
54
54
|
$placement = _ref.$placement;
|
|
@@ -68,7 +68,7 @@ export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
|
|
|
68
68
|
export var minScrimSize = spacing.xxl * 3;
|
|
69
69
|
export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
|
|
70
70
|
displayName: "StyledTearsheetBody",
|
|
71
|
-
componentId: "core-
|
|
71
|
+
componentId: "core-12_35_0__sc-ljrxoq-1"
|
|
72
72
|
})(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";&:focus-visible{", "}", " ", "}"], colors.white, getFocusInset(), function (_ref5) {
|
|
73
73
|
var $block = _ref5.$block,
|
|
74
74
|
$placement = _ref5.$placement,
|
|
@@ -89,7 +89,7 @@ var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scal
|
|
|
89
89
|
var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
|
|
90
90
|
export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
|
|
91
91
|
displayName: "StyledScrimContainer",
|
|
92
|
-
componentId: "core-
|
|
92
|
+
componentId: "core-12_35_0__sc-ljrxoq-2"
|
|
93
93
|
})(["", ""], function (_ref7) {
|
|
94
94
|
var $placement = _ref7.$placement;
|
|
95
95
|
var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
|
|
@@ -97,7 +97,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
97
97
|
});
|
|
98
98
|
export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
|
|
99
99
|
displayName: "StyledButtonContainer",
|
|
100
|
-
componentId: "core-
|
|
100
|
+
componentId: "core-12_35_0__sc-ljrxoq-3"
|
|
101
101
|
})(["", ""], function (_ref8) {
|
|
102
102
|
var $placement = _ref8.$placement;
|
|
103
103
|
switch ($placement) {
|
|
@@ -112,7 +112,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
112
112
|
});
|
|
113
113
|
export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
|
|
114
114
|
displayName: "StyledButtonCard",
|
|
115
|
-
componentId: "core-
|
|
115
|
+
componentId: "core-12_35_0__sc-ljrxoq-4"
|
|
116
116
|
})(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref9) {
|
|
117
117
|
var $open = _ref9.$open;
|
|
118
118
|
return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["React","StyledTextArea","TextArea","forwardRef","_ref","ref","_ref$resize","resize","error","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","$resize","$error","$variant","displayName"],"sources":["../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React from 'react'\nimport { StyledTextArea } from './TextArea.styles'\nimport type { TextAreaProps } from './TextArea.types'\n\n/**\n\n Text areas give our users space to input unformatted text. All text areas are\n manually expandable by dragging the bottom right corner to the desired size.\n\n If users need to add formatted text, see Text Editor.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-textarea--demo)\n\n @see [Design Guidelines](https://design.procore.com/text-area)\n\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n function TextArea({ resize = 'both', error, variant, ...props }, ref) {\n return (\n <StyledTextArea\n $resize={resize}\n $error={error}\n $variant={variant}\n {...props}\n ref={ref}\n />\n )\n }\n)\n\nTextArea.displayName = 'TextArea'\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,mBAAmB;AAGlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,gBAAGF,KAAK,CAACG,UAAU,CACtC,SAASD,QAAQA,CAAAE,IAAA,EAAgDC,GAAG,EAAE;EAAA,IAAAC,WAAA,GAAAF,IAAA,CAAlDG,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,MAAM,GAAAA,WAAA;IAAEE,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAKC,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC3D,oBACEZ,KAAA,CAAAa,aAAA,CAACZ,cAAc,EAAAa,QAAA;IACbC,OAAO,EAAER,MAAO;IAChBS,MAAM,EAAER,KAAM;IACdS,QAAQ,EAAER;EAAQ,GACdC,KAAK;
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["React","StyledTextArea","TextArea","forwardRef","_ref","ref","_ref$resize","resize","error","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","$resize","$error","$variant","displayName"],"sources":["../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React from 'react'\nimport { StyledTextArea } from './TextArea.styles'\nimport type { TextAreaProps } from './TextArea.types'\n\n/**\n\n Text areas give our users space to input unformatted text. All text areas are\n manually expandable by dragging the bottom right corner to the desired size.\n\n If users need to add formatted text, see Text Editor.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-textarea--demo)\n\n @see [Design Guidelines](https://design.procore.com/text-area)\n\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n function TextArea({ resize = 'both', error, variant, ...props }, ref) {\n return (\n <StyledTextArea\n $resize={resize}\n $error={error}\n $variant={variant}\n {...props}\n aria-invalid={error || variant === 'error' ? 'true' : 'false'}\n ref={ref}\n />\n )\n }\n)\n\nTextArea.displayName = 'TextArea'\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,mBAAmB;AAGlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,gBAAGF,KAAK,CAACG,UAAU,CACtC,SAASD,QAAQA,CAAAE,IAAA,EAAgDC,GAAG,EAAE;EAAA,IAAAC,WAAA,GAAAF,IAAA,CAAlDG,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,MAAM,GAAAA,WAAA;IAAEE,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAKC,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC3D,oBACEZ,KAAA,CAAAa,aAAA,CAACZ,cAAc,EAAAa,QAAA;IACbC,OAAO,EAAER,MAAO;IAChBS,MAAM,EAAER,KAAM;IACdS,QAAQ,EAAER;EAAQ,GACdC,KAAK;IACT,gBAAcF,KAAK,IAAIC,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAQ;IAC9DJ,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACgB,WAAW,GAAG,UAAU"}
|
|
@@ -3,7 +3,7 @@ import { getInputStyles } from '../Input/Input.styles';
|
|
|
3
3
|
import { spacing } from '../_styles/spacing';
|
|
4
4
|
export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
|
|
5
5
|
displayName: "StyledTextArea",
|
|
6
|
-
componentId: "core-
|
|
6
|
+
componentId: "core-12_35_0__sc-u5mow1-0"
|
|
7
7
|
})(["", ";height:auto;min-height:64px;padding:", "px ", "px;resize:", ";"], getInputStyles, spacing.sm, spacing.md, function (_ref) {
|
|
8
8
|
var _ref$$resize = _ref.$resize,
|
|
9
9
|
$resize = _ref$$resize === void 0 ? 'both' : _ref$$resize;
|
|
@@ -14,7 +14,7 @@ export declare function TextEditorProvider({ children, features, }: TextEditorPr
|
|
|
14
14
|
@see [Design Guidelines](https://design.procore.com/text-editor)
|
|
15
15
|
|
|
16
16
|
*/
|
|
17
|
-
export declare function TextEditor(
|
|
17
|
+
export declare function TextEditor(allProps: TextEditorProps): React.JSX.Element;
|
|
18
18
|
export declare namespace TextEditor {
|
|
19
19
|
var displayName: string;
|
|
20
20
|
}
|
|
@@ -98,17 +98,19 @@ function useFocusScopePatch(plugins) {
|
|
|
98
98
|
@see [Design Guidelines](https://design.procore.com/text-editor)
|
|
99
99
|
|
|
100
100
|
*/
|
|
101
|
-
export function TextEditor(
|
|
101
|
+
export function TextEditor(allProps) {
|
|
102
102
|
var _props$initialValue, _props$value;
|
|
103
|
-
var error =
|
|
104
|
-
initOverrides =
|
|
105
|
-
locale =
|
|
106
|
-
|
|
107
|
-
onChange =
|
|
108
|
-
_onInit =
|
|
109
|
-
|
|
110
|
-
plugins =
|
|
111
|
-
props = _objectWithoutProperties(
|
|
103
|
+
var error = allProps.error,
|
|
104
|
+
initOverrides = allProps.init,
|
|
105
|
+
locale = allProps.locale,
|
|
106
|
+
_allProps$onChange = allProps.onChange,
|
|
107
|
+
onChange = _allProps$onChange === void 0 ? noop : _allProps$onChange,
|
|
108
|
+
_onInit = allProps.onInit,
|
|
109
|
+
_allProps$plugins = allProps.plugins,
|
|
110
|
+
plugins = _allProps$plugins === void 0 ? defaultPlugins : _allProps$plugins,
|
|
111
|
+
props = _objectWithoutProperties(allProps, _excluded);
|
|
112
|
+
var ariaLabel = allProps['aria-label'];
|
|
113
|
+
var ariaDescription = allProps['aria-description'];
|
|
112
114
|
var _useI18nContext = useI18nContext(),
|
|
113
115
|
contextLocale = _useI18nContext.locale;
|
|
114
116
|
var _useZIndexContext = useZIndexContext(),
|
|
@@ -131,6 +133,11 @@ export function TextEditor(_ref2) {
|
|
|
131
133
|
onChange(editor.getContent(), editor.isDirty());
|
|
132
134
|
};
|
|
133
135
|
var ref = React.useRef();
|
|
136
|
+
var editorRef = React.useRef(null);
|
|
137
|
+
var _React$useState = React.useState(false),
|
|
138
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
139
|
+
isEditorReady = _React$useState2[0],
|
|
140
|
+
setIsEditorReady = _React$useState2[1];
|
|
134
141
|
var updateError = function updateError() {
|
|
135
142
|
if (ref.current) {
|
|
136
143
|
if (error) {
|
|
@@ -138,31 +145,79 @@ export function TextEditor(_ref2) {
|
|
|
138
145
|
} else {
|
|
139
146
|
ref.current.style.borderColor = '';
|
|
140
147
|
}
|
|
148
|
+
ref.current.setAttribute('aria-invalid', error ? 'true' : 'false');
|
|
141
149
|
}
|
|
142
150
|
};
|
|
143
151
|
React.useEffect(function () {
|
|
144
152
|
updateError();
|
|
145
153
|
}, [error]);
|
|
154
|
+
|
|
155
|
+
// Update aria-label when prop changes
|
|
156
|
+
React.useEffect(function () {
|
|
157
|
+
if (!isEditorReady || !editorRef.current) {
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
var body = editorRef.current.getBody();
|
|
161
|
+
if (body) {
|
|
162
|
+
if (ariaLabel) {
|
|
163
|
+
body.setAttribute('aria-label', ariaLabel);
|
|
164
|
+
} else {
|
|
165
|
+
body.removeAttribute('aria-label');
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}, [ariaLabel, isEditorReady]);
|
|
169
|
+
|
|
170
|
+
// Update aria-description when prop changes
|
|
171
|
+
React.useEffect(function () {
|
|
172
|
+
if (!isEditorReady || !editorRef.current) {
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
var body = editorRef.current.getBody();
|
|
176
|
+
if (body) {
|
|
177
|
+
if (ariaDescription) {
|
|
178
|
+
body.setAttribute('aria-description', ariaDescription);
|
|
179
|
+
} else {
|
|
180
|
+
body.removeAttribute('aria-description');
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}, [ariaDescription, isEditorReady]);
|
|
146
184
|
useFocusScopePatch(plugins);
|
|
147
185
|
var onInit = function onInit(event, editor) {
|
|
148
186
|
ref.current = editor.editorContainer;
|
|
187
|
+
editorRef.current = editor;
|
|
188
|
+
setIsEditorReady(true);
|
|
149
189
|
updateError();
|
|
190
|
+
|
|
191
|
+
// Set accessible label and description on the editable body element if provided
|
|
192
|
+
// This provides the accessible name/description for screen readers
|
|
193
|
+
var body = editor.getBody();
|
|
194
|
+
if (body) {
|
|
195
|
+
if (ariaLabel) {
|
|
196
|
+
body.setAttribute('aria-label', ariaLabel);
|
|
197
|
+
}
|
|
198
|
+
if (ariaDescription) {
|
|
199
|
+
body.setAttribute('aria-description', ariaDescription);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
150
202
|
_onInit && _onInit(event, editor);
|
|
151
203
|
};
|
|
152
204
|
var _useState = useState((_props$initialValue = props.initialValue) !== null && _props$initialValue !== void 0 ? _props$initialValue : props.value),
|
|
153
205
|
_useState2 = _slicedToArray(_useState, 1),
|
|
154
206
|
derivedInitial = _useState2[0];
|
|
207
|
+
var accessibilityConfig = ariaLabel ? {
|
|
208
|
+
iframe_aria_text: ariaLabel
|
|
209
|
+
} : {};
|
|
155
210
|
|
|
156
211
|
// zIndex + 1 because on first render zIndex of Portal(Modal) is higher
|
|
157
212
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyle, {
|
|
158
213
|
$zIndex: zIndex + 1
|
|
159
214
|
}), /*#__PURE__*/React.createElement(Editor, _extends({
|
|
160
|
-
init: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tinyMCEConfig), {}, {
|
|
215
|
+
init: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tinyMCEConfig), {}, {
|
|
161
216
|
external_plugins: generateExternalPlugins(plugins),
|
|
162
217
|
language_url: generateLanguageUrl(locale || contextLocale),
|
|
163
218
|
language: getValidLookupLocale(locale || contextLocale),
|
|
164
219
|
content_style: "p { margin: 0; }"
|
|
165
|
-
}, stickyToolbar), tabControls), initOverrides),
|
|
220
|
+
}, stickyToolbar), tabControls), accessibilityConfig), initOverrides),
|
|
166
221
|
tinymceScriptSrc: "".concat(tinyMCESource, "/").concat(tinyMCEVersion, "/tinymce.min.js"),
|
|
167
222
|
onInit: onInit,
|
|
168
223
|
onEditorChange: onEditorChange
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.js","names":["Editor","React","useState","useOverridableFocusScope","useI18nContext","useZIndexContext","defaultPlugins","generateExternalPlugins","generateLanguageUrl","getValidLookupLocale","tinyMCEConfig","tinyMCESource","tinyMCETabMarkup","tinyMCEVersion","GlobalStyle","errorRed","noop","TextEditorContext","createContext","features","tabAsNavigation","stickyToolbar","undefined","TextEditorProvider","_ref","children","createElement","Provider","value","_objectSpread","setupDefaultShortcuts","editor","shortcuts","add","setupShortcuts","on","checkTabPress","event","altKey","key","execCommand","preventDefault","stopPropagation","useFocusScopePatch","plugins","focusScope","useEffect","concat","_toConsumableArray","some","plugin","setProps","contain","TextEditor","_ref2","_props$initialValue","_props$value","error","initOverrides","init","locale","_ref2$onChange","onChange","_onInit","onInit","_ref2$plugins","props","_objectWithoutProperties","_excluded","_useI18nContext","contextLocale","_useZIndexContext","zIndex","_React$useContext","useContext","toolbar_sticky","tabControls","external_plugins","filter","p","nonbreaking_force_tab","setup","onEditorChange","_","getContent","isDirty","ref","useRef","updateError","current","style","borderColor","editorContainer","_useState","initialValue","_useState2","_slicedToArray","derivedInitial","Fragment","$zIndex","_extends","language_url","language","content_style","tinymceScriptSrc","displayName"],"sources":["../../src/TextEditor/TextEditor.tsx"],"sourcesContent":["import { Editor } from '@tinymce/tinymce-react'\nimport React, { useState } from 'react'\nimport { useOverridableFocusScope } from '../_hooks/FocusScopeOverride'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useZIndexContext } from '../_hooks/ZIndex'\nimport {\n defaultPlugins,\n generateExternalPlugins,\n generateLanguageUrl,\n getValidLookupLocale,\n tinyMCEConfig,\n tinyMCESource,\n tinyMCETabMarkup,\n tinyMCEVersion,\n} from '../_utils/TinyMCE'\nimport { GlobalStyle } from './TextEditor.styles'\nimport type {\n TextEditorProps,\n TextEditorProviderProps,\n} from './TextEditor.types'\n\nconst errorRed = '#E61920'\n\nfunction noop() {}\n\nconst TextEditorContext = React.createContext<\n Omit<TextEditorProviderProps, 'children'>\n>({\n features: {\n tabAsNavigation: true,\n stickyToolbar: undefined,\n },\n})\n\nexport function TextEditorProvider({\n children,\n features,\n}: TextEditorProviderProps) {\n return (\n <TextEditorContext.Provider\n value={{\n features: {\n tabAsNavigation: true,\n ...features,\n },\n }}\n >\n {children}\n </TextEditorContext.Provider>\n )\n}\n\nfunction setupDefaultShortcuts(editor: any) {\n editor.shortcuts.add('meta+shift+s', 'Strikethrough', 'Strikethrough')\n}\n\n/**\n * editor.addShortcut does not notify on Tab key presses\n */\nfunction setupShortcuts(editor: any) {\n setupDefaultShortcuts(editor)\n editor.on('keydown', function checkTabPress(event: React.KeyboardEvent) {\n if (event.altKey && event.key === 'Tab') {\n editor.execCommand('mceInsertContent', false, tinyMCETabMarkup)\n event.preventDefault()\n event.stopPropagation()\n return false\n }\n })\n}\n\n/**\n * The following plugins open a TinyMCE modal.\n * When used with React Aria contained FocusScope,\n * focus does not move into the TinyMCE modal.\n * This patch gets critical functionality back at\n * the cost of possibly failing accessbility.\n */\nfunction useFocusScopePatch(plugins: string[]) {\n const focusScope = useOverridableFocusScope()\n React.useEffect(() => {\n if (\n [...defaultPlugins, ...plugins].some(\n // Add plugins that open a tinymce modal here\n (plugin) =>\n plugin === 'link' || plugin === 'table' || plugin === 'image'\n )\n ) {\n focusScope.setProps({ contain: false })\n }\n }, [focusScope, plugins])\n}\n\n/**\n\n We use text editors to allow users to enter multiple lines of formatted text.\n\n If users need to add unformatted text, see Text Area.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditor--demo)\n\n @see [Design Guidelines](https://design.procore.com/text-editor)\n\n */\nexport function TextEditor({\n error,\n init: initOverrides,\n locale,\n onChange = noop,\n onInit: _onInit,\n plugins = defaultPlugins,\n ...props\n}: TextEditorProps) {\n const { locale: contextLocale } = useI18nContext()\n const { value: zIndex } = useZIndexContext()\n\n const { features } = React.useContext(TextEditorContext)\n const stickyToolbar = features?.stickyToolbar ? { toolbar_sticky: true } : {}\n const tabControls = features?.tabAsNavigation\n ? {\n external_plugins: generateExternalPlugins(\n plugins,\n defaultPlugins.filter((p) => p !== 'nonbreaking')\n ),\n nonbreaking_force_tab: false,\n setup: setupShortcuts,\n }\n : {\n setup: setupDefaultShortcuts,\n }\n\n const onEditorChange: React.ComponentProps<\n typeof Editor\n >['onEditorChange'] = (_: any, editor: any) => {\n onChange(editor.getContent(), editor.isDirty())\n }\n\n const ref = React.useRef<HTMLElement>()\n\n const updateError = () => {\n if (ref.current) {\n if (error) {\n ref.current.style.borderColor = errorRed\n } else {\n ref.current.style.borderColor = ''\n }\n }\n }\n\n React.useEffect(() => {\n updateError()\n }, [error])\n\n useFocusScopePatch(plugins)\n\n const onInit: React.ComponentProps<typeof Editor>['onInit'] = (\n event,\n editor\n ) => {\n ref.current = editor.editorContainer\n updateError()\n _onInit && _onInit(event, editor)\n }\n\n const [derivedInitial] = useState(props.initialValue ?? props.value)\n\n // zIndex + 1 because on first render zIndex of Portal(Modal) is higher\n return (\n <>\n <GlobalStyle $zIndex={zIndex + 1} />\n <Editor\n init={{\n ...tinyMCEConfig,\n external_plugins: generateExternalPlugins(plugins),\n language_url: generateLanguageUrl(locale || contextLocale),\n language: getValidLookupLocale(locale || contextLocale),\n content_style: `p { margin: 0; }`,\n ...stickyToolbar,\n ...tabControls,\n ...initOverrides,\n }}\n tinymceScriptSrc={`${tinyMCESource}/${tinyMCEVersion}/tinymce.min.js`}\n onInit={onInit}\n onEditorChange={onEditorChange}\n {...props}\n value={props.value ?? props.initialValue}\n initialValue={derivedInitial}\n />\n </>\n )\n}\n\nTextEditor.displayName = 'TextEditor'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextEditor.js","names":["Editor","React","useState","useOverridableFocusScope","useI18nContext","useZIndexContext","defaultPlugins","generateExternalPlugins","generateLanguageUrl","getValidLookupLocale","tinyMCEConfig","tinyMCESource","tinyMCETabMarkup","tinyMCEVersion","GlobalStyle","errorRed","noop","TextEditorContext","createContext","features","tabAsNavigation","stickyToolbar","undefined","TextEditorProvider","_ref","children","createElement","Provider","value","_objectSpread","setupDefaultShortcuts","editor","shortcuts","add","setupShortcuts","on","checkTabPress","event","altKey","key","execCommand","preventDefault","stopPropagation","useFocusScopePatch","plugins","focusScope","useEffect","concat","_toConsumableArray","some","plugin","setProps","contain","TextEditor","allProps","_props$initialValue","_props$value","error","initOverrides","init","locale","_allProps$onChange","onChange","_onInit","onInit","_allProps$plugins","props","_objectWithoutProperties","_excluded","ariaLabel","ariaDescription","_useI18nContext","contextLocale","_useZIndexContext","zIndex","_React$useContext","useContext","toolbar_sticky","tabControls","external_plugins","filter","p","nonbreaking_force_tab","setup","onEditorChange","_","getContent","isDirty","ref","useRef","editorRef","_React$useState","_React$useState2","_slicedToArray","isEditorReady","setIsEditorReady","updateError","current","style","borderColor","setAttribute","body","getBody","removeAttribute","editorContainer","_useState","initialValue","_useState2","derivedInitial","accessibilityConfig","iframe_aria_text","Fragment","$zIndex","_extends","language_url","language","content_style","tinymceScriptSrc","displayName"],"sources":["../../src/TextEditor/TextEditor.tsx"],"sourcesContent":["import { Editor } from '@tinymce/tinymce-react'\nimport React, { useState } from 'react'\nimport { useOverridableFocusScope } from '../_hooks/FocusScopeOverride'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useZIndexContext } from '../_hooks/ZIndex'\nimport {\n defaultPlugins,\n generateExternalPlugins,\n generateLanguageUrl,\n getValidLookupLocale,\n tinyMCEConfig,\n tinyMCESource,\n tinyMCETabMarkup,\n tinyMCEVersion,\n} from '../_utils/TinyMCE'\nimport { GlobalStyle } from './TextEditor.styles'\nimport type {\n TextEditorProps,\n TextEditorProviderProps,\n} from './TextEditor.types'\n\nconst errorRed = '#E61920'\n\nfunction noop() {}\n\nconst TextEditorContext = React.createContext<\n Omit<TextEditorProviderProps, 'children'>\n>({\n features: {\n tabAsNavigation: true,\n stickyToolbar: undefined,\n },\n})\n\nexport function TextEditorProvider({\n children,\n features,\n}: TextEditorProviderProps) {\n return (\n <TextEditorContext.Provider\n value={{\n features: {\n tabAsNavigation: true,\n ...features,\n },\n }}\n >\n {children}\n </TextEditorContext.Provider>\n )\n}\n\nfunction setupDefaultShortcuts(editor: any) {\n editor.shortcuts.add('meta+shift+s', 'Strikethrough', 'Strikethrough')\n}\n\n/**\n * editor.addShortcut does not notify on Tab key presses\n */\nfunction setupShortcuts(editor: any) {\n setupDefaultShortcuts(editor)\n editor.on('keydown', function checkTabPress(event: React.KeyboardEvent) {\n if (event.altKey && event.key === 'Tab') {\n editor.execCommand('mceInsertContent', false, tinyMCETabMarkup)\n event.preventDefault()\n event.stopPropagation()\n return false\n }\n })\n}\n\n/**\n * The following plugins open a TinyMCE modal.\n * When used with React Aria contained FocusScope,\n * focus does not move into the TinyMCE modal.\n * This patch gets critical functionality back at\n * the cost of possibly failing accessbility.\n */\nfunction useFocusScopePatch(plugins: string[]) {\n const focusScope = useOverridableFocusScope()\n React.useEffect(() => {\n if (\n [...defaultPlugins, ...plugins].some(\n // Add plugins that open a tinymce modal here\n (plugin) =>\n plugin === 'link' || plugin === 'table' || plugin === 'image'\n )\n ) {\n focusScope.setProps({ contain: false })\n }\n }, [focusScope, plugins])\n}\n\n/**\n\n We use text editors to allow users to enter multiple lines of formatted text.\n\n If users need to add unformatted text, see Text Area.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditor--demo)\n\n @see [Design Guidelines](https://design.procore.com/text-editor)\n\n */\nexport function TextEditor(allProps: TextEditorProps) {\n const {\n error,\n init: initOverrides,\n locale,\n onChange = noop,\n onInit: _onInit,\n plugins = defaultPlugins,\n ...props\n } = allProps\n const ariaLabel = allProps['aria-label']\n const ariaDescription = allProps['aria-description']\n const { locale: contextLocale } = useI18nContext()\n const { value: zIndex } = useZIndexContext()\n\n const { features } = React.useContext(TextEditorContext)\n const stickyToolbar = features?.stickyToolbar ? { toolbar_sticky: true } : {}\n const tabControls = features?.tabAsNavigation\n ? {\n external_plugins: generateExternalPlugins(\n plugins,\n defaultPlugins.filter((p) => p !== 'nonbreaking')\n ),\n nonbreaking_force_tab: false,\n setup: setupShortcuts,\n }\n : {\n setup: setupDefaultShortcuts,\n }\n\n const onEditorChange: React.ComponentProps<\n typeof Editor\n >['onEditorChange'] = (_: any, editor: any) => {\n onChange(editor.getContent(), editor.isDirty())\n }\n\n const ref = React.useRef<HTMLElement>()\n const editorRef = React.useRef<any>(null)\n const [isEditorReady, setIsEditorReady] = React.useState(false)\n\n const updateError = () => {\n if (ref.current) {\n if (error) {\n ref.current.style.borderColor = errorRed\n } else {\n ref.current.style.borderColor = ''\n }\n ref.current.setAttribute('aria-invalid', error ? 'true' : 'false')\n }\n }\n\n React.useEffect(() => {\n updateError()\n }, [error])\n\n // Update aria-label when prop changes\n React.useEffect(() => {\n if (!isEditorReady || !editorRef.current) {\n return\n }\n const body = editorRef.current.getBody()\n if (body) {\n if (ariaLabel) {\n body.setAttribute('aria-label', ariaLabel)\n } else {\n body.removeAttribute('aria-label')\n }\n }\n }, [ariaLabel, isEditorReady])\n\n // Update aria-description when prop changes\n React.useEffect(() => {\n if (!isEditorReady || !editorRef.current) {\n return\n }\n const body = editorRef.current.getBody()\n if (body) {\n if (ariaDescription) {\n body.setAttribute('aria-description', ariaDescription)\n } else {\n body.removeAttribute('aria-description')\n }\n }\n }, [ariaDescription, isEditorReady])\n\n useFocusScopePatch(plugins)\n\n const onInit: React.ComponentProps<typeof Editor>['onInit'] = (\n event,\n editor\n ) => {\n ref.current = editor.editorContainer\n editorRef.current = editor\n setIsEditorReady(true)\n updateError()\n\n // Set accessible label and description on the editable body element if provided\n // This provides the accessible name/description for screen readers\n const body = editor.getBody()\n if (body) {\n if (ariaLabel) {\n body.setAttribute('aria-label', ariaLabel)\n }\n if (ariaDescription) {\n body.setAttribute('aria-description', ariaDescription)\n }\n }\n\n _onInit && _onInit(event, editor)\n }\n\n const [derivedInitial] = useState(props.initialValue ?? props.value)\n\n const accessibilityConfig = ariaLabel ? { iframe_aria_text: ariaLabel } : {}\n\n // zIndex + 1 because on first render zIndex of Portal(Modal) is higher\n return (\n <>\n <GlobalStyle $zIndex={zIndex + 1} />\n <Editor\n init={{\n ...tinyMCEConfig,\n external_plugins: generateExternalPlugins(plugins),\n language_url: generateLanguageUrl(locale || contextLocale),\n language: getValidLookupLocale(locale || contextLocale),\n content_style: `p { margin: 0; }`,\n ...stickyToolbar,\n ...tabControls,\n ...accessibilityConfig,\n ...initOverrides,\n }}\n tinymceScriptSrc={`${tinyMCESource}/${tinyMCEVersion}/tinymce.min.js`}\n onInit={onInit}\n onEditorChange={onEditorChange}\n {...props}\n value={props.value ?? props.initialValue}\n initialValue={derivedInitial}\n />\n </>\n )\n}\n\nTextEditor.displayName = 'TextEditor'\n"],"mappings":"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"}
|
|
@@ -28,6 +28,23 @@ export interface TextEditorProps extends Omit<React.ComponentProps<typeof Editor
|
|
|
28
28
|
* @since 10.19.0
|
|
29
29
|
*/
|
|
30
30
|
error?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Accessible label for the editor's editable area. This text will be
|
|
33
|
+
* announced by screen readers when the user focuses the editor. It should
|
|
34
|
+
* match or include the visible label associated with this editor field.
|
|
35
|
+
* If not provided, screen readers will announce a generic "Rich Text Area" message.
|
|
36
|
+
*
|
|
37
|
+
* @since 12.35.0
|
|
38
|
+
*/
|
|
39
|
+
'aria-label'?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Accessible description for the editor's editable area.
|
|
42
|
+
* This text provides additional context to screen reader users. It will be
|
|
43
|
+
* announced after the label when the user focuses the editor.
|
|
44
|
+
*
|
|
45
|
+
* @since 12.35.0
|
|
46
|
+
*/
|
|
47
|
+
'aria-description'?: string;
|
|
31
48
|
/**
|
|
32
49
|
* Config for when the editor is initialized. **Changes after the editor has initialized are ignored.**
|
|
33
50
|
* @link [TinyMCE React Init](https://www.tiny.cloud/docs/integrations/react/#init)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.types.js","names":[],"sources":["../../src/TextEditor/TextEditor.types.ts"],"sourcesContent":["import type { Editor, IAllProps } from '@tinymce/tinymce-react'\nimport type React from 'react'\nimport type { Locale } from '../_hooks/I18n'\n\ntype TextEditorFeatureToggle = {\n stickyToolbar?: boolean\n tabAsNavigation?: boolean\n}\n\n/**\n * Expect context to change the `init` config of the below `TextEditor`s.\n * **Changes after the editor has initialized are ignored.**\n * @link [TinyMCE React Init](https://www.tiny.cloud/docs/integrations/react/#init)\n * @link [TinyMCE React configure editor](https://www.tiny.cloud/docs/integrations/react/#configuringeditorsettings)\n */\nexport interface TextEditorProviderProps {\n children: React.ReactNode\n /**\n * - `stickyToolbar` - Have the editor toolbar stick to the top when content is longer than the page length.\n * - `tabAsNavigation` - Have `Tab` key exit the editor. Support `Alt`/`Opt` + `Tab` as triple space indent.\n */\n features?: TextEditorFeatureToggle\n}\n\nexport interface TextEditorProps\n extends Omit<React.ComponentProps<typeof Editor>, 'onChange' | 'onKeyUp'> {\n /**\n * @since 10.19.0\n */\n disabled?: boolean\n /**\n * @since 10.19.0\n */\n error?: boolean\n /**\n * Config for when the editor is initialized. **Changes after the editor has initialized are ignored.**\n * @link [TinyMCE React Init](https://www.tiny.cloud/docs/integrations/react/#init)\n * @unsupported Use at your own risk. DST makes no guarantees about this API,\n * and is subject to removal at any point without warning or deprecation.\n * @since 10.19.0\n */\n init?: IAllProps['init']\n /**\n * @deprecated\n * `initialValue` has been deprecated and will be removed in a future version.\n * Please use the `value` prop instead\n *\n * The first value passed into `value` prop will be the `TextEditor` initial\n * value. Changing the value will update the text of the `TextEditor`.\n * The editor should be controlled via the combination of `value`\n * and `onChange` props.\n *\n * **Before**\n *\n * `<TextEditor initialValue=\"Hello World\" />`\n *\n * **After**\n *\n * `<TextEditor value=\"Hello World\" />`\n *\n * @deprecatedSince 10.20.0\n * @since 10.19.0\n */\n initialValue?: string\n\n /**\n * Locale which will be used used for localization. Can be passed directly or\n * set by wrapping components in I18n provider. Icelandic (is-IS) is not\n * actually supported by TinyMCE, so it is defaulted to english.\n * @since 10.19.0\n */\n locale?: Locale\n\n /**\n * onChange event handler for text editor area\n *\n * ```\n * (content: string) => void\n * ```\n * @since 10.19.0\n */\n onChange?: (content: string, isDirty?: boolean) => void\n\n /**\n *\n * Array of plugins to use with the editor in addition to the defaults.\n * Can be any of:\n *\n * ```\n * [{plugins.map((plugin) => `'${plugin}'`).join(', ')}]\n * ```\n * @since 10.19.0\n */\n plugins?: Array<string>\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TextEditor.types.js","names":[],"sources":["../../src/TextEditor/TextEditor.types.ts"],"sourcesContent":["import type { Editor, IAllProps } from '@tinymce/tinymce-react'\nimport type React from 'react'\nimport type { Locale } from '../_hooks/I18n'\n\ntype TextEditorFeatureToggle = {\n stickyToolbar?: boolean\n tabAsNavigation?: boolean\n}\n\n/**\n * Expect context to change the `init` config of the below `TextEditor`s.\n * **Changes after the editor has initialized are ignored.**\n * @link [TinyMCE React Init](https://www.tiny.cloud/docs/integrations/react/#init)\n * @link [TinyMCE React configure editor](https://www.tiny.cloud/docs/integrations/react/#configuringeditorsettings)\n */\nexport interface TextEditorProviderProps {\n children: React.ReactNode\n /**\n * - `stickyToolbar` - Have the editor toolbar stick to the top when content is longer than the page length.\n * - `tabAsNavigation` - Have `Tab` key exit the editor. Support `Alt`/`Opt` + `Tab` as triple space indent.\n */\n features?: TextEditorFeatureToggle\n}\n\nexport interface TextEditorProps\n extends Omit<React.ComponentProps<typeof Editor>, 'onChange' | 'onKeyUp'> {\n /**\n * @since 10.19.0\n */\n disabled?: boolean\n /**\n * @since 10.19.0\n */\n error?: boolean\n\n /**\n * Accessible label for the editor's editable area. This text will be\n * announced by screen readers when the user focuses the editor. It should\n * match or include the visible label associated with this editor field.\n * If not provided, screen readers will announce a generic \"Rich Text Area\" message.\n *\n * @since 12.35.0\n */\n 'aria-label'?: string\n\n /**\n * Accessible description for the editor's editable area.\n * This text provides additional context to screen reader users. It will be\n * announced after the label when the user focuses the editor.\n *\n * @since 12.35.0\n */\n 'aria-description'?: string\n\n /**\n * Config for when the editor is initialized. **Changes after the editor has initialized are ignored.**\n * @link [TinyMCE React Init](https://www.tiny.cloud/docs/integrations/react/#init)\n * @unsupported Use at your own risk. DST makes no guarantees about this API,\n * and is subject to removal at any point without warning or deprecation.\n * @since 10.19.0\n */\n init?: IAllProps['init']\n /**\n * @deprecated\n * `initialValue` has been deprecated and will be removed in a future version.\n * Please use the `value` prop instead\n *\n * The first value passed into `value` prop will be the `TextEditor` initial\n * value. Changing the value will update the text of the `TextEditor`.\n * The editor should be controlled via the combination of `value`\n * and `onChange` props.\n *\n * **Before**\n *\n * `<TextEditor initialValue=\"Hello World\" />`\n *\n * **After**\n *\n * `<TextEditor value=\"Hello World\" />`\n *\n * @deprecatedSince 10.20.0\n * @since 10.19.0\n */\n initialValue?: string\n\n /**\n * Locale which will be used used for localization. Can be passed directly or\n * set by wrapping components in I18n provider. Icelandic (is-IS) is not\n * actually supported by TinyMCE, so it is defaulted to english.\n * @since 10.19.0\n */\n locale?: Locale\n\n /**\n * onChange event handler for text editor area\n *\n * ```\n * (content: string) => void\n * ```\n * @since 10.19.0\n */\n onChange?: (content: string, isDirty?: boolean) => void\n\n /**\n *\n * Array of plugins to use with the editor in addition to the defaults.\n * Can be any of:\n *\n * ```\n * [{plugins.map((plugin) => `'${plugin}'`).join(', ')}]\n * ```\n * @since 10.19.0\n */\n plugins?: Array<string>\n}\n"],"mappings":""}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
export var StyledEditor = /*#__PURE__*/styled.div.withConfig({
|
|
3
3
|
displayName: "StyledEditor",
|
|
4
|
-
componentId: "core-
|
|
4
|
+
componentId: "core-12_35_0__sc-1lje1b0-0"
|
|
5
5
|
})(["> .tox-tinymce{border:none;}"]);
|
|
6
6
|
//# sourceMappingURL=TextEditorOutput.styles.js.map
|
|
@@ -27,35 +27,35 @@ var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;
|
|
|
27
27
|
});
|
|
28
28
|
export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
|
|
29
29
|
displayName: "StyledMultilineCaption",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_35_0__sc-195f70c-0"
|
|
31
31
|
})(["", ";display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
|
|
32
32
|
export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
|
|
33
33
|
displayName: "StyledCaptionText",
|
|
34
|
-
componentId: "core-
|
|
34
|
+
componentId: "core-12_35_0__sc-195f70c-1"
|
|
35
35
|
})(["width:100%;"]);
|
|
36
36
|
export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
|
|
37
37
|
displayName: "StyledPlaceholderCaption",
|
|
38
|
-
componentId: "core-
|
|
38
|
+
componentId: "core-12_35_0__sc-195f70c-2"
|
|
39
39
|
})(["", ""], captionBase);
|
|
40
40
|
export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
|
|
41
41
|
displayName: "StyledSingleLineCaption",
|
|
42
|
-
componentId: "core-
|
|
42
|
+
componentId: "core-12_35_0__sc-195f70c-3"
|
|
43
43
|
})(["display:flex;", ""], captionBase);
|
|
44
44
|
export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
|
|
45
45
|
displayName: "StyledSinglelineCaptionBody",
|
|
46
|
-
componentId: "core-
|
|
46
|
+
componentId: "core-12_35_0__sc-195f70c-4"
|
|
47
47
|
})(["", ""], getEllipsis);
|
|
48
48
|
export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
|
|
49
49
|
displayName: "StyledSinglelineCaptionEnding",
|
|
50
|
-
componentId: "core-
|
|
50
|
+
componentId: "core-12_35_0__sc-195f70c-5"
|
|
51
51
|
})(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
|
|
52
52
|
export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
|
|
53
53
|
displayName: "StyledLabelText",
|
|
54
|
-
componentId: "core-
|
|
54
|
+
componentId: "core-12_35_0__sc-195f70c-6"
|
|
55
55
|
})(["", ""], getEllipsis());
|
|
56
56
|
export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
|
|
57
57
|
displayName: "StyledThumbnailFigCaption",
|
|
58
|
-
componentId: "core-
|
|
58
|
+
componentId: "core-12_35_0__sc-195f70c-7"
|
|
59
59
|
})(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
|
|
60
60
|
var _ref5$$color = _ref5.$color,
|
|
61
61
|
$color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
|
|
@@ -63,7 +63,7 @@ export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig
|
|
|
63
63
|
}, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
|
|
64
64
|
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
|
|
65
65
|
displayName: "StyledLabel",
|
|
66
|
-
componentId: "core-
|
|
66
|
+
componentId: "core-12_35_0__sc-195f70c-8"
|
|
67
67
|
})(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
|
|
68
68
|
var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
|
|
69
69
|
var $clickable = _ref6.$clickable;
|
|
@@ -85,7 +85,7 @@ var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align
|
|
|
85
85
|
});
|
|
86
86
|
export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
|
|
87
87
|
displayName: "StyledTickIcon",
|
|
88
|
-
componentId: "core-
|
|
88
|
+
componentId: "core-12_35_0__sc-195f70c-9"
|
|
89
89
|
})(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref1) {
|
|
90
90
|
var $selected = _ref1.$selected;
|
|
91
91
|
return $selected && css(["opacity:1;transform:scale(1);"]);
|
|
@@ -95,28 +95,28 @@ export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
|
|
|
95
95
|
});
|
|
96
96
|
export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
|
|
97
97
|
displayName: "StyledFileIcon",
|
|
98
|
-
componentId: "core-
|
|
98
|
+
componentId: "core-12_35_0__sc-195f70c-10"
|
|
99
99
|
})(["width:36.5%;height:auto;"]);
|
|
100
100
|
export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
|
|
101
101
|
displayName: "StyledImageThumbnailPreview",
|
|
102
|
-
componentId: "core-
|
|
102
|
+
componentId: "core-12_35_0__sc-195f70c-11"
|
|
103
103
|
})(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref11) {
|
|
104
104
|
var $bgImage = _ref11.$bgImage;
|
|
105
105
|
return css(["background-image:url(", ");"], $bgImage);
|
|
106
106
|
});
|
|
107
107
|
export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
|
|
108
108
|
displayName: "StyledImageThumbnailOverlay",
|
|
109
|
-
componentId: "core-
|
|
109
|
+
componentId: "core-12_35_0__sc-195f70c-12"
|
|
110
110
|
})(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
|
|
111
111
|
var blackOverlay = "\n background-color: ".concat(colors.black, ";\n opacity: 0.2;\n");
|
|
112
112
|
var whiteOverlay = "\n background-color: ".concat(colors.white, ";\n opacity: 0.5;\n");
|
|
113
113
|
export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
|
|
114
114
|
displayName: "StyledImageThumbnailImage",
|
|
115
|
-
componentId: "core-
|
|
115
|
+
componentId: "core-12_35_0__sc-195f70c-13"
|
|
116
116
|
})([""]);
|
|
117
117
|
export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
|
|
118
118
|
displayName: "StyledImageThumbnail",
|
|
119
|
-
componentId: "core-
|
|
119
|
+
componentId: "core-12_35_0__sc-195f70c-14"
|
|
120
120
|
})(["", ";flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
|
|
121
121
|
var $disabled = _ref12.$disabled;
|
|
122
122
|
return $disabled && css(["&,&:hover{", "{display:block;", "}}", ",", ",", "{filter:saturate(0);}", "{filter:saturate(0);z-index:-1;}"], StyledImageThumbnailOverlay, whiteOverlay, StyledImageThumbnailPreview, StyledTickIcon, StyledImageThumbnailImage, StyledFileIcon);
|
|
@@ -145,7 +145,7 @@ export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
|
|
|
145
145
|
});
|
|
146
146
|
export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
147
147
|
displayName: "StyledThumbnailWrapper",
|
|
148
|
-
componentId: "core-
|
|
148
|
+
componentId: "core-12_35_0__sc-195f70c-15"
|
|
149
149
|
})(["display:flex;", " ", ""], function (_ref18) {
|
|
150
150
|
var $size = _ref18.$size;
|
|
151
151
|
return $size === 'lg' ? "\n width: ".concat(thumbnailSizeLg, "px;\n ") : '';
|
|
@@ -156,7 +156,7 @@ export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
156
156
|
});
|
|
157
157
|
export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
|
|
158
158
|
displayName: "StyledPlaceholderThumbnail",
|
|
159
|
-
componentId: "core-
|
|
159
|
+
componentId: "core-12_35_0__sc-195f70c-16"
|
|
160
160
|
})(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref20) {
|
|
161
161
|
var $clickable = _ref20.$clickable;
|
|
162
162
|
return $clickable && css(["&:hover{background-color:", ";}"], colors.gray96);
|
|
@@ -2,9 +2,11 @@ import React from 'react';
|
|
|
2
2
|
export declare type ThumbnailDocumentIconVariant = 'image' | 'unknown' | 'zip' | 'drawing' | 'email' | 'excel' | 'gantt' | 'ini' | 'mov' | 'pdf' | 'powerpoint' | 'word' | 'xml' | '3d' | 'folder' | 'folderPeople' | 'folderLock' | 'file';
|
|
3
3
|
export interface DocumentIconProps {
|
|
4
4
|
variant: ThumbnailDocumentIconVariant;
|
|
5
|
+
role?: 'img';
|
|
5
6
|
className?: string;
|
|
6
7
|
width?: string | number;
|
|
7
8
|
height?: string | number;
|
|
8
9
|
focusable?: boolean;
|
|
10
|
+
'aria-label'?: string;
|
|
9
11
|
}
|
|
10
|
-
export declare function DocumentIcon({ className, focusable, height, variant, width, }: DocumentIconProps): React.JSX.Element;
|
|
12
|
+
export declare function DocumentIcon({ className, focusable, height, variant, width, 'aria-label': ariaLabelOverride, }: DocumentIconProps): React.JSX.Element;
|