@wordpress/components 25.12.0 → 25.14.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 +65 -0
- package/build/angle-picker-control/index.js +0 -1
- package/build/angle-picker-control/index.js.map +1 -1
- package/build/border-control/border-control-dropdown/component.js +4 -2
- package/build/border-control/border-control-dropdown/component.js.map +1 -1
- package/build/border-control/border-control-dropdown/hook.js +3 -2
- package/build/border-control/border-control-dropdown/hook.js.map +1 -1
- package/build/border-control/styles.js +17 -17
- package/build/border-control/styles.js.map +1 -1
- package/build/checkbox-control/index.js +1 -1
- package/build/checkbox-control/index.js.map +1 -1
- package/build/checkbox-control/types.js.map +1 -1
- package/build/custom-select-control-v2/index.js +87 -0
- package/build/custom-select-control-v2/index.js.map +1 -0
- package/build/custom-select-control-v2/styles.js +85 -0
- package/build/custom-select-control-v2/styles.js.map +1 -0
- package/build/custom-select-control-v2/types.js +6 -0
- package/build/custom-select-control-v2/types.js.map +1 -0
- package/build/date-time/time/timezone.js +11 -2
- package/build/date-time/time/timezone.js.map +1 -1
- package/build/dimension-control/index.js +2 -0
- package/build/dimension-control/index.js.map +1 -1
- package/build/dimension-control/types.js.map +1 -1
- package/build/dropdown-menu-v2-ariakit/index.js +49 -20
- package/build/dropdown-menu-v2-ariakit/index.js.map +1 -1
- package/build/dropdown-menu-v2-ariakit/styles.js +82 -59
- package/build/dropdown-menu-v2-ariakit/styles.js.map +1 -1
- package/build/dropdown-menu-v2-ariakit/types.js.map +1 -1
- package/build/focal-point-picker/controls.js +5 -1
- package/build/focal-point-picker/controls.js.map +1 -1
- package/build/focal-point-picker/index.js +2 -0
- package/build/focal-point-picker/index.js.map +1 -1
- package/build/focal-point-picker/styles/focal-point-picker-style.js +15 -15
- package/build/focal-point-picker/styles/focal-point-picker-style.js.map +1 -1
- package/build/focal-point-picker/types.js.map +1 -1
- package/build/font-size-picker/font-size-picker-select.js +2 -0
- package/build/font-size-picker/font-size-picker-select.js.map +1 -1
- package/build/font-size-picker/font-size-picker-toggle-group.js +2 -0
- package/build/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
- package/build/font-size-picker/index.js +6 -1
- package/build/font-size-picker/index.js.map +1 -1
- package/build/font-size-picker/types.js.map +1 -1
- package/build/form-token-field/index.js +6 -2
- package/build/form-token-field/index.js.map +1 -1
- package/build/form-token-field/token-input.js.map +1 -1
- package/build/form-token-field/types.js.map +1 -1
- package/build/heading/hook.js +6 -3
- package/build/heading/hook.js.map +1 -1
- package/build/heading/types.js.map +1 -1
- package/build/index.native.js +0 -16
- package/build/index.native.js.map +1 -1
- package/build/mobile/global-styles-context/utils.native.js +13 -0
- package/build/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build/mobile/utils/alignments.native.js +1 -1
- package/build/mobile/utils/alignments.native.js.map +1 -1
- package/build/palette-edit/index.js +21 -1
- package/build/palette-edit/index.js.map +1 -1
- package/build/private-apis.js +3 -2
- package/build/private-apis.js.map +1 -1
- package/build/query-controls/author-select.js +3 -1
- package/build/query-controls/author-select.js.map +1 -1
- package/build/query-controls/category-select.js +3 -1
- package/build/query-controls/category-select.js.map +1 -1
- package/build/query-controls/index.js +6 -1
- package/build/query-controls/index.js.map +1 -1
- package/build/query-controls/types.js.map +1 -1
- package/build/slot-fill/types.js.map +1 -1
- package/build/tabs/index.js +24 -5
- package/build/tabs/index.js.map +1 -1
- package/build/tabs/tab.js +4 -4
- package/build/tabs/tab.js.map +1 -1
- package/build/tabs/tabpanel.js +4 -3
- package/build/tabs/tabpanel.js.map +1 -1
- package/build/tabs/types.js.map +1 -1
- package/build/text/types.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/utils.js +17 -17
- package/build/toggle-group-control/toggle-group-control/utils.js.map +1 -1
- package/build/tools-panel/tools-panel-item/hook.js +16 -12
- package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
- package/build-module/angle-picker-control/index.js +0 -1
- package/build-module/angle-picker-control/index.js.map +1 -1
- package/build-module/border-control/border-control-dropdown/component.js +4 -2
- package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
- package/build-module/border-control/border-control-dropdown/hook.js +3 -2
- package/build-module/border-control/border-control-dropdown/hook.js.map +1 -1
- package/build-module/border-control/styles.js +17 -17
- package/build-module/border-control/styles.js.map +1 -1
- package/build-module/checkbox-control/index.js +1 -1
- package/build-module/checkbox-control/index.js.map +1 -1
- package/build-module/checkbox-control/types.js.map +1 -1
- package/build-module/custom-select-control-v2/index.js +74 -0
- package/build-module/custom-select-control-v2/index.js.map +1 -0
- package/build-module/custom-select-control-v2/styles.js +71 -0
- package/build-module/custom-select-control-v2/styles.js.map +1 -0
- package/build-module/custom-select-control-v2/types.js +2 -0
- package/build-module/custom-select-control-v2/types.js.map +1 -0
- package/build-module/date-time/time/timezone.js +11 -2
- package/build-module/date-time/time/timezone.js.map +1 -1
- package/build-module/dimension-control/index.js +2 -0
- package/build-module/dimension-control/index.js.map +1 -1
- package/build-module/dimension-control/types.js.map +1 -1
- package/build-module/dropdown-menu-v2-ariakit/index.js +46 -18
- package/build-module/dropdown-menu-v2-ariakit/index.js.map +1 -1
- package/build-module/dropdown-menu-v2-ariakit/styles.js +69 -40
- package/build-module/dropdown-menu-v2-ariakit/styles.js.map +1 -1
- package/build-module/dropdown-menu-v2-ariakit/types.js.map +1 -1
- package/build-module/focal-point-picker/controls.js +5 -1
- package/build-module/focal-point-picker/controls.js.map +1 -1
- package/build-module/focal-point-picker/index.js +2 -0
- package/build-module/focal-point-picker/index.js.map +1 -1
- package/build-module/focal-point-picker/styles/focal-point-picker-style.js +15 -15
- package/build-module/focal-point-picker/styles/focal-point-picker-style.js.map +1 -1
- package/build-module/focal-point-picker/types.js.map +1 -1
- package/build-module/font-size-picker/font-size-picker-select.js +2 -0
- package/build-module/font-size-picker/font-size-picker-select.js.map +1 -1
- package/build-module/font-size-picker/font-size-picker-toggle-group.js +2 -0
- package/build-module/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
- package/build-module/font-size-picker/index.js +6 -1
- package/build-module/font-size-picker/index.js.map +1 -1
- package/build-module/font-size-picker/types.js.map +1 -1
- package/build-module/form-token-field/index.js +6 -2
- package/build-module/form-token-field/index.js.map +1 -1
- package/build-module/form-token-field/token-input.js.map +1 -1
- package/build-module/form-token-field/types.js.map +1 -1
- package/build-module/heading/hook.js +6 -3
- package/build-module/heading/hook.js.map +1 -1
- package/build-module/heading/types.js.map +1 -1
- package/build-module/index.native.js +0 -2
- package/build-module/index.native.js.map +1 -1
- package/build-module/mobile/global-styles-context/utils.native.js +13 -0
- package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build-module/mobile/utils/alignments.native.js +1 -1
- package/build-module/mobile/utils/alignments.native.js.map +1 -1
- package/build-module/palette-edit/index.js +20 -3
- package/build-module/palette-edit/index.js.map +1 -1
- package/build-module/private-apis.js +4 -3
- package/build-module/private-apis.js.map +1 -1
- package/build-module/query-controls/author-select.js +3 -1
- package/build-module/query-controls/author-select.js.map +1 -1
- package/build-module/query-controls/category-select.js +3 -1
- package/build-module/query-controls/category-select.js.map +1 -1
- package/build-module/query-controls/index.js +6 -1
- package/build-module/query-controls/index.js.map +1 -1
- package/build-module/query-controls/types.js.map +1 -1
- package/build-module/slot-fill/types.js.map +1 -1
- package/build-module/tabs/index.js +25 -6
- package/build-module/tabs/index.js.map +1 -1
- package/build-module/tabs/tab.js +6 -6
- package/build-module/tabs/tab.js.map +1 -1
- package/build-module/tabs/tabpanel.js +6 -5
- package/build-module/tabs/tabpanel.js.map +1 -1
- package/build-module/tabs/types.js.map +1 -1
- package/build-module/text/types.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/utils.js +17 -17
- package/build-module/toggle-group-control/toggle-group-control/utils.js.map +1 -1
- package/build-module/tools-panel/tools-panel-item/hook.js +17 -13
- package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
- package/build-style/style-rtl.css +32 -6
- package/build-style/style.css +32 -6
- package/build-types/angle-picker-control/index.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/hook.d.ts +1 -0
- package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
- package/build-types/border-control/styles.d.ts +1 -1
- package/build-types/border-control/styles.d.ts.map +1 -1
- package/build-types/box-control/stories/index.story.d.ts +1944 -0
- package/build-types/box-control/stories/index.story.d.ts.map +1 -0
- package/build-types/checkbox-control/index.d.ts.map +1 -1
- package/build-types/checkbox-control/types.d.ts +3 -2
- package/build-types/checkbox-control/types.d.ts.map +1 -1
- package/build-types/color-palette/styles.d.ts +4 -1
- package/build-types/color-palette/styles.d.ts.map +1 -1
- package/build-types/custom-select-control-v2/index.d.ts +6 -0
- package/build-types/custom-select-control-v2/index.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/stories/index.story.d.ts +19 -0
- package/build-types/custom-select-control-v2/stories/index.story.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/styles.d.ts +47 -0
- package/build-types/custom-select-control-v2/styles.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/types.d.ts +57 -0
- package/build-types/custom-select-control-v2/types.d.ts.map +1 -0
- package/build-types/date-time/date/styles.d.ts +4 -1
- package/build-types/date-time/date/styles.d.ts.map +1 -1
- package/build-types/date-time/time/timezone.d.ts.map +1 -1
- package/build-types/dimension-control/index.d.ts.map +1 -1
- package/build-types/dimension-control/types.d.ts +6 -0
- package/build-types/dimension-control/types.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2-ariakit/index.d.ts +11 -2
- package/build-types/dropdown-menu-v2-ariakit/index.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2-ariakit/stories/index.story.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2-ariakit/styles.d.ts +26 -18
- package/build-types/dropdown-menu-v2-ariakit/styles.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2-ariakit/types.d.ts +0 -6
- package/build-types/dropdown-menu-v2-ariakit/types.d.ts.map +1 -1
- package/build-types/focal-point-picker/controls.d.ts +1 -1
- package/build-types/focal-point-picker/controls.d.ts.map +1 -1
- package/build-types/focal-point-picker/index.d.ts +1 -1
- package/build-types/focal-point-picker/index.d.ts.map +1 -1
- package/build-types/focal-point-picker/stories/index.story.d.ts +8 -4
- package/build-types/focal-point-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/focal-point-picker/types.d.ts +7 -0
- package/build-types/focal-point-picker/types.d.ts.map +1 -1
- package/build-types/font-size-picker/font-size-picker-select.d.ts.map +1 -1
- package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map +1 -1
- package/build-types/font-size-picker/index.d.ts.map +1 -1
- package/build-types/font-size-picker/types.d.ts +8 -1
- package/build-types/font-size-picker/types.d.ts.map +1 -1
- package/build-types/form-token-field/index.d.ts.map +1 -1
- package/build-types/form-token-field/token-input.d.ts.map +1 -1
- package/build-types/form-token-field/types.d.ts +1 -1
- package/build-types/form-token-field/types.d.ts.map +1 -1
- package/build-types/heading/component.d.ts +4 -1
- package/build-types/heading/component.d.ts.map +1 -1
- package/build-types/heading/hook.d.ts.map +1 -1
- package/build-types/heading/types.d.ts +20 -1
- package/build-types/heading/types.d.ts.map +1 -1
- package/build-types/navigation/styles/navigation-styles.d.ts +4 -1
- package/build-types/navigation/styles/navigation-styles.d.ts.map +1 -1
- package/build-types/palette-edit/index.d.ts +6 -1
- package/build-types/palette-edit/index.d.ts.map +1 -1
- package/build-types/palette-edit/styles.d.ts +4 -1
- package/build-types/palette-edit/styles.d.ts.map +1 -1
- package/build-types/private-apis.d.ts.map +1 -1
- package/build-types/query-controls/author-select.d.ts +1 -1
- package/build-types/query-controls/author-select.d.ts.map +1 -1
- package/build-types/query-controls/category-select.d.ts +1 -1
- package/build-types/query-controls/category-select.d.ts.map +1 -1
- package/build-types/query-controls/index.d.ts +1 -1
- package/build-types/query-controls/index.d.ts.map +1 -1
- package/build-types/query-controls/types.d.ts +9 -0
- package/build-types/query-controls/types.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/slot.d.ts +1 -1
- package/build-types/slot-fill/types.d.ts +16 -6
- package/build-types/slot-fill/types.d.ts.map +1 -1
- package/build-types/tabs/index.d.ts +3 -2
- package/build-types/tabs/index.d.ts.map +1 -1
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/tab.d.ts +2 -1
- package/build-types/tabs/tab.d.ts.map +1 -1
- package/build-types/tabs/tabpanel.d.ts +2 -1
- package/build-types/tabs/tabpanel.d.ts.map +1 -1
- package/build-types/tabs/types.d.ts +8 -3
- package/build-types/tabs/types.d.ts.map +1 -1
- package/build-types/text/types.d.ts +15 -2
- package/build-types/text/types.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/utils.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
- package/package.json +19 -19
- package/src/angle-picker-control/index.tsx +0 -1
- package/src/border-control/border-control-dropdown/component.tsx +3 -1
- package/src/border-control/border-control-dropdown/hook.ts +3 -2
- package/src/border-control/styles.ts +2 -9
- package/src/box-control/stories/index.story.tsx +82 -0
- package/src/button/style.scss +10 -2
- package/src/checkbox-control/README.md +2 -1
- package/src/checkbox-control/index.tsx +8 -6
- package/src/checkbox-control/test/__snapshots__/index.tsx.snap +3 -8
- package/src/checkbox-control/test/index.tsx +7 -0
- package/src/checkbox-control/types.ts +3 -2
- package/src/combobox-control/README.md +1 -3
- package/src/custom-select-control/test/index.js +367 -35
- package/src/custom-select-control-v2/README.md +73 -0
- package/src/custom-select-control-v2/index.tsx +99 -0
- package/src/custom-select-control-v2/stories/index.story.tsx +149 -0
- package/src/custom-select-control-v2/styles.ts +76 -0
- package/src/custom-select-control-v2/types.ts +63 -0
- package/src/date-time/time/timezone.tsx +15 -3
- package/src/dimension-control/index.tsx +2 -0
- package/src/dimension-control/test/__snapshots__/index.test.js.snap +2 -2
- package/src/dimension-control/types.ts +6 -0
- package/src/dropdown-menu-v2-ariakit/README.md +19 -5
- package/src/dropdown-menu-v2-ariakit/index.tsx +85 -36
- package/src/dropdown-menu-v2-ariakit/stories/index.story.tsx +204 -90
- package/src/dropdown-menu-v2-ariakit/styles.ts +165 -117
- package/src/dropdown-menu-v2-ariakit/test/index.tsx +5 -10
- package/src/dropdown-menu-v2-ariakit/types.ts +0 -7
- package/src/focal-point-picker/controls.tsx +4 -0
- package/src/focal-point-picker/index.tsx +2 -0
- package/src/focal-point-picker/styles/focal-point-picker-style.ts +1 -1
- package/src/focal-point-picker/types.ts +7 -0
- package/src/font-size-picker/font-size-picker-select.tsx +2 -0
- package/src/font-size-picker/font-size-picker-toggle-group.tsx +9 -1
- package/src/font-size-picker/index.tsx +11 -3
- package/src/font-size-picker/types.ts +8 -1
- package/src/form-toggle/style.scss +40 -8
- package/src/form-token-field/index.tsx +11 -3
- package/src/form-token-field/token-input.tsx +1 -3
- package/src/form-token-field/types.ts +1 -0
- package/src/heading/README.md +6 -1
- package/src/heading/hook.ts +6 -3
- package/src/heading/types.ts +23 -1
- package/src/index.native.js +0 -2
- package/src/mobile/global-styles-context/test/utils.native.js +22 -0
- package/src/mobile/global-styles-context/utils.native.js +14 -0
- package/src/mobile/link-settings/style.native.scss +0 -17
- package/src/mobile/utils/alignments.native.js +1 -0
- package/src/navigable-container/README.md +1 -1
- package/src/palette-edit/index.tsx +22 -8
- package/src/palette-edit/style.scss +2 -2
- package/src/palette-edit/test/index.tsx +75 -1
- package/src/private-apis.ts +4 -2
- package/src/query-controls/author-select.tsx +2 -0
- package/src/query-controls/category-select.tsx +2 -0
- package/src/query-controls/index.tsx +6 -1
- package/src/query-controls/types.ts +9 -0
- package/src/search-control/README.md +2 -0
- package/src/slot-fill/README.md +1 -1
- package/src/slot-fill/types.ts +18 -6
- package/src/spinner/README.md +2 -0
- package/src/tabs/README.md +4 -4
- package/src/tabs/index.tsx +34 -3
- package/src/tabs/stories/index.story.tsx +56 -48
- package/src/tabs/tab.tsx +7 -7
- package/src/tabs/tabpanel.tsx +10 -6
- package/src/tabs/test/index.tsx +180 -87
- package/src/tabs/types.ts +8 -3
- package/src/text/README.md +5 -1
- package/src/text/types.ts +15 -2
- package/src/toggle-control/README.md +2 -2
- package/src/toggle-group-control/test/index.tsx +54 -1
- package/src/toggle-group-control/toggle-group-control/utils.ts +15 -20
- package/src/tools-panel/tools-panel-item/hook.ts +21 -23
- package/tsconfig.tsbuildinfo +1 -1
- package/build/mobile/inserter-button/index.native.js +0 -98
- package/build/mobile/inserter-button/index.native.js.map +0 -1
- package/build/mobile/inserter-button/sparkles.js +0 -23
- package/build/mobile/inserter-button/sparkles.js.map +0 -1
- package/build/mobile/link-settings/image-link-destinations-screen.native.js +0 -119
- package/build/mobile/link-settings/image-link-destinations-screen.native.js.map +0 -1
- package/build-module/mobile/inserter-button/index.native.js +0 -89
- package/build-module/mobile/inserter-button/index.native.js.map +0 -1
- package/build-module/mobile/inserter-button/sparkles.js +0 -15
- package/build-module/mobile/inserter-button/sparkles.js.map +0 -1
- package/build-module/mobile/link-settings/image-link-destinations-screen.native.js +0 -110
- package/build-module/mobile/link-settings/image-link-destinations-screen.native.js.map +0 -1
- package/build-types/mobile/inserter-button/sparkles.d.ts +0 -3
- package/build-types/mobile/inserter-button/sparkles.d.ts.map +0 -1
- package/src/box-control/stories/index.story.js +0 -75
- package/src/mobile/inserter-button/README.md +0 -62
- package/src/mobile/inserter-button/index.native.js +0 -116
- package/src/mobile/inserter-button/sparkles.js +0 -15
- package/src/mobile/inserter-button/style.native.scss +0 -72
- package/src/mobile/link-settings/image-link-destinations-screen.native.js +0 -152
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["@wordpress/components/src/focal-point-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tCSSProperties,\n\tReactEventHandler,\n\tRef,\n\tVideoHTMLAttributes,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type FocalPoint = Record< FocalPointAxis, number >;\nexport type FocalPointAxis = 'x' | 'y';\n\nexport type FocalPointPickerProps = Pick<\n\tBaseControlProps,\n\t'help' | 'hideLabelFromVision' | 'label'\n> & {\n\t/**\n\t * Start opting into the new margin-free styles that will become the default in a future version.\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * Autoplays HTML5 video. This only applies to video sources (`url`).\n\t *\n\t * @default true\n\t */\n\tautoPlay?: FocalPointPickerMediaProps[ 'autoPlay' ];\n\t/**\n\t * Callback which is called when the focal point changes.\n\t */\n\tonChange: ( value: FocalPoint ) => void;\n\tonDrag?: ( value: FocalPoint, event: MouseEvent ) => void;\n\t/**\n\t * Callback which is called at the end of drag operations.\n\t */\n\tonDragEnd?: () => void;\n\t/**\n\t * Callback which is called at the start of drag operations.\n\t */\n\tonDragStart?: ( value: FocalPoint, event: React.MouseEvent ) => void;\n\t/**\n\t * Function which is called before internal updates to the value state.\n\t * It receives the upcoming value and may return a modified one.\n\t */\n\tresolvePoint?: ( point: FocalPoint ) => FocalPoint;\n\t/**\n\t * URL of the image or video to be displayed.\n\t */\n\turl: FocalPointPickerMediaProps[ 'src' ];\n\t/**\n\t * The focal point. Should be an object containing `x` and `y` params.\n\t */\n\tvalue: FocalPoint;\n};\n\nexport type FocalPointPickerControlsProps = {\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * A bit of extra bottom margin will be added if a `help` text\n\t * needs to be rendered under it.\n\t */\n\thasHelpText: boolean;\n\tonChange?: ( value: FocalPoint ) => void;\n\tpoint?: FocalPoint;\n};\n\nexport type FocalPointPickerGridProps = {\n\tbounds: { width: number; height: number };\n\tshowOverlay?: boolean;\n};\n\nexport type FocalPointPickerMediaProps = Pick<\n\tVideoHTMLAttributes< HTMLVideoElement >,\n\t'autoPlay' | 'muted'\n> & {\n\talt: string;\n\tmediaRef?: Ref< HTMLDivElement | HTMLVideoElement | HTMLImageElement >;\n\tonLoad?: ReactEventHandler< HTMLVideoElement | HTMLImageElement >;\n\tsrc: string;\n};\n\nexport type FocalPointProps = {\n\tisDragging: boolean;\n\tleft: CSSProperties[ 'left' ];\n\ttop: CSSProperties[ 'top' ];\n};\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["@wordpress/components/src/focal-point-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tCSSProperties,\n\tReactEventHandler,\n\tRef,\n\tVideoHTMLAttributes,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type FocalPoint = Record< FocalPointAxis, number >;\nexport type FocalPointAxis = 'x' | 'y';\n\nexport type FocalPointPickerProps = Pick<\n\tBaseControlProps,\n\t'help' | 'hideLabelFromVision' | 'label'\n> & {\n\t/**\n\t * Start opting into the new margin-free styles that will become the default in a future version.\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Autoplays HTML5 video. This only applies to video sources (`url`).\n\t *\n\t * @default true\n\t */\n\tautoPlay?: FocalPointPickerMediaProps[ 'autoPlay' ];\n\t/**\n\t * Callback which is called when the focal point changes.\n\t */\n\tonChange: ( value: FocalPoint ) => void;\n\tonDrag?: ( value: FocalPoint, event: MouseEvent ) => void;\n\t/**\n\t * Callback which is called at the end of drag operations.\n\t */\n\tonDragEnd?: () => void;\n\t/**\n\t * Callback which is called at the start of drag operations.\n\t */\n\tonDragStart?: ( value: FocalPoint, event: React.MouseEvent ) => void;\n\t/**\n\t * Function which is called before internal updates to the value state.\n\t * It receives the upcoming value and may return a modified one.\n\t */\n\tresolvePoint?: ( point: FocalPoint ) => FocalPoint;\n\t/**\n\t * URL of the image or video to be displayed.\n\t */\n\turl: FocalPointPickerMediaProps[ 'src' ];\n\t/**\n\t * The focal point. Should be an object containing `x` and `y` params.\n\t */\n\tvalue: FocalPoint;\n};\n\nexport type FocalPointPickerControlsProps = {\n\t__nextHasNoMarginBottom?: boolean;\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * A bit of extra bottom margin will be added if a `help` text\n\t * needs to be rendered under it.\n\t */\n\thasHelpText: boolean;\n\tonChange?: ( value: FocalPoint ) => void;\n\tpoint?: FocalPoint;\n};\n\nexport type FocalPointPickerGridProps = {\n\tbounds: { width: number; height: number };\n\tshowOverlay?: boolean;\n};\n\nexport type FocalPointPickerMediaProps = Pick<\n\tVideoHTMLAttributes< HTMLVideoElement >,\n\t'autoPlay' | 'muted'\n> & {\n\talt: string;\n\tmediaRef?: Ref< HTMLDivElement | HTMLVideoElement | HTMLImageElement >;\n\tonLoad?: ReactEventHandler< HTMLVideoElement | HTMLImageElement >;\n\tsrc: string;\n};\n\nexport type FocalPointProps = {\n\tisDragging: boolean;\n\tleft: CSSProperties[ 'left' ];\n\ttop: CSSProperties[ 'top' ];\n};\n"],"mappings":""}
|
|
@@ -22,6 +22,7 @@ const CUSTOM_OPTION = {
|
|
|
22
22
|
const FontSizePickerSelect = props => {
|
|
23
23
|
var _options$find;
|
|
24
24
|
const {
|
|
25
|
+
__next40pxDefaultSize,
|
|
25
26
|
fontSizes,
|
|
26
27
|
value,
|
|
27
28
|
disableCustomFontSizes,
|
|
@@ -49,6 +50,7 @@ const FontSizePickerSelect = props => {
|
|
|
49
50
|
}), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];
|
|
50
51
|
const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;
|
|
51
52
|
return createElement(CustomSelectControl, {
|
|
53
|
+
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
52
54
|
__nextUnconstrainedWidth: true,
|
|
53
55
|
className: "components-font-size-picker__select",
|
|
54
56
|
label: __('Font size'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__","sprintf","CustomSelectControl","parseQuantityAndUnitFromRawValue","getCommonSizeUnit","isSimpleCssValue","DEFAULT_OPTION","key","name","value","undefined","CUSTOM_OPTION","FontSizePickerSelect","props","_options$find","fontSizes","disableCustomFontSizes","size","onChange","onSelectCustom","areAllSizesSameUnit","options","map","fontSize","hint","quantity","String","slug","__experimentalHint","selectedOption","find","option","createElement","__nextUnconstrainedWidth","className","label","hideLabelFromVision","describedBy","__experimentalShowSelectedHint","selectedItem"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport type {\n\tFontSizePickerSelectProps,\n\tFontSizePickerSelectOption,\n} from './types';\nimport { getCommonSizeUnit, isSimpleCssValue } from './utils';\n\nconst DEFAULT_OPTION: FontSizePickerSelectOption = {\n\tkey: 'default',\n\tname: __( 'Default' ),\n\tvalue: undefined,\n};\n\nconst CUSTOM_OPTION: FontSizePickerSelectOption = {\n\tkey: 'custom',\n\tname: __( 'Custom' ),\n};\n\nconst FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {\n\tconst {\n\t\tfontSizes,\n\t\tvalue,\n\t\tdisableCustomFontSizes,\n\t\tsize,\n\t\tonChange,\n\t\tonSelectCustom,\n\t} = props;\n\n\tconst areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );\n\n\tconst options: FontSizePickerSelectOption[] = [\n\t\tDEFAULT_OPTION,\n\t\t...fontSizes.map( ( fontSize ) => {\n\t\t\tlet hint;\n\t\t\tif ( areAllSizesSameUnit ) {\n\t\t\t\tconst [ quantity ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tfontSize.size\n\t\t\t\t);\n\t\t\t\tif ( quantity !== undefined ) {\n\t\t\t\t\thint = String( quantity );\n\t\t\t\t}\n\t\t\t} else if ( isSimpleCssValue( fontSize.size ) ) {\n\t\t\t\thint = String( fontSize.size );\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tkey: fontSize.slug,\n\t\t\t\tname: fontSize.name || fontSize.slug,\n\t\t\t\tvalue: fontSize.size,\n\t\t\t\t__experimentalHint: hint,\n\t\t\t};\n\t\t} ),\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),\n\t];\n\n\tconst selectedOption = value\n\t\t? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION\n\t\t: DEFAULT_OPTION;\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__nextUnconstrainedWidth\n\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tdescribedBy={ sprintf(\n\t\t\t\t// translators: %s: Currently selected font size.\n\t\t\t\t__( 'Currently selected font size: %s' ),\n\t\t\t\tselectedOption.name\n\t\t\t) }\n\t\t\toptions={ options }\n\t\t\tvalue={ selectedOption }\n\t\t\t__experimentalShowSelectedHint\n\t\t\tonChange={ ( {\n\t\t\t\tselectedItem,\n\t\t\t}: {\n\t\t\t\tselectedItem: FontSizePickerSelectOption;\n\t\t\t} ) => {\n\t\t\t\tif ( selectedItem === CUSTOM_OPTION ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selectedItem.value );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t/>\n\t);\n};\n\nexport default FontSizePickerSelect;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAOC,mBAAmB,MAAM,0BAA0B;AAC1D,SAASC,gCAAgC,QAAQ,iBAAiB;AAKlE,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,SAAS;AAE7D,MAAMC,cAA0C,GAAG;EAClDC,GAAG,EAAE,SAAS;EACdC,IAAI,EAAER,EAAE,CAAE,SAAU,CAAC;EACrBS,KAAK,EAAEC;AACR,CAAC;AAED,MAAMC,aAAyC,GAAG;EACjDJ,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAER,EAAE,CAAE,QAAS;AACpB,CAAC;AAED,MAAMY,oBAAoB,GAAKC,KAAgC,IAAM;EAAA,IAAAC,aAAA;EACpE,MAAM;IACLC,SAAS;
|
|
1
|
+
{"version":3,"names":["__","sprintf","CustomSelectControl","parseQuantityAndUnitFromRawValue","getCommonSizeUnit","isSimpleCssValue","DEFAULT_OPTION","key","name","value","undefined","CUSTOM_OPTION","FontSizePickerSelect","props","_options$find","__next40pxDefaultSize","fontSizes","disableCustomFontSizes","size","onChange","onSelectCustom","areAllSizesSameUnit","options","map","fontSize","hint","quantity","String","slug","__experimentalHint","selectedOption","find","option","createElement","__nextUnconstrainedWidth","className","label","hideLabelFromVision","describedBy","__experimentalShowSelectedHint","selectedItem"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport type {\n\tFontSizePickerSelectProps,\n\tFontSizePickerSelectOption,\n} from './types';\nimport { getCommonSizeUnit, isSimpleCssValue } from './utils';\n\nconst DEFAULT_OPTION: FontSizePickerSelectOption = {\n\tkey: 'default',\n\tname: __( 'Default' ),\n\tvalue: undefined,\n};\n\nconst CUSTOM_OPTION: FontSizePickerSelectOption = {\n\tkey: 'custom',\n\tname: __( 'Custom' ),\n};\n\nconst FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tfontSizes,\n\t\tvalue,\n\t\tdisableCustomFontSizes,\n\t\tsize,\n\t\tonChange,\n\t\tonSelectCustom,\n\t} = props;\n\n\tconst areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );\n\n\tconst options: FontSizePickerSelectOption[] = [\n\t\tDEFAULT_OPTION,\n\t\t...fontSizes.map( ( fontSize ) => {\n\t\t\tlet hint;\n\t\t\tif ( areAllSizesSameUnit ) {\n\t\t\t\tconst [ quantity ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tfontSize.size\n\t\t\t\t);\n\t\t\t\tif ( quantity !== undefined ) {\n\t\t\t\t\thint = String( quantity );\n\t\t\t\t}\n\t\t\t} else if ( isSimpleCssValue( fontSize.size ) ) {\n\t\t\t\thint = String( fontSize.size );\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tkey: fontSize.slug,\n\t\t\t\tname: fontSize.name || fontSize.slug,\n\t\t\t\tvalue: fontSize.size,\n\t\t\t\t__experimentalHint: hint,\n\t\t\t};\n\t\t} ),\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),\n\t];\n\n\tconst selectedOption = value\n\t\t? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION\n\t\t: DEFAULT_OPTION;\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__nextUnconstrainedWidth\n\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tdescribedBy={ sprintf(\n\t\t\t\t// translators: %s: Currently selected font size.\n\t\t\t\t__( 'Currently selected font size: %s' ),\n\t\t\t\tselectedOption.name\n\t\t\t) }\n\t\t\toptions={ options }\n\t\t\tvalue={ selectedOption }\n\t\t\t__experimentalShowSelectedHint\n\t\t\tonChange={ ( {\n\t\t\t\tselectedItem,\n\t\t\t}: {\n\t\t\t\tselectedItem: FontSizePickerSelectOption;\n\t\t\t} ) => {\n\t\t\t\tif ( selectedItem === CUSTOM_OPTION ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selectedItem.value );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t/>\n\t);\n};\n\nexport default FontSizePickerSelect;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAOC,mBAAmB,MAAM,0BAA0B;AAC1D,SAASC,gCAAgC,QAAQ,iBAAiB;AAKlE,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,SAAS;AAE7D,MAAMC,cAA0C,GAAG;EAClDC,GAAG,EAAE,SAAS;EACdC,IAAI,EAAER,EAAE,CAAE,SAAU,CAAC;EACrBS,KAAK,EAAEC;AACR,CAAC;AAED,MAAMC,aAAyC,GAAG;EACjDJ,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAER,EAAE,CAAE,QAAS;AACpB,CAAC;AAED,MAAMY,oBAAoB,GAAKC,KAAgC,IAAM;EAAA,IAAAC,aAAA;EACpE,MAAM;IACLC,qBAAqB;IACrBC,SAAS;IACTP,KAAK;IACLQ,sBAAsB;IACtBC,IAAI;IACJC,QAAQ;IACRC;EACD,CAAC,GAAGP,KAAK;EAET,MAAMQ,mBAAmB,GAAG,CAAC,CAAEjB,iBAAiB,CAAEY,SAAU,CAAC;EAE7D,MAAMM,OAAqC,GAAG,CAC7ChB,cAAc,EACd,GAAGU,SAAS,CAACO,GAAG,CAAIC,QAAQ,IAAM;IACjC,IAAIC,IAAI;IACR,IAAKJ,mBAAmB,EAAG;MAC1B,MAAM,CAAEK,QAAQ,CAAE,GAAGvB,gCAAgC,CACpDqB,QAAQ,CAACN,IACV,CAAC;MACD,IAAKQ,QAAQ,KAAKhB,SAAS,EAAG;QAC7Be,IAAI,GAAGE,MAAM,CAAED,QAAS,CAAC;MAC1B;IACD,CAAC,MAAM,IAAKrB,gBAAgB,CAAEmB,QAAQ,CAACN,IAAK,CAAC,EAAG;MAC/CO,IAAI,GAAGE,MAAM,CAAEH,QAAQ,CAACN,IAAK,CAAC;IAC/B;IACA,OAAO;MACNX,GAAG,EAAEiB,QAAQ,CAACI,IAAI;MAClBpB,IAAI,EAAEgB,QAAQ,CAAChB,IAAI,IAAIgB,QAAQ,CAACI,IAAI;MACpCnB,KAAK,EAAEe,QAAQ,CAACN,IAAI;MACpBW,kBAAkB,EAAEJ;IACrB,CAAC;EACF,CAAE,CAAC,EACH,IAAKR,sBAAsB,GAAG,EAAE,GAAG,CAAEN,aAAa,CAAE,CAAE,CACtD;EAED,MAAMmB,cAAc,GAAGrB,KAAK,IAAAK,aAAA,GACzBQ,OAAO,CAACS,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACvB,KAAK,KAAKA,KAAM,CAAC,cAAAK,aAAA,cAAAA,aAAA,GAAIH,aAAa,GACrEL,cAAc;EAEjB,OACC2B,aAAA,CAAC/B,mBAAmB;IACnBa,qBAAqB,EAAGA,qBAAuB;IAC/CmB,wBAAwB;IACxBC,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAGpC,EAAE,CAAE,WAAY,CAAG;IAC3BqC,mBAAmB;IACnBC,WAAW,EAAGrC,OAAO;IACpB;IACAD,EAAE,CAAE,kCAAmC,CAAC,EACxC8B,cAAc,CAACtB,IAChB,CAAG;IACHc,OAAO,EAAGA,OAAS;IACnBb,KAAK,EAAGqB,cAAgB;IACxBS,8BAA8B;IAC9BpB,QAAQ,EAAGA,CAAE;MACZqB;IAGD,CAAC,KAAM;MACN,IAAKA,YAAY,KAAK7B,aAAa,EAAG;QACrCS,cAAc,CAAC,CAAC;MACjB,CAAC,MAAM;QACND,QAAQ,CAAEqB,YAAY,CAAC/B,KAAM,CAAC;MAC/B;IACD,CAAG;IACHS,IAAI,EAAGA;EAAM,CACb,CAAC;AAEJ,CAAC;AAED,eAAeN,oBAAoB"}
|
|
@@ -14,11 +14,13 @@ const FontSizePickerToggleGroup = props => {
|
|
|
14
14
|
fontSizes,
|
|
15
15
|
value,
|
|
16
16
|
__nextHasNoMarginBottom,
|
|
17
|
+
__next40pxDefaultSize,
|
|
17
18
|
size,
|
|
18
19
|
onChange
|
|
19
20
|
} = props;
|
|
20
21
|
return createElement(ToggleGroupControl, {
|
|
21
22
|
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
|
|
23
|
+
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
22
24
|
label: __('Font size'),
|
|
23
25
|
hideLabelFromVision: true,
|
|
24
26
|
value: value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__","ToggleGroupControl","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","T_SHIRT_NAMES","FontSizePickerToggleGroup","props","fontSizes","value","__nextHasNoMarginBottom","size","onChange","createElement","label","hideLabelFromVision","isBlock","map","fontSize","index","key","slug","name","showTooltip"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst {
|
|
1
|
+
{"version":3,"names":["__","ToggleGroupControl","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","T_SHIRT_NAMES","FontSizePickerToggleGroup","props","fontSizes","value","__nextHasNoMarginBottom","__next40pxDefaultSize","size","onChange","createElement","label","hideLabelFromVision","isBlock","map","fontSize","index","key","slug","name","showTooltip"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst {\n\t\tfontSizes,\n\t\tvalue,\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t\tonChange,\n\t} = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,kBAAkB,EAClBC,wBAAwB,QAClB,yBAAyB;AAChC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,aAAa;AAGlE,MAAMC,yBAAyB,GAAKC,KAAqC,IAAM;EAC9E,MAAM;IACLC,SAAS;IACTC,KAAK;IACLC,uBAAuB;IACvBC,qBAAqB;IACrBC,IAAI;IACJC;EACD,CAAC,GAAGN,KAAK;EACT,OACCO,aAAA,CAACZ,kBAAkB;IAClBQ,uBAAuB,EAAGA,uBAAyB;IACnDC,qBAAqB,EAAGA,qBAAuB;IAC/CI,KAAK,EAAGd,EAAE,CAAE,WAAY,CAAG;IAC3Be,mBAAmB;IACnBP,KAAK,EAAGA,KAAO;IACfI,QAAQ,EAAGA,QAAU;IACrBI,OAAO;IACPL,IAAI,EAAGA;EAAM,GAEXJ,SAAS,CAACU,GAAG,CAAE,CAAEC,QAAQ,EAAEC,KAAK,KACjCN,aAAA,CAACX,wBAAwB;IACxBkB,GAAG,EAAGF,QAAQ,CAACG,IAAM;IACrBb,KAAK,EAAGU,QAAQ,CAACP,IAAM;IACvBG,KAAK,EAAGX,qBAAqB,CAAEgB,KAAK,CAAI;IACxC,cAAaD,QAAQ,CAACI,IAAI,IAAIlB,aAAa,CAAEe,KAAK,CAAI;IACtDI,WAAW;EAAA,CACX,CACA,CACiB,CAAC;AAEvB,CAAC;AAED,eAAelB,yBAAyB"}
|
|
@@ -29,6 +29,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
29
29
|
const {
|
|
30
30
|
/** Start opting into the new margin-free styles that will become the default in a future version. */
|
|
31
31
|
__nextHasNoMarginBottom = false,
|
|
32
|
+
__next40pxDefaultSize = false,
|
|
32
33
|
fallbackFontSize,
|
|
33
34
|
fontSizes = [],
|
|
34
35
|
disableCustomFontSizes = false,
|
|
@@ -102,6 +103,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
102
103
|
className: "components-font-size-picker__controls",
|
|
103
104
|
__nextHasNoMarginBottom: __nextHasNoMarginBottom
|
|
104
105
|
}, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(FontSizePickerSelect, {
|
|
106
|
+
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
105
107
|
fontSizes: fontSizes,
|
|
106
108
|
value: value,
|
|
107
109
|
disableCustomFontSizes: disableCustomFontSizes,
|
|
@@ -118,6 +120,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
118
120
|
fontSizes: fontSizes,
|
|
119
121
|
value: value,
|
|
120
122
|
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
|
|
123
|
+
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
121
124
|
size: size,
|
|
122
125
|
onChange: newValue => {
|
|
123
126
|
if (newValue === undefined) {
|
|
@@ -131,6 +134,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
131
134
|
}, createElement(FlexItem, {
|
|
132
135
|
isBlock: true
|
|
133
136
|
}, createElement(UnitControl, {
|
|
137
|
+
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
134
138
|
label: __('Custom'),
|
|
135
139
|
labelPosition: "top",
|
|
136
140
|
hideLabelFromVision: true,
|
|
@@ -152,6 +156,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
152
156
|
marginBottom: 0
|
|
153
157
|
}, createElement(RangeControl, {
|
|
154
158
|
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
|
|
159
|
+
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
155
160
|
className: "components-font-size-picker__custom-input",
|
|
156
161
|
label: __('Custom Size'),
|
|
157
162
|
hideLabelFromVision: true,
|
|
@@ -177,7 +182,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
177
182
|
},
|
|
178
183
|
variant: "secondary",
|
|
179
184
|
__next40pxDefaultSize: true,
|
|
180
|
-
size: size
|
|
185
|
+
size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small'
|
|
181
186
|
}, __('Reset'))))));
|
|
182
187
|
};
|
|
183
188
|
export const FontSizePicker = forwardRef(UnforwardedFontSizePicker);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["deprecated","__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Controls","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","since","version","hint","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","createElement","className","as","label","icon","onClick","isPressed","isSmall","newValue","undefined","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","initialPosition","withInputField","max","step","disabled","variant","__next40pxDefaultSize","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n\tControls,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize !== '__unstable-large'\n\t\t\t\t\t\t\t\t\t\t\t? 'small'\n\t\t\t\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["deprecated","__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Controls","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","since","version","hint","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","createElement","className","as","label","icon","onClick","isPressed","isSmall","newValue","undefined","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","initialPosition","withInputField","max","step","disabled","variant","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n\tControls,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' ||\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["@wordpress/components/src/font-size-picker/types.ts"],"sourcesContent":["export type FontSizePickerProps = {\n\t/**\n\t * If `true`, it will not be possible to choose a custom fontSize. The user\n\t * will be forced to pick one of the pre-defined sizes passed in fontSizes.\n\t *\n\t * @default false\n\t */\n\tdisableCustomFontSizes?: boolean;\n\t/**\n\t * If no value exists, this prop defines the starting position for the font\n\t * size picker slider. Only relevant if `withSlider` is `true`.\n\t */\n\tfallbackFontSize?: number;\n\t/**\n\t * An array of font size objects. The object should contain properties size,\n\t * name, and slug.\n\t */\n\tfontSizes?: FontSize[];\n\t/**\n\t * A function that receives the new font size value.\n\t * If onChange is called without any parameter, it should reset the value,\n\t * attending to what reset means in that context, e.g., set the font size to\n\t * undefined or set the font size a starting value.\n\t */\n\tonChange?: (\n\t\tvalue: number | string | undefined,\n\t\tselectedItem?: FontSize\n\t) => void;\n\t/**\n\t * Available units for custom font size selection.\n\t */\n\tunits?: string[];\n\t/**\n\t * The current font size value.\n\t */\n\tvalue?: number | string;\n\t/**\n\t * If `true`, the UI will contain a slider, instead of a numeric text input\n\t * field. If `false`, no slider will be present.\n\t *\n\t * @default false\n\t */\n\twithSlider?: boolean;\n\t/**\n\t * If `true`, a reset button will be displayed alongside the input field\n\t * when a custom font size is active. Has no effect when\n\t * `disableCustomFontSizes` or `withSlider` is `true`.\n\t *\n\t * @default true\n\t */\n\twithReset?: boolean;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * Size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n};\n\nexport type FontSize = {\n\t/**\n\t * The property `size` contains a number with the font size value, in `px` or\n\t * a string specifying the font size CSS property that should be used eg:\n\t * \"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\".\n\t */\n\tsize: number | string;\n\t/**\n\t * The `name` property includes a label for that font size e.g.: `Small`.\n\t */\n\tname?: string;\n\t/**\n\t * The `slug` property is a string with a unique identifier for the font\n\t * size. Used for the class generation process.\n\t */\n\tslug: string;\n};\n\nexport type FontSizePickerSelectProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tdisableCustomFontSizes: NonNullable<\n\t\tFontSizePickerProps[ 'disableCustomFontSizes' ]\n\t>;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n\tonSelectCustom: () => void;\n};\n\nexport type FontSizePickerSelectOption = {\n\tkey: string;\n\tname: string;\n\tvalue?: FontSize[ 'size' ];\n\t__experimentalHint?: string;\n};\n\nexport type FontSizePickerToggleGroupProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size' | '__nextHasNoMarginBottom'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n};\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["@wordpress/components/src/font-size-picker/types.ts"],"sourcesContent":["export type FontSizePickerProps = {\n\t/**\n\t * If `true`, it will not be possible to choose a custom fontSize. The user\n\t * will be forced to pick one of the pre-defined sizes passed in fontSizes.\n\t *\n\t * @default false\n\t */\n\tdisableCustomFontSizes?: boolean;\n\t/**\n\t * If no value exists, this prop defines the starting position for the font\n\t * size picker slider. Only relevant if `withSlider` is `true`.\n\t */\n\tfallbackFontSize?: number;\n\t/**\n\t * An array of font size objects. The object should contain properties size,\n\t * name, and slug.\n\t */\n\tfontSizes?: FontSize[];\n\t/**\n\t * A function that receives the new font size value.\n\t * If onChange is called without any parameter, it should reset the value,\n\t * attending to what reset means in that context, e.g., set the font size to\n\t * undefined or set the font size a starting value.\n\t */\n\tonChange?: (\n\t\tvalue: number | string | undefined,\n\t\tselectedItem?: FontSize\n\t) => void;\n\t/**\n\t * Available units for custom font size selection.\n\t */\n\tunits?: string[];\n\t/**\n\t * The current font size value.\n\t */\n\tvalue?: number | string;\n\t/**\n\t * If `true`, the UI will contain a slider, instead of a numeric text input\n\t * field. If `false`, no slider will be present.\n\t *\n\t * @default false\n\t */\n\twithSlider?: boolean;\n\t/**\n\t * If `true`, a reset button will be displayed alongside the input field\n\t * when a custom font size is active. Has no effect when\n\t * `disableCustomFontSizes` or `withSlider` is `true`.\n\t *\n\t * @default true\n\t */\n\twithReset?: boolean;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n};\n\nexport type FontSize = {\n\t/**\n\t * The property `size` contains a number with the font size value, in `px` or\n\t * a string specifying the font size CSS property that should be used eg:\n\t * \"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\".\n\t */\n\tsize: number | string;\n\t/**\n\t * The `name` property includes a label for that font size e.g.: `Small`.\n\t */\n\tname?: string;\n\t/**\n\t * The `slug` property is a string with a unique identifier for the font\n\t * size. Used for the class generation process.\n\t */\n\tslug: string;\n};\n\nexport type FontSizePickerSelectProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tdisableCustomFontSizes: NonNullable<\n\t\tFontSizePickerProps[ 'disableCustomFontSizes' ]\n\t>;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n\tonSelectCustom: () => void;\n\t__next40pxDefaultSize: boolean;\n};\n\nexport type FontSizePickerSelectOption = {\n\tkey: string;\n\tname: string;\n\tvalue?: FontSize[ 'size' ];\n\t__experimentalHint?: string;\n};\n\nexport type FontSizePickerToggleGroupProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size' | '__nextHasNoMarginBottom' | '__next40pxDefaultSize'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n};\n"],"mappings":""}
|
|
@@ -133,7 +133,7 @@ export function FormTokenField(props) {
|
|
|
133
133
|
onFocus(event);
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
|
-
function onBlur() {
|
|
136
|
+
function onBlur(event) {
|
|
137
137
|
if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {
|
|
138
138
|
setIsActive(false);
|
|
139
139
|
if (tokenizeOnBlur && inputHasValidValue()) {
|
|
@@ -144,7 +144,11 @@ export function FormTokenField(props) {
|
|
|
144
144
|
setIncompleteTokenValue('');
|
|
145
145
|
setInputOffsetFromEnd(0);
|
|
146
146
|
setIsActive(false);
|
|
147
|
-
|
|
147
|
+
|
|
148
|
+
// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
|
|
149
|
+
// the user clicks on it (`tokensAndInput` will be the element that caused the blur).
|
|
150
|
+
const shouldKeepSuggestionsExpanded = !__experimentalExpandOnFocus || __experimentalExpandOnFocus && event.relatedTarget === tokensAndInput.current;
|
|
151
|
+
setIsExpanded(shouldKeepSuggestionsExpanded);
|
|
148
152
|
setSelectedSuggestionIndex(-1);
|
|
149
153
|
setSelectedSuggestionScroll(false);
|
|
150
154
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","useEffect","useRef","useState","__","_n","sprintf","useDebounce","useInstanceId","usePrevious","speak","isShallowEqual","Token","TokenInput","TokensAndInputWrapperFlex","SuggestionsList","FlexItem","StyledHelp","StyledLabel","Spacer","useDeprecated36pxDefaultSizeProp","identity","value","FormTokenField","props","autoCapitalize","autoComplete","maxLength","placeholder","label","className","suggestions","maxSuggestions","displayTransform","saveTransform","token","trim","onChange","onInputChange","onFocus","undefined","isBorderless","disabled","tokenizeOnSpace","messages","added","removed","remove","__experimentalInvalid","__experimentalRenderItem","__experimentalExpandOnFocus","__experimentalValidateInput","__experimentalShowHowTo","__next40pxDefaultSize","__experimentalAutoSelectFirstMatch","__nextHasNoMarginBottom","tokenizeOnBlur","instanceId","incompleteTokenValue","setIncompleteTokenValue","inputOffsetFromEnd","setInputOffsetFromEnd","isActive","setIsActive","isExpanded","setIsExpanded","selectedSuggestionIndex","setSelectedSuggestionIndex","selectedSuggestionScroll","setSelectedSuggestionScroll","prevSuggestions","prevValue","input","tokensAndInput","debouncedSpeak","hasFocus","focus","suggestionsDidUpdate","updateSuggestions","current","ownerDocument","activeElement","onFocusHandler","event","target","onBlur","inputHasValidValue","addNewToken","onKeyDown","preventDefault","defaultPrevented","nativeEvent","isComposing","keyCode","key","handleDeleteKey","deleteTokenBeforeInput","addCurrentToken","handleLeftArrowKey","handleUpArrowKey","handleRightArrowKey","handleDownArrowKey","deleteTokenAfterInput","handleEscapeKey","onKeyPress","handleCommaKey","onContainerTouched","onTokenClickRemove","deleteToken","onSuggestionHovered","suggestion","index","getMatchingSuggestions","indexOf","onSuggestionSelected","onInputChangeHandler","text","separator","items","split","tokenValue","length","addNewTokens","slice","_deleteToken","isInputEmpty","moveInputBeforePreviousToken","moveInputAfterNextToken","HTMLInputElement","moveInputToIndex","Math","max","prevInputOffsetFromEnd","min","getIndexOfInput","selectedSuggestion","getSelectedSuggestion","tokens","tokensToAdd","Set","map","filter","Boolean","valueContainsToken","newValue","splice","newTokens","item","getTokenValue","searchValue","_suggestions","_value","_maxSuggestions","_saveTransform","match","startsWithMatch","containsMatch","normalizedValue","includes","toLocaleLowerCase","forEach","push","concat","some","resetSelectedSuggestion","inputHasMinimumChars","matchingSuggestions","hasMatchingSuggestions","shouldExpandIfFocuses","message","renderTokensAndInput","components","renderToken","renderInput","status","termPosition","termsCount","createElement","title","onClickRemove","onMouseEnter","onMouseLeave","inputProps","ref","classes","tokenFieldProps","tabIndex","Object","assign","htmlFor","onMouseDown","onTouchStart","justify","align","gap","wrap","hasTokens","selectedIndex","scrollIntoView","onHover","onSelect","marginBottom","id"],"sources":["@wordpress/components/src/form-token-field/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport Token from './token';\nimport TokenInput from './token-input';\nimport { TokensAndInputWrapperFlex } from './styles';\nimport SuggestionsList from './suggestions-list';\nimport type { FormTokenFieldProps, TokenItem } from './types';\nimport { FlexItem } from '../flex';\nimport {\n\tStyledHelp,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport { Spacer } from '../spacer';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst identity = ( value: string ) => value;\n\n/**\n * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,\n * or the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.\n *\n * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).\n * Tokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.\n *\n * The `value` property is handled in a manner similar to controlled form components.\n * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.\n */\nexport function FormTokenField( props: FormTokenFieldProps ) {\n\tconst {\n\t\tautoCapitalize,\n\t\tautoComplete,\n\t\tmaxLength,\n\t\tplaceholder,\n\t\tlabel = __( 'Add item' ),\n\t\tclassName,\n\t\tsuggestions = [],\n\t\tmaxSuggestions = 100,\n\t\tvalue = [],\n\t\tdisplayTransform = identity,\n\t\tsaveTransform = ( token ) => token.trim(),\n\t\tonChange = () => {},\n\t\tonInputChange = () => {},\n\t\tonFocus = undefined,\n\t\tisBorderless = false,\n\t\tdisabled = false,\n\t\ttokenizeOnSpace = false,\n\t\tmessages = {\n\t\t\tadded: __( 'Item added.' ),\n\t\t\tremoved: __( 'Item removed.' ),\n\t\t\tremove: __( 'Remove item' ),\n\t\t\t__experimentalInvalid: __( 'Invalid item' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t\t__experimentalExpandOnFocus = false,\n\t\t__experimentalValidateInput = () => true,\n\t\t__experimentalShowHowTo = true,\n\t\t__next40pxDefaultSize = false,\n\t\t__experimentalAutoSelectFirstMatch = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\ttokenizeOnBlur = false,\n\t} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(\n\t\tprops,\n\t\t'wp.components.FormTokenField'\n\t);\n\n\tconst instanceId = useInstanceId( FormTokenField );\n\n\t// We reset to these initial values again in the onBlur\n\tconst [ incompleteTokenValue, setIncompleteTokenValue ] = useState( '' );\n\tconst [ inputOffsetFromEnd, setInputOffsetFromEnd ] = useState( 0 );\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ selectedSuggestionIndex, setSelectedSuggestionIndex ] =\n\t\tuseState( -1 );\n\tconst [ selectedSuggestionScroll, setSelectedSuggestionScroll ] =\n\t\tuseState( false );\n\n\tconst prevSuggestions = usePrevious< string[] >( suggestions );\n\tconst prevValue = usePrevious< ( string | TokenItem )[] >( value );\n\n\tconst input = useRef< HTMLInputElement >( null );\n\tconst tokensAndInput = useRef< HTMLInputElement >( null );\n\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\tuseEffect( () => {\n\t\t// Make sure to focus the input when the isActive state is true.\n\t\tif ( isActive && ! hasFocus() ) {\n\t\t\tfocus();\n\t\t}\n\t}, [ isActive ] );\n\n\tuseEffect( () => {\n\t\tconst suggestionsDidUpdate = ! isShallowEqual(\n\t\t\tsuggestions,\n\t\t\tprevSuggestions || []\n\t\t);\n\n\t\tif ( suggestionsDidUpdate || value !== prevValue ) {\n\t\t\tupdateSuggestions( suggestionsDidUpdate );\n\t\t}\n\n\t\t// TODO: updateSuggestions() should first be refactored so its actual deps are clearer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ suggestions, prevSuggestions, value, prevValue ] );\n\n\tuseEffect( () => {\n\t\tupdateSuggestions();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ incompleteTokenValue ] );\n\n\tuseEffect( () => {\n\t\tupdateSuggestions();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ __experimentalAutoSelectFirstMatch ] );\n\n\tif ( disabled && isActive ) {\n\t\tsetIsActive( false );\n\t\tsetIncompleteTokenValue( '' );\n\t}\n\n\tfunction focus() {\n\t\tinput.current?.focus();\n\t}\n\n\tfunction hasFocus() {\n\t\treturn input.current === input.current?.ownerDocument.activeElement;\n\t}\n\n\tfunction onFocusHandler( event: FocusEvent ) {\n\t\t// If focus is on the input or on the container, set the isActive state to true.\n\t\tif ( hasFocus() || event.target === tokensAndInput.current ) {\n\t\t\tsetIsActive( true );\n\t\t\tsetIsExpanded( __experimentalExpandOnFocus || isExpanded );\n\t\t} else {\n\t\t\t/*\n\t\t\t * Otherwise, focus is on one of the token \"remove\" buttons and we\n\t\t\t * set the isActive state to false to prevent the input to be\n\t\t\t * re-focused, see componentDidUpdate().\n\t\t\t */\n\t\t\tsetIsActive( false );\n\t\t}\n\n\t\tif ( 'function' === typeof onFocus ) {\n\t\t\tonFocus( event );\n\t\t}\n\t}\n\n\tfunction onBlur() {\n\t\tif (\n\t\t\tinputHasValidValue() &&\n\t\t\t__experimentalValidateInput( incompleteTokenValue )\n\t\t) {\n\t\t\tsetIsActive( false );\n\t\t\tif ( tokenizeOnBlur && inputHasValidValue() ) {\n\t\t\t\taddNewToken( incompleteTokenValue );\n\t\t\t}\n\t\t} else {\n\t\t\t// Reset to initial state\n\t\t\tsetIncompleteTokenValue( '' );\n\t\t\tsetInputOffsetFromEnd( 0 );\n\t\t\tsetIsActive( false );\n\t\t\tsetIsExpanded( false );\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onKeyDown( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.key ) {\n\t\t\tcase 'Backspace':\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenBeforeInput );\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tpreventDefault = handleLeftArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\tpreventDefault = handleUpArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowRight':\n\t\t\t\tpreventDefault = handleRightArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tpreventDefault = handleDownArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'Delete':\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenAfterInput );\n\t\t\t\tbreak;\n\t\t\tcase 'Space':\n\t\t\t\tif ( tokenizeOnSpace ) {\n\t\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tpreventDefault = handleEscapeKey( event );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onKeyPress( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\n\t\tswitch ( event.key ) {\n\t\t\tcase ',':\n\t\t\t\tpreventDefault = handleCommaKey();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onContainerTouched( event: MouseEvent | TouchEvent ) {\n\t\t// Prevent clicking/touching the tokensAndInput container from blurring\n\t\t// the input and adding the current token.\n\t\tif ( event.target === tokensAndInput.current && isActive ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onTokenClickRemove( event: { value: string } ) {\n\t\tdeleteToken( event.value );\n\t\tfocus();\n\t}\n\n\tfunction onSuggestionHovered( suggestion: string ) {\n\t\tconst index = getMatchingSuggestions().indexOf( suggestion );\n\n\t\tif ( index >= 0 ) {\n\t\t\tsetSelectedSuggestionIndex( index );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onSuggestionSelected( suggestion: string ) {\n\t\taddNewToken( suggestion );\n\t}\n\n\tfunction onInputChangeHandler( event: { value: string } ) {\n\t\tconst text = event.value;\n\t\tconst separator = tokenizeOnSpace ? /[ ,\\t]+/ : /[,\\t]+/;\n\t\tconst items = text.split( separator );\n\t\tconst tokenValue = items[ items.length - 1 ] || '';\n\n\t\tif ( items.length > 1 ) {\n\t\t\taddNewTokens( items.slice( 0, -1 ) );\n\t\t}\n\t\tsetIncompleteTokenValue( tokenValue );\n\t\tonInputChange( tokenValue );\n\t}\n\n\tfunction handleDeleteKey( _deleteToken: () => void ) {\n\t\tlet preventDefault = false;\n\t\tif ( hasFocus() && isInputEmpty() ) {\n\t\t\t_deleteToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleLeftArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputBeforePreviousToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleRightArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputAfterNextToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleUpArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index === 0\n\t\t\t\t\t? getMatchingSuggestions(\n\t\t\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\t\t\tsuggestions,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\t\t\tsaveTransform\n\t\t\t\t\t ).length\n\t\t\t\t\t: index ) - 1\n\t\t\t);\n\t\t} );\n\t\tsetSelectedSuggestionScroll( true );\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleDownArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index + 1 ) %\n\t\t\t\tgetMatchingSuggestions(\n\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\tsuggestions,\n\t\t\t\t\tvalue,\n\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\tsaveTransform\n\t\t\t\t).length\n\t\t\t);\n\t\t} );\n\n\t\tsetSelectedSuggestionScroll( true );\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleEscapeKey( event: KeyboardEvent ) {\n\t\tif ( event.target instanceof HTMLInputElement ) {\n\t\t\tsetIncompleteTokenValue( event.target.value );\n\t\t\tsetIsExpanded( false );\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleCommaKey() {\n\t\tif ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction moveInputToIndex( index: number ) {\n\t\tsetInputOffsetFromEnd( value.length - Math.max( index, -1 ) - 1 );\n\t}\n\n\tfunction moveInputBeforePreviousToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.min( prevInputOffsetFromEnd + 1, value.length );\n\t\t} );\n\t}\n\n\tfunction moveInputAfterNextToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.max( prevInputOffsetFromEnd - 1, 0 );\n\t\t} );\n\t}\n\n\tfunction deleteTokenBeforeInput() {\n\t\tconst index = getIndexOfInput() - 1;\n\n\t\tif ( index > -1 ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t}\n\t}\n\n\tfunction deleteTokenAfterInput() {\n\t\tconst index = getIndexOfInput();\n\n\t\tif ( index < value.length ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t\t// Update input offset since it's the offset from the last token.\n\t\t\tmoveInputToIndex( index );\n\t\t}\n\t}\n\n\tfunction addCurrentToken() {\n\t\tlet preventDefault = false;\n\t\tconst selectedSuggestion = getSelectedSuggestion();\n\n\t\tif ( selectedSuggestion ) {\n\t\t\taddNewToken( selectedSuggestion );\n\t\t\tpreventDefault = true;\n\t\t} else if ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction addNewTokens( tokens: string[] ) {\n\t\tconst tokensToAdd = [\n\t\t\t...new Set(\n\t\t\t\ttokens\n\t\t\t\t\t.map( saveTransform )\n\t\t\t\t\t.filter( Boolean )\n\t\t\t\t\t.filter( ( token ) => ! valueContainsToken( token ) )\n\t\t\t),\n\t\t];\n\n\t\tif ( tokensToAdd.length > 0 ) {\n\t\t\tconst newValue = [ ...value ];\n\t\t\tnewValue.splice( getIndexOfInput(), 0, ...tokensToAdd );\n\t\t\tonChange( newValue );\n\t\t}\n\t}\n\n\tfunction addNewToken( token: string ) {\n\t\tif ( ! __experimentalValidateInput( token ) ) {\n\t\t\tspeak( messages.__experimentalInvalid, 'assertive' );\n\t\t\treturn;\n\t\t}\n\t\taddNewTokens( [ token ] );\n\t\tspeak( messages.added, 'assertive' );\n\n\t\tsetIncompleteTokenValue( '' );\n\t\tsetSelectedSuggestionIndex( -1 );\n\t\tsetSelectedSuggestionScroll( false );\n\t\tsetIsExpanded( ! __experimentalExpandOnFocus );\n\n\t\tif ( isActive && ! tokenizeOnBlur ) {\n\t\t\tfocus();\n\t\t}\n\t}\n\n\tfunction deleteToken( token: string | TokenItem ) {\n\t\tconst newTokens = value.filter( ( item ) => {\n\t\t\treturn getTokenValue( item ) !== getTokenValue( token );\n\t\t} );\n\t\tonChange( newTokens );\n\t\tspeak( messages.removed, 'assertive' );\n\t}\n\n\tfunction getTokenValue( token: { value: string } | string ) {\n\t\tif ( 'object' === typeof token ) {\n\t\t\treturn token.value;\n\t\t}\n\n\t\treturn token;\n\t}\n\n\tfunction getMatchingSuggestions(\n\t\tsearchValue = incompleteTokenValue,\n\t\t_suggestions = suggestions,\n\t\t_value = value,\n\t\t_maxSuggestions = maxSuggestions,\n\t\t_saveTransform = saveTransform\n\t) {\n\t\tlet match = _saveTransform( searchValue );\n\t\tconst startsWithMatch: string[] = [];\n\t\tconst containsMatch: string[] = [];\n\t\tconst normalizedValue = _value.map( ( item ) => {\n\t\t\tif ( typeof item === 'string' ) {\n\t\t\t\treturn item;\n\t\t\t}\n\t\t\treturn item.value;\n\t\t} );\n\n\t\tif ( match.length === 0 ) {\n\t\t\t_suggestions = _suggestions.filter(\n\t\t\t\t( suggestion ) => ! normalizedValue.includes( suggestion )\n\t\t\t);\n\t\t} else {\n\t\t\tmatch = match.toLocaleLowerCase();\n\n\t\t\t_suggestions.forEach( ( suggestion ) => {\n\t\t\t\tconst index = suggestion.toLocaleLowerCase().indexOf( match );\n\t\t\t\tif ( normalizedValue.indexOf( suggestion ) === -1 ) {\n\t\t\t\t\tif ( index === 0 ) {\n\t\t\t\t\t\tstartsWithMatch.push( suggestion );\n\t\t\t\t\t} else if ( index > 0 ) {\n\t\t\t\t\t\tcontainsMatch.push( suggestion );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t_suggestions = startsWithMatch.concat( containsMatch );\n\t\t}\n\n\t\treturn _suggestions.slice( 0, _maxSuggestions );\n\t}\n\n\tfunction getSelectedSuggestion() {\n\t\tif ( selectedSuggestionIndex !== -1 ) {\n\t\t\treturn getMatchingSuggestions()[ selectedSuggestionIndex ];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction valueContainsToken( token: string ) {\n\t\treturn value.some( ( item ) => {\n\t\t\treturn getTokenValue( token ) === getTokenValue( item );\n\t\t} );\n\t}\n\n\tfunction getIndexOfInput() {\n\t\treturn value.length - inputOffsetFromEnd;\n\t}\n\n\tfunction isInputEmpty() {\n\t\treturn incompleteTokenValue.length === 0;\n\t}\n\n\tfunction inputHasValidValue() {\n\t\treturn saveTransform( incompleteTokenValue ).length > 0;\n\t}\n\n\tfunction updateSuggestions( resetSelectedSuggestion = true ) {\n\t\tconst inputHasMinimumChars = incompleteTokenValue.trim().length > 1;\n\t\tconst matchingSuggestions =\n\t\t\tgetMatchingSuggestions( incompleteTokenValue );\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\n\t\tconst shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;\n\t\tsetIsExpanded(\n\t\t\tshouldExpandIfFocuses ||\n\t\t\t\t( inputHasMinimumChars && hasMatchingSuggestions )\n\t\t);\n\n\t\tif ( resetSelectedSuggestion ) {\n\t\t\tif (\n\t\t\t\t__experimentalAutoSelectFirstMatch &&\n\t\t\t\tinputHasMinimumChars &&\n\t\t\t\thasMatchingSuggestions\n\t\t\t) {\n\t\t\t\tsetSelectedSuggestionIndex( 0 );\n\t\t\t\tsetSelectedSuggestionScroll( true );\n\t\t\t} else {\n\t\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\t\tsetSelectedSuggestionScroll( false );\n\t\t\t}\n\t\t}\n\n\t\tif ( inputHasMinimumChars ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tdebouncedSpeak( message, 'assertive' );\n\t\t}\n\t}\n\n\tfunction renderTokensAndInput() {\n\t\tconst components = value.map( renderToken );\n\t\tcomponents.splice( getIndexOfInput(), 0, renderInput() );\n\n\t\treturn components;\n\t}\n\n\tfunction renderToken(\n\t\ttoken: string | TokenItem,\n\t\tindex: number,\n\t\ttokens: ( string | TokenItem )[]\n\t) {\n\t\tconst _value = getTokenValue( token );\n\t\tconst status = typeof token !== 'string' ? token.status : undefined;\n\t\tconst termPosition = index + 1;\n\t\tconst termsCount = tokens.length;\n\n\t\treturn (\n\t\t\t<FlexItem key={ 'token-' + _value }>\n\t\t\t\t<Token\n\t\t\t\t\tvalue={ _value }\n\t\t\t\t\tstatus={ status }\n\t\t\t\t\ttitle={\n\t\t\t\t\t\ttypeof token !== 'string' ? token.title : undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\tonClickRemove={ onTokenClickRemove }\n\t\t\t\t\tisBorderless={\n\t\t\t\t\t\t( typeof token !== 'string' && token.isBorderless ) ||\n\t\t\t\t\t\tisBorderless\n\t\t\t\t\t}\n\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseEnter\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseLeave\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={ 'error' !== status && disabled }\n\t\t\t\t\tmessages={ messages }\n\t\t\t\t\ttermsCount={ termsCount }\n\t\t\t\t\ttermPosition={ termPosition }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t);\n\t}\n\n\tfunction renderInput() {\n\t\tconst inputProps = {\n\t\t\tinstanceId,\n\t\t\tautoCapitalize,\n\t\t\tautoComplete,\n\t\t\tplaceholder: value.length === 0 ? placeholder : '',\n\t\t\tkey: 'input',\n\t\t\tdisabled,\n\t\t\tvalue: incompleteTokenValue,\n\t\t\tonBlur,\n\t\t\tisExpanded,\n\t\t\tselectedSuggestionIndex,\n\t\t};\n\n\t\treturn (\n\t\t\t<TokenInput\n\t\t\t\t{ ...inputProps }\n\t\t\t\tonChange={\n\t\t\t\t\t! ( maxLength && value.length >= maxLength )\n\t\t\t\t\t\t? onInputChangeHandler\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tref={ input }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst classes = classnames(\n\t\tclassName,\n\t\t'components-form-token-field__input-container',\n\t\t{\n\t\t\t'is-active': isActive,\n\t\t\t'is-disabled': disabled,\n\t\t}\n\t);\n\n\tlet tokenFieldProps = {\n\t\tclassName: 'components-form-token-field',\n\t\ttabIndex: -1,\n\t};\n\tconst matchingSuggestions = getMatchingSuggestions();\n\n\tif ( ! disabled ) {\n\t\ttokenFieldProps = Object.assign( {}, tokenFieldProps, {\n\t\t\tonKeyDown,\n\t\t\tonKeyPress,\n\t\t\tonFocus: onFocusHandler,\n\t\t} );\n\t}\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<div { ...tokenFieldProps }>\n\t\t\t<StyledLabel\n\t\t\t\thtmlFor={ `components-form-token-input-${ instanceId }` }\n\t\t\t\tclassName=\"components-form-token-field__label\"\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</StyledLabel>\n\t\t\t<div\n\t\t\t\tref={ tokensAndInput }\n\t\t\t\tclassName={ classes }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tonMouseDown={ onContainerTouched }\n\t\t\t\tonTouchStart={ onContainerTouched }\n\t\t\t>\n\t\t\t\t<TokensAndInputWrapperFlex\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap={ 1 }\n\t\t\t\t\twrap={ true }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\thasTokens={ !! value.length }\n\t\t\t\t>\n\t\t\t\t\t{ renderTokensAndInput() }\n\t\t\t\t</TokensAndInputWrapperFlex>\n\t\t\t\t{ isExpanded && (\n\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tmatch={ saveTransform( incompleteTokenValue ) }\n\t\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\tselectedIndex={ selectedSuggestionIndex }\n\t\t\t\t\t\tscrollIntoView={ selectedSuggestionScroll }\n\t\t\t\t\t\tonHover={ onSuggestionHovered }\n\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t__experimentalRenderItem={ __experimentalRenderItem }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ ! __nextHasNoMarginBottom && <Spacer marginBottom={ 2 } /> }\n\t\t\t{ __experimentalShowHowTo && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t\t\t\tclassName=\"components-form-token-field__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ tokenizeOnSpace\n\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t'Separate with commas, spaces, or the Enter key.'\n\t\t\t\t\t\t )\n\t\t\t\t\t\t: __( 'Separate with commas or the Enter key.' ) }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</div>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default FormTokenField;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["classnames","useEffect","useRef","useState","__","_n","sprintf","useDebounce","useInstanceId","usePrevious","speak","isShallowEqual","Token","TokenInput","TokensAndInputWrapperFlex","SuggestionsList","FlexItem","StyledHelp","StyledLabel","Spacer","useDeprecated36pxDefaultSizeProp","identity","value","FormTokenField","props","autoCapitalize","autoComplete","maxLength","placeholder","label","className","suggestions","maxSuggestions","displayTransform","saveTransform","token","trim","onChange","onInputChange","onFocus","undefined","isBorderless","disabled","tokenizeOnSpace","messages","added","removed","remove","__experimentalInvalid","__experimentalRenderItem","__experimentalExpandOnFocus","__experimentalValidateInput","__experimentalShowHowTo","__next40pxDefaultSize","__experimentalAutoSelectFirstMatch","__nextHasNoMarginBottom","tokenizeOnBlur","instanceId","incompleteTokenValue","setIncompleteTokenValue","inputOffsetFromEnd","setInputOffsetFromEnd","isActive","setIsActive","isExpanded","setIsExpanded","selectedSuggestionIndex","setSelectedSuggestionIndex","selectedSuggestionScroll","setSelectedSuggestionScroll","prevSuggestions","prevValue","input","tokensAndInput","debouncedSpeak","hasFocus","focus","suggestionsDidUpdate","updateSuggestions","current","ownerDocument","activeElement","onFocusHandler","event","target","onBlur","inputHasValidValue","addNewToken","shouldKeepSuggestionsExpanded","relatedTarget","onKeyDown","preventDefault","defaultPrevented","nativeEvent","isComposing","keyCode","key","handleDeleteKey","deleteTokenBeforeInput","addCurrentToken","handleLeftArrowKey","handleUpArrowKey","handleRightArrowKey","handleDownArrowKey","deleteTokenAfterInput","handleEscapeKey","onKeyPress","handleCommaKey","onContainerTouched","onTokenClickRemove","deleteToken","onSuggestionHovered","suggestion","index","getMatchingSuggestions","indexOf","onSuggestionSelected","onInputChangeHandler","text","separator","items","split","tokenValue","length","addNewTokens","slice","_deleteToken","isInputEmpty","moveInputBeforePreviousToken","moveInputAfterNextToken","HTMLInputElement","moveInputToIndex","Math","max","prevInputOffsetFromEnd","min","getIndexOfInput","selectedSuggestion","getSelectedSuggestion","tokens","tokensToAdd","Set","map","filter","Boolean","valueContainsToken","newValue","splice","newTokens","item","getTokenValue","searchValue","_suggestions","_value","_maxSuggestions","_saveTransform","match","startsWithMatch","containsMatch","normalizedValue","includes","toLocaleLowerCase","forEach","push","concat","some","resetSelectedSuggestion","inputHasMinimumChars","matchingSuggestions","hasMatchingSuggestions","shouldExpandIfFocuses","message","renderTokensAndInput","components","renderToken","renderInput","status","termPosition","termsCount","createElement","title","onClickRemove","onMouseEnter","onMouseLeave","inputProps","ref","classes","tokenFieldProps","tabIndex","Object","assign","htmlFor","onMouseDown","onTouchStart","justify","align","gap","wrap","hasTokens","selectedIndex","scrollIntoView","onHover","onSelect","marginBottom","id"],"sources":["@wordpress/components/src/form-token-field/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { KeyboardEvent, MouseEvent, TouchEvent, FocusEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport Token from './token';\nimport TokenInput from './token-input';\nimport { TokensAndInputWrapperFlex } from './styles';\nimport SuggestionsList from './suggestions-list';\nimport type { FormTokenFieldProps, TokenItem } from './types';\nimport { FlexItem } from '../flex';\nimport {\n\tStyledHelp,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport { Spacer } from '../spacer';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst identity = ( value: string ) => value;\n\n/**\n * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,\n * or the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.\n *\n * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).\n * Tokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.\n *\n * The `value` property is handled in a manner similar to controlled form components.\n * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.\n */\nexport function FormTokenField( props: FormTokenFieldProps ) {\n\tconst {\n\t\tautoCapitalize,\n\t\tautoComplete,\n\t\tmaxLength,\n\t\tplaceholder,\n\t\tlabel = __( 'Add item' ),\n\t\tclassName,\n\t\tsuggestions = [],\n\t\tmaxSuggestions = 100,\n\t\tvalue = [],\n\t\tdisplayTransform = identity,\n\t\tsaveTransform = ( token ) => token.trim(),\n\t\tonChange = () => {},\n\t\tonInputChange = () => {},\n\t\tonFocus = undefined,\n\t\tisBorderless = false,\n\t\tdisabled = false,\n\t\ttokenizeOnSpace = false,\n\t\tmessages = {\n\t\t\tadded: __( 'Item added.' ),\n\t\t\tremoved: __( 'Item removed.' ),\n\t\t\tremove: __( 'Remove item' ),\n\t\t\t__experimentalInvalid: __( 'Invalid item' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t\t__experimentalExpandOnFocus = false,\n\t\t__experimentalValidateInput = () => true,\n\t\t__experimentalShowHowTo = true,\n\t\t__next40pxDefaultSize = false,\n\t\t__experimentalAutoSelectFirstMatch = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\ttokenizeOnBlur = false,\n\t} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(\n\t\tprops,\n\t\t'wp.components.FormTokenField'\n\t);\n\n\tconst instanceId = useInstanceId( FormTokenField );\n\n\t// We reset to these initial values again in the onBlur\n\tconst [ incompleteTokenValue, setIncompleteTokenValue ] = useState( '' );\n\tconst [ inputOffsetFromEnd, setInputOffsetFromEnd ] = useState( 0 );\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ selectedSuggestionIndex, setSelectedSuggestionIndex ] =\n\t\tuseState( -1 );\n\tconst [ selectedSuggestionScroll, setSelectedSuggestionScroll ] =\n\t\tuseState( false );\n\n\tconst prevSuggestions = usePrevious< string[] >( suggestions );\n\tconst prevValue = usePrevious< ( string | TokenItem )[] >( value );\n\n\tconst input = useRef< HTMLInputElement >( null );\n\tconst tokensAndInput = useRef< HTMLInputElement >( null );\n\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\tuseEffect( () => {\n\t\t// Make sure to focus the input when the isActive state is true.\n\t\tif ( isActive && ! hasFocus() ) {\n\t\t\tfocus();\n\t\t}\n\t}, [ isActive ] );\n\n\tuseEffect( () => {\n\t\tconst suggestionsDidUpdate = ! isShallowEqual(\n\t\t\tsuggestions,\n\t\t\tprevSuggestions || []\n\t\t);\n\n\t\tif ( suggestionsDidUpdate || value !== prevValue ) {\n\t\t\tupdateSuggestions( suggestionsDidUpdate );\n\t\t}\n\n\t\t// TODO: updateSuggestions() should first be refactored so its actual deps are clearer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ suggestions, prevSuggestions, value, prevValue ] );\n\n\tuseEffect( () => {\n\t\tupdateSuggestions();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ incompleteTokenValue ] );\n\n\tuseEffect( () => {\n\t\tupdateSuggestions();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ __experimentalAutoSelectFirstMatch ] );\n\n\tif ( disabled && isActive ) {\n\t\tsetIsActive( false );\n\t\tsetIncompleteTokenValue( '' );\n\t}\n\n\tfunction focus() {\n\t\tinput.current?.focus();\n\t}\n\n\tfunction hasFocus() {\n\t\treturn input.current === input.current?.ownerDocument.activeElement;\n\t}\n\n\tfunction onFocusHandler( event: FocusEvent ) {\n\t\t// If focus is on the input or on the container, set the isActive state to true.\n\t\tif ( hasFocus() || event.target === tokensAndInput.current ) {\n\t\t\tsetIsActive( true );\n\t\t\tsetIsExpanded( __experimentalExpandOnFocus || isExpanded );\n\t\t} else {\n\t\t\t/*\n\t\t\t * Otherwise, focus is on one of the token \"remove\" buttons and we\n\t\t\t * set the isActive state to false to prevent the input to be\n\t\t\t * re-focused, see componentDidUpdate().\n\t\t\t */\n\t\t\tsetIsActive( false );\n\t\t}\n\n\t\tif ( 'function' === typeof onFocus ) {\n\t\t\tonFocus( event );\n\t\t}\n\t}\n\n\tfunction onBlur( event: FocusEvent ) {\n\t\tif (\n\t\t\tinputHasValidValue() &&\n\t\t\t__experimentalValidateInput( incompleteTokenValue )\n\t\t) {\n\t\t\tsetIsActive( false );\n\t\t\tif ( tokenizeOnBlur && inputHasValidValue() ) {\n\t\t\t\taddNewToken( incompleteTokenValue );\n\t\t\t}\n\t\t} else {\n\t\t\t// Reset to initial state\n\t\t\tsetIncompleteTokenValue( '' );\n\t\t\tsetInputOffsetFromEnd( 0 );\n\t\t\tsetIsActive( false );\n\n\t\t\t// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when\n\t\t\t// the user clicks on it (`tokensAndInput` will be the element that caused the blur).\n\t\t\tconst shouldKeepSuggestionsExpanded =\n\t\t\t\t! __experimentalExpandOnFocus ||\n\t\t\t\t( __experimentalExpandOnFocus &&\n\t\t\t\t\tevent.relatedTarget === tokensAndInput.current );\n\t\t\tsetIsExpanded( shouldKeepSuggestionsExpanded );\n\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onKeyDown( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.key ) {\n\t\t\tcase 'Backspace':\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenBeforeInput );\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tpreventDefault = handleLeftArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\tpreventDefault = handleUpArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowRight':\n\t\t\t\tpreventDefault = handleRightArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tpreventDefault = handleDownArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'Delete':\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenAfterInput );\n\t\t\t\tbreak;\n\t\t\tcase 'Space':\n\t\t\t\tif ( tokenizeOnSpace ) {\n\t\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tpreventDefault = handleEscapeKey( event );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onKeyPress( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\n\t\tswitch ( event.key ) {\n\t\t\tcase ',':\n\t\t\t\tpreventDefault = handleCommaKey();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onContainerTouched( event: MouseEvent | TouchEvent ) {\n\t\t// Prevent clicking/touching the tokensAndInput container from blurring\n\t\t// the input and adding the current token.\n\t\tif ( event.target === tokensAndInput.current && isActive ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onTokenClickRemove( event: { value: string } ) {\n\t\tdeleteToken( event.value );\n\t\tfocus();\n\t}\n\n\tfunction onSuggestionHovered( suggestion: string ) {\n\t\tconst index = getMatchingSuggestions().indexOf( suggestion );\n\n\t\tif ( index >= 0 ) {\n\t\t\tsetSelectedSuggestionIndex( index );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onSuggestionSelected( suggestion: string ) {\n\t\taddNewToken( suggestion );\n\t}\n\n\tfunction onInputChangeHandler( event: { value: string } ) {\n\t\tconst text = event.value;\n\t\tconst separator = tokenizeOnSpace ? /[ ,\\t]+/ : /[,\\t]+/;\n\t\tconst items = text.split( separator );\n\t\tconst tokenValue = items[ items.length - 1 ] || '';\n\n\t\tif ( items.length > 1 ) {\n\t\t\taddNewTokens( items.slice( 0, -1 ) );\n\t\t}\n\t\tsetIncompleteTokenValue( tokenValue );\n\t\tonInputChange( tokenValue );\n\t}\n\n\tfunction handleDeleteKey( _deleteToken: () => void ) {\n\t\tlet preventDefault = false;\n\t\tif ( hasFocus() && isInputEmpty() ) {\n\t\t\t_deleteToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleLeftArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputBeforePreviousToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleRightArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputAfterNextToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleUpArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index === 0\n\t\t\t\t\t? getMatchingSuggestions(\n\t\t\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\t\t\tsuggestions,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\t\t\tsaveTransform\n\t\t\t\t\t ).length\n\t\t\t\t\t: index ) - 1\n\t\t\t);\n\t\t} );\n\t\tsetSelectedSuggestionScroll( true );\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleDownArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index + 1 ) %\n\t\t\t\tgetMatchingSuggestions(\n\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\tsuggestions,\n\t\t\t\t\tvalue,\n\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\tsaveTransform\n\t\t\t\t).length\n\t\t\t);\n\t\t} );\n\n\t\tsetSelectedSuggestionScroll( true );\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleEscapeKey( event: KeyboardEvent ) {\n\t\tif ( event.target instanceof HTMLInputElement ) {\n\t\t\tsetIncompleteTokenValue( event.target.value );\n\t\t\tsetIsExpanded( false );\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleCommaKey() {\n\t\tif ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction moveInputToIndex( index: number ) {\n\t\tsetInputOffsetFromEnd( value.length - Math.max( index, -1 ) - 1 );\n\t}\n\n\tfunction moveInputBeforePreviousToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.min( prevInputOffsetFromEnd + 1, value.length );\n\t\t} );\n\t}\n\n\tfunction moveInputAfterNextToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.max( prevInputOffsetFromEnd - 1, 0 );\n\t\t} );\n\t}\n\n\tfunction deleteTokenBeforeInput() {\n\t\tconst index = getIndexOfInput() - 1;\n\n\t\tif ( index > -1 ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t}\n\t}\n\n\tfunction deleteTokenAfterInput() {\n\t\tconst index = getIndexOfInput();\n\n\t\tif ( index < value.length ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t\t// Update input offset since it's the offset from the last token.\n\t\t\tmoveInputToIndex( index );\n\t\t}\n\t}\n\n\tfunction addCurrentToken() {\n\t\tlet preventDefault = false;\n\t\tconst selectedSuggestion = getSelectedSuggestion();\n\n\t\tif ( selectedSuggestion ) {\n\t\t\taddNewToken( selectedSuggestion );\n\t\t\tpreventDefault = true;\n\t\t} else if ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction addNewTokens( tokens: string[] ) {\n\t\tconst tokensToAdd = [\n\t\t\t...new Set(\n\t\t\t\ttokens\n\t\t\t\t\t.map( saveTransform )\n\t\t\t\t\t.filter( Boolean )\n\t\t\t\t\t.filter( ( token ) => ! valueContainsToken( token ) )\n\t\t\t),\n\t\t];\n\n\t\tif ( tokensToAdd.length > 0 ) {\n\t\t\tconst newValue = [ ...value ];\n\t\t\tnewValue.splice( getIndexOfInput(), 0, ...tokensToAdd );\n\t\t\tonChange( newValue );\n\t\t}\n\t}\n\n\tfunction addNewToken( token: string ) {\n\t\tif ( ! __experimentalValidateInput( token ) ) {\n\t\t\tspeak( messages.__experimentalInvalid, 'assertive' );\n\t\t\treturn;\n\t\t}\n\t\taddNewTokens( [ token ] );\n\t\tspeak( messages.added, 'assertive' );\n\n\t\tsetIncompleteTokenValue( '' );\n\t\tsetSelectedSuggestionIndex( -1 );\n\t\tsetSelectedSuggestionScroll( false );\n\t\tsetIsExpanded( ! __experimentalExpandOnFocus );\n\n\t\tif ( isActive && ! tokenizeOnBlur ) {\n\t\t\tfocus();\n\t\t}\n\t}\n\n\tfunction deleteToken( token: string | TokenItem ) {\n\t\tconst newTokens = value.filter( ( item ) => {\n\t\t\treturn getTokenValue( item ) !== getTokenValue( token );\n\t\t} );\n\t\tonChange( newTokens );\n\t\tspeak( messages.removed, 'assertive' );\n\t}\n\n\tfunction getTokenValue( token: { value: string } | string ) {\n\t\tif ( 'object' === typeof token ) {\n\t\t\treturn token.value;\n\t\t}\n\n\t\treturn token;\n\t}\n\n\tfunction getMatchingSuggestions(\n\t\tsearchValue = incompleteTokenValue,\n\t\t_suggestions = suggestions,\n\t\t_value = value,\n\t\t_maxSuggestions = maxSuggestions,\n\t\t_saveTransform = saveTransform\n\t) {\n\t\tlet match = _saveTransform( searchValue );\n\t\tconst startsWithMatch: string[] = [];\n\t\tconst containsMatch: string[] = [];\n\t\tconst normalizedValue = _value.map( ( item ) => {\n\t\t\tif ( typeof item === 'string' ) {\n\t\t\t\treturn item;\n\t\t\t}\n\t\t\treturn item.value;\n\t\t} );\n\n\t\tif ( match.length === 0 ) {\n\t\t\t_suggestions = _suggestions.filter(\n\t\t\t\t( suggestion ) => ! normalizedValue.includes( suggestion )\n\t\t\t);\n\t\t} else {\n\t\t\tmatch = match.toLocaleLowerCase();\n\n\t\t\t_suggestions.forEach( ( suggestion ) => {\n\t\t\t\tconst index = suggestion.toLocaleLowerCase().indexOf( match );\n\t\t\t\tif ( normalizedValue.indexOf( suggestion ) === -1 ) {\n\t\t\t\t\tif ( index === 0 ) {\n\t\t\t\t\t\tstartsWithMatch.push( suggestion );\n\t\t\t\t\t} else if ( index > 0 ) {\n\t\t\t\t\t\tcontainsMatch.push( suggestion );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t_suggestions = startsWithMatch.concat( containsMatch );\n\t\t}\n\n\t\treturn _suggestions.slice( 0, _maxSuggestions );\n\t}\n\n\tfunction getSelectedSuggestion() {\n\t\tif ( selectedSuggestionIndex !== -1 ) {\n\t\t\treturn getMatchingSuggestions()[ selectedSuggestionIndex ];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction valueContainsToken( token: string ) {\n\t\treturn value.some( ( item ) => {\n\t\t\treturn getTokenValue( token ) === getTokenValue( item );\n\t\t} );\n\t}\n\n\tfunction getIndexOfInput() {\n\t\treturn value.length - inputOffsetFromEnd;\n\t}\n\n\tfunction isInputEmpty() {\n\t\treturn incompleteTokenValue.length === 0;\n\t}\n\n\tfunction inputHasValidValue() {\n\t\treturn saveTransform( incompleteTokenValue ).length > 0;\n\t}\n\n\tfunction updateSuggestions( resetSelectedSuggestion = true ) {\n\t\tconst inputHasMinimumChars = incompleteTokenValue.trim().length > 1;\n\t\tconst matchingSuggestions =\n\t\t\tgetMatchingSuggestions( incompleteTokenValue );\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\n\t\tconst shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;\n\t\tsetIsExpanded(\n\t\t\tshouldExpandIfFocuses ||\n\t\t\t\t( inputHasMinimumChars && hasMatchingSuggestions )\n\t\t);\n\n\t\tif ( resetSelectedSuggestion ) {\n\t\t\tif (\n\t\t\t\t__experimentalAutoSelectFirstMatch &&\n\t\t\t\tinputHasMinimumChars &&\n\t\t\t\thasMatchingSuggestions\n\t\t\t) {\n\t\t\t\tsetSelectedSuggestionIndex( 0 );\n\t\t\t\tsetSelectedSuggestionScroll( true );\n\t\t\t} else {\n\t\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\t\tsetSelectedSuggestionScroll( false );\n\t\t\t}\n\t\t}\n\n\t\tif ( inputHasMinimumChars ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tdebouncedSpeak( message, 'assertive' );\n\t\t}\n\t}\n\n\tfunction renderTokensAndInput() {\n\t\tconst components = value.map( renderToken );\n\t\tcomponents.splice( getIndexOfInput(), 0, renderInput() );\n\n\t\treturn components;\n\t}\n\n\tfunction renderToken(\n\t\ttoken: string | TokenItem,\n\t\tindex: number,\n\t\ttokens: ( string | TokenItem )[]\n\t) {\n\t\tconst _value = getTokenValue( token );\n\t\tconst status = typeof token !== 'string' ? token.status : undefined;\n\t\tconst termPosition = index + 1;\n\t\tconst termsCount = tokens.length;\n\n\t\treturn (\n\t\t\t<FlexItem key={ 'token-' + _value }>\n\t\t\t\t<Token\n\t\t\t\t\tvalue={ _value }\n\t\t\t\t\tstatus={ status }\n\t\t\t\t\ttitle={\n\t\t\t\t\t\ttypeof token !== 'string' ? token.title : undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\tonClickRemove={ onTokenClickRemove }\n\t\t\t\t\tisBorderless={\n\t\t\t\t\t\t( typeof token !== 'string' && token.isBorderless ) ||\n\t\t\t\t\t\tisBorderless\n\t\t\t\t\t}\n\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseEnter\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseLeave\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={ 'error' !== status && disabled }\n\t\t\t\t\tmessages={ messages }\n\t\t\t\t\ttermsCount={ termsCount }\n\t\t\t\t\ttermPosition={ termPosition }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t);\n\t}\n\n\tfunction renderInput() {\n\t\tconst inputProps = {\n\t\t\tinstanceId,\n\t\t\tautoCapitalize,\n\t\t\tautoComplete,\n\t\t\tplaceholder: value.length === 0 ? placeholder : '',\n\t\t\tkey: 'input',\n\t\t\tdisabled,\n\t\t\tvalue: incompleteTokenValue,\n\t\t\tonBlur,\n\t\t\tisExpanded,\n\t\t\tselectedSuggestionIndex,\n\t\t};\n\n\t\treturn (\n\t\t\t<TokenInput\n\t\t\t\t{ ...inputProps }\n\t\t\t\tonChange={\n\t\t\t\t\t! ( maxLength && value.length >= maxLength )\n\t\t\t\t\t\t? onInputChangeHandler\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tref={ input }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst classes = classnames(\n\t\tclassName,\n\t\t'components-form-token-field__input-container',\n\t\t{\n\t\t\t'is-active': isActive,\n\t\t\t'is-disabled': disabled,\n\t\t}\n\t);\n\n\tlet tokenFieldProps = {\n\t\tclassName: 'components-form-token-field',\n\t\ttabIndex: -1,\n\t};\n\tconst matchingSuggestions = getMatchingSuggestions();\n\n\tif ( ! disabled ) {\n\t\ttokenFieldProps = Object.assign( {}, tokenFieldProps, {\n\t\t\tonKeyDown,\n\t\t\tonKeyPress,\n\t\t\tonFocus: onFocusHandler,\n\t\t} );\n\t}\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<div { ...tokenFieldProps }>\n\t\t\t<StyledLabel\n\t\t\t\thtmlFor={ `components-form-token-input-${ instanceId }` }\n\t\t\t\tclassName=\"components-form-token-field__label\"\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</StyledLabel>\n\t\t\t<div\n\t\t\t\tref={ tokensAndInput }\n\t\t\t\tclassName={ classes }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tonMouseDown={ onContainerTouched }\n\t\t\t\tonTouchStart={ onContainerTouched }\n\t\t\t>\n\t\t\t\t<TokensAndInputWrapperFlex\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap={ 1 }\n\t\t\t\t\twrap={ true }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\thasTokens={ !! value.length }\n\t\t\t\t>\n\t\t\t\t\t{ renderTokensAndInput() }\n\t\t\t\t</TokensAndInputWrapperFlex>\n\t\t\t\t{ isExpanded && (\n\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tmatch={ saveTransform( incompleteTokenValue ) }\n\t\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\tselectedIndex={ selectedSuggestionIndex }\n\t\t\t\t\t\tscrollIntoView={ selectedSuggestionScroll }\n\t\t\t\t\t\tonHover={ onSuggestionHovered }\n\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t__experimentalRenderItem={ __experimentalRenderItem }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ ! __nextHasNoMarginBottom && <Spacer marginBottom={ 2 } /> }\n\t\t\t{ __experimentalShowHowTo && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t\t\t\tclassName=\"components-form-token-field__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ tokenizeOnSpace\n\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t'Separate with commas, spaces, or the Enter key.'\n\t\t\t\t\t\t )\n\t\t\t\t\t\t: __( 'Separate with commas or the Enter key.' ) }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</div>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default FormTokenField;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","forwardRef","useState","UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","onFocus","onBlur","restProps","hasFocus","setHasFocus","size","length","onChangeHandler","event","target","onFocusHandler","e","onBlurHandler","createElement","id","type","autoComplete","role","undefined","TokenInput"],"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\tonFocus,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [ hasFocus, setHasFocus ] = useState( false );\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( true );\n\t\tonFocus?.( e );\n\t};\n\n\tconst onBlurHandler:
|
|
1
|
+
{"version":3,"names":["classnames","forwardRef","useState","UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","onFocus","onBlur","restProps","hasFocus","setHasFocus","size","length","onChangeHandler","event","target","onFocusHandler","e","onBlurHandler","createElement","id","type","autoComplete","role","undefined","TokenInput"],"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\tonFocus,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [ hasFocus, setHasFocus ] = useState( false );\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( true );\n\t\tonFocus?.( e );\n\t};\n\n\tconst onBlurHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( false );\n\t\tonBlur?.( e );\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tref={ ref }\n\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\ttype=\"text\"\n\t\t\t{ ...restProps }\n\t\t\tvalue={ value || '' }\n\t\t\tonChange={ onChangeHandler }\n\t\t\tonFocus={ onFocusHandler }\n\t\t\tonBlur={ onBlurHandler }\n\t\t\tsize={ size }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-form-token-field__input'\n\t\t\t) }\n\t\t\tautoComplete=\"off\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={ isExpanded }\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-owns={\n\t\t\t\tisExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-activedescendant={\n\t\t\t\t// Only add the `aria-activedescendant` attribute when:\n\t\t\t\t// - the user is actively interacting with the input (`hasFocus`)\n\t\t\t\t// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n\t\t\t\t// - the list of suggestions are rendered in the DOM (`isExpanded`)\n\t\t\t\thasFocus && selectedSuggestionIndex !== -1 && isExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t/>\n\t);\n}\n\nexport const TokenInput = forwardRef( UnForwardedTokenInput );\n\nexport default TokenInput;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AAGnC;AACA;AACA;AACA,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEzD;AACA;AACA;;AAIA,OAAO,SAASC,qBAAqBA,CACpCC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,KAAK;IACLC,UAAU;IACVC,UAAU;IACVC,uBAAuB;IACvBC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGV,KAAK;EAET,MAAM,CAAEW,QAAQ,EAAEC,WAAW,CAAE,GAAGd,QAAQ,CAAE,KAAM,CAAC;EAEnD,MAAMe,IAAI,GAAGX,KAAK,GAAGA,KAAK,CAACY,MAAM,GAAG,CAAC,GAAG,CAAC;EAEzC,MAAMC,eAAe,GAAKC,KAAsC,IAAM;IACrE,IAAKT,QAAQ,EAAG;MACfA,QAAQ,CAAE;QACTL,KAAK,EAAEc,KAAK,CAACC,MAAM,CAACf;MACrB,CAAE,CAAC;IACJ;EACD,CAAC;EAED,MAAMgB,cAAqD,GAAKC,CAAC,IAAM;IACtEP,WAAW,CAAE,IAAK,CAAC;IACnBJ,OAAO,GAAIW,CAAE,CAAC;EACf,CAAC;EAED,MAAMC,aAAoD,GAAKD,CAAC,IAAM;IACrEP,WAAW,CAAE,KAAM,CAAC;IACpBH,MAAM,GAAIU,CAAE,CAAC;EACd,CAAC;EAED,OACCE,aAAA;IACCpB,GAAG,EAAGA,GAAK;IACXqB,EAAE,EAAI,+BAA+BlB,UAAY,EAAG;IACpDmB,IAAI,EAAC,MAAM;IAAA,GACNb,SAAS;IACdR,KAAK,EAAGA,KAAK,IAAI,EAAI;IACrBK,QAAQ,EAAGQ,eAAiB;IAC5BP,OAAO,EAAGU,cAAgB;IAC1BT,MAAM,EAAGW,aAAe;IACxBP,IAAI,EAAGA,IAAM;IACbP,SAAS,EAAGV,UAAU,CACrBU,SAAS,EACT,oCACD,CAAG;IACHkB,YAAY,EAAC,KAAK;IAClBC,IAAI,EAAC,UAAU;IACf,iBAAgBtB,UAAY;IAC5B,qBAAkB,MAAM;IACxB,aACCA,UAAU,GACN,qCAAqCC,UAAY,EAAC,GACnDsB,SACH;IACD;IACC;IACA;IACA;IACA;IACAf,QAAQ,IAAIN,uBAAuB,KAAK,CAAC,CAAC,IAAIF,UAAU,GACpD,qCAAqCC,UAAY,IAAIC,uBAAyB,EAAC,GAChFqB,SACH;IACD,oBAAoB,2CAA2CtB,UAAY;EAAG,CAC9E,CAAC;AAEJ;AAEA,OAAO,MAAMuB,UAAU,GAAG9B,UAAU,CAAEE,qBAAsB,CAAC;AAE7D,eAAe4B,UAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["@wordpress/components/src/form-token-field/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tComponentPropsWithRef,\n\tMouseEventHandler,\n\tReactNode,\n} from 'react';\n\ntype Messages = {\n\t/**\n\t * The user added a new token.\n\t */\n\tadded: string;\n\t/**\n\t * The user removed an existing token.\n\t */\n\tremoved: string;\n\t/**\n\t * The user focused the button to remove the token.\n\t */\n\tremove: string;\n\t/**\n\t * The user tried to add a token that didn't pass the validation.\n\t */\n\t__experimentalInvalid: string;\n};\n\nexport interface TokenItem {\n\t/**\n\t * The value of the token.\n\t */\n\tvalue: string;\n\t/**\n\t * One of 'error', 'validating', or 'success'. Applies styles to token.\n\t */\n\tstatus?: 'error' | 'success' | 'validating';\n\t/**\n\t * If not falsey, will add a title to the token.\n\t */\n\ttitle?: string;\n\t/**\n\t * When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * Function to call when onMouseEnter event triggered on token.\n\t */\n\tonMouseEnter?: MouseEventHandler< HTMLSpanElement >;\n\t/**\n\t * Function to call when onMouseLeave is triggered on token.\n\t */\n\tonMouseLeave?: MouseEventHandler< HTMLSpanElement >;\n}\n\nexport interface FormTokenFieldProps\n\textends Pick<\n\t\tComponentPropsWithRef< 'input' >,\n\t\t'autoCapitalize' | 'autoComplete' | 'className'\n\t> {\n\tlabel?: string;\n\t/**\n\t * An array of strings to present to the user as suggested tokens.\n\t */\n\tsuggestions?: string[];\n\t/**\n\t * The maximum number of suggestions to display at a time.\n\t *\n\t * @default 100\n\t */\n\tmaxSuggestions?: number;\n\t/**\n\t * An array of strings or objects to display as tokens in the field.\n\t * If objects are present in the array, they **must** have a property of `value`.\n\t */\n\tvalue?: ( string | TokenItem )[];\n\t/**\n\t * Function to call to transform tokens for display.\n\t * (In the editor, this is needed to decode HTML entities embedded in tags\n\t * - otherwise entities like `&` in tag names are double-encoded like `&`,\n\t * once by the REST API and once by React).\n\t */\n\tdisplayTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call to transform tokens for saving. The default is to trim the token value.\n\t * This function is also applied when matching suggestions against the current value\n\t * so that matching works correctly with leading or trailing spaces. (In the editor,\n\t * this is needed to remove leading and trailing spaces from tag names, like wp-admin does.\n\t * Otherwise the REST API won't save them.)\n\t *\n\t * @default ( token: string ) => token.trim()\n\t */\n\tsaveTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call when the tokens have changed. An array of new tokens is passed to the callback.\n\t *\n\t */\n\tonChange?: ( tokens: ( string | TokenItem )[] ) => void;\n\t/**\n\t * Function to call when the users types in the input field. It can be used to trigger autocomplete requests.\n\t *\n\t */\n\tonInputChange?: ( input: string ) => void;\n\t/**\n\t * Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics.\n\t *\n\t */\n\tonFocus?: ( event: FocusEvent ) => void;\n\t/**\n\t * When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * If passed, `TokenField` will disable ability to add new tokens once number of tokens is greater than or equal to `maxLength`.\n\t */\n\tmaxLength?: number;\n\t/**\n\t * When true, tokens are not able to be added or removed.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * If passed, the `TokenField` input will show a placeholder string if no value tokens are present.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * If true, will add a token when `TokenField` is focused and `space` is pressed.\n\t */\n\ttokenizeOnSpace?: boolean;\n\t/**\n\t * Allows customizing the messages presented by screen readers in different occasions:\n\t *\n\t * - `added`: The user added a new token.\n\t * - `removed`: The user removed an existing token.\n\t * - `remove` : The user focused the button to remove the token.\n\t * - `__experimentalInvalid`: The user tried to add a token that didn't pass the validation.\n\t */\n\tmessages?: Messages;\n\t/**\n\t * If true, the suggestions list will be always expanded when the input field has the focus.\n\t */\n\t__experimentalExpandOnFocus?: boolean;\n\t/**\n\t * If passed, all introduced values will be validated before being added as tokens.\n\t *\n\t * @default () => true\n\t */\n\t__experimentalValidateInput?: ( token: string ) => boolean;\n\t/**\n\t * If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.\n\t *\n\t * @default true\n\t */\n\t__experimentalShowHowTo?: boolean;\n\t/**\n\t * Deprecated. Use `__next40pxDefaultSize` instead.\n\t *\n\t * @default false\n\t * @deprecated\n\t */\n\t__next36pxDefaultSize?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * If true, the select the first matching suggestion when the user presses\n\t * the Enter key (or space when tokenizeOnSpace is true).\n\t *\n\t * @default false\n\t */\n\t__experimentalAutoSelectFirstMatch?: boolean;\n\t/**\n\t * Custom renderer for suggestions.\n\t */\n\t__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default in a future version.\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * If true, add any incompleteTokenValue as a new token when the field loses focus.\n\t *\n\t * @default false\n\t */\n\ttokenizeOnBlur?: boolean;\n}\n\n/**\n * `T` can be either a `string` or an object which must have a `value` prop as a string.\n */\nexport interface SuggestionsListProps<\n\tT = string | ( Record< string, unknown > & { value: string } ),\n> {\n\tselectedIndex: number;\n\tscrollIntoView: boolean;\n\tmatch: T;\n\tonHover: ( suggestion: T ) => void;\n\tonSelect: ( suggestion: T ) => void;\n\tsuggestions: T[];\n\tdisplayTransform: ( value: T ) => string;\n\tinstanceId: string | number;\n\t__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;\n}\n\nexport interface TokenProps extends TokenItem {\n\tdisplayTransform: ( value: string ) => string;\n\tdisabled: boolean;\n\tonClickRemove: ( { value }: { value: string } ) => void;\n\tmessages: Messages;\n\ttermPosition: number;\n\ttermsCount: number;\n}\n\nexport interface TokenInputProps {\n\tisExpanded: boolean;\n\tinstanceId: string | number;\n\tselectedSuggestionIndex: number;\n\tonChange?: ( { value }: { value: string } ) => void;\n\tvalue: string;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["@wordpress/components/src/form-token-field/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tComponentPropsWithRef,\n\tMouseEventHandler,\n\tReactNode,\n\tFocusEvent,\n} from 'react';\n\ntype Messages = {\n\t/**\n\t * The user added a new token.\n\t */\n\tadded: string;\n\t/**\n\t * The user removed an existing token.\n\t */\n\tremoved: string;\n\t/**\n\t * The user focused the button to remove the token.\n\t */\n\tremove: string;\n\t/**\n\t * The user tried to add a token that didn't pass the validation.\n\t */\n\t__experimentalInvalid: string;\n};\n\nexport interface TokenItem {\n\t/**\n\t * The value of the token.\n\t */\n\tvalue: string;\n\t/**\n\t * One of 'error', 'validating', or 'success'. Applies styles to token.\n\t */\n\tstatus?: 'error' | 'success' | 'validating';\n\t/**\n\t * If not falsey, will add a title to the token.\n\t */\n\ttitle?: string;\n\t/**\n\t * When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * Function to call when onMouseEnter event triggered on token.\n\t */\n\tonMouseEnter?: MouseEventHandler< HTMLSpanElement >;\n\t/**\n\t * Function to call when onMouseLeave is triggered on token.\n\t */\n\tonMouseLeave?: MouseEventHandler< HTMLSpanElement >;\n}\n\nexport interface FormTokenFieldProps\n\textends Pick<\n\t\tComponentPropsWithRef< 'input' >,\n\t\t'autoCapitalize' | 'autoComplete' | 'className'\n\t> {\n\tlabel?: string;\n\t/**\n\t * An array of strings to present to the user as suggested tokens.\n\t */\n\tsuggestions?: string[];\n\t/**\n\t * The maximum number of suggestions to display at a time.\n\t *\n\t * @default 100\n\t */\n\tmaxSuggestions?: number;\n\t/**\n\t * An array of strings or objects to display as tokens in the field.\n\t * If objects are present in the array, they **must** have a property of `value`.\n\t */\n\tvalue?: ( string | TokenItem )[];\n\t/**\n\t * Function to call to transform tokens for display.\n\t * (In the editor, this is needed to decode HTML entities embedded in tags\n\t * - otherwise entities like `&` in tag names are double-encoded like `&`,\n\t * once by the REST API and once by React).\n\t */\n\tdisplayTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call to transform tokens for saving. The default is to trim the token value.\n\t * This function is also applied when matching suggestions against the current value\n\t * so that matching works correctly with leading or trailing spaces. (In the editor,\n\t * this is needed to remove leading and trailing spaces from tag names, like wp-admin does.\n\t * Otherwise the REST API won't save them.)\n\t *\n\t * @default ( token: string ) => token.trim()\n\t */\n\tsaveTransform?: ( token: string ) => string;\n\t/**\n\t * Function to call when the tokens have changed. An array of new tokens is passed to the callback.\n\t *\n\t */\n\tonChange?: ( tokens: ( string | TokenItem )[] ) => void;\n\t/**\n\t * Function to call when the users types in the input field. It can be used to trigger autocomplete requests.\n\t *\n\t */\n\tonInputChange?: ( input: string ) => void;\n\t/**\n\t * Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics.\n\t *\n\t */\n\tonFocus?: ( event: FocusEvent ) => void;\n\t/**\n\t * When true, renders tokens as without a background.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * If passed, `TokenField` will disable ability to add new tokens once number of tokens is greater than or equal to `maxLength`.\n\t */\n\tmaxLength?: number;\n\t/**\n\t * When true, tokens are not able to be added or removed.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * If passed, the `TokenField` input will show a placeholder string if no value tokens are present.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * If true, will add a token when `TokenField` is focused and `space` is pressed.\n\t */\n\ttokenizeOnSpace?: boolean;\n\t/**\n\t * Allows customizing the messages presented by screen readers in different occasions:\n\t *\n\t * - `added`: The user added a new token.\n\t * - `removed`: The user removed an existing token.\n\t * - `remove` : The user focused the button to remove the token.\n\t * - `__experimentalInvalid`: The user tried to add a token that didn't pass the validation.\n\t */\n\tmessages?: Messages;\n\t/**\n\t * If true, the suggestions list will be always expanded when the input field has the focus.\n\t */\n\t__experimentalExpandOnFocus?: boolean;\n\t/**\n\t * If passed, all introduced values will be validated before being added as tokens.\n\t *\n\t * @default () => true\n\t */\n\t__experimentalValidateInput?: ( token: string ) => boolean;\n\t/**\n\t * If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.\n\t *\n\t * @default true\n\t */\n\t__experimentalShowHowTo?: boolean;\n\t/**\n\t * Deprecated. Use `__next40pxDefaultSize` instead.\n\t *\n\t * @default false\n\t * @deprecated\n\t */\n\t__next36pxDefaultSize?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * If true, the select the first matching suggestion when the user presses\n\t * the Enter key (or space when tokenizeOnSpace is true).\n\t *\n\t * @default false\n\t */\n\t__experimentalAutoSelectFirstMatch?: boolean;\n\t/**\n\t * Custom renderer for suggestions.\n\t */\n\t__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default in a future version.\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * If true, add any incompleteTokenValue as a new token when the field loses focus.\n\t *\n\t * @default false\n\t */\n\ttokenizeOnBlur?: boolean;\n}\n\n/**\n * `T` can be either a `string` or an object which must have a `value` prop as a string.\n */\nexport interface SuggestionsListProps<\n\tT = string | ( Record< string, unknown > & { value: string } ),\n> {\n\tselectedIndex: number;\n\tscrollIntoView: boolean;\n\tmatch: T;\n\tonHover: ( suggestion: T ) => void;\n\tonSelect: ( suggestion: T ) => void;\n\tsuggestions: T[];\n\tdisplayTransform: ( value: T ) => string;\n\tinstanceId: string | number;\n\t__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;\n}\n\nexport interface TokenProps extends TokenItem {\n\tdisplayTransform: ( value: string ) => string;\n\tdisabled: boolean;\n\tonClickRemove: ( { value }: { value: string } ) => void;\n\tmessages: Messages;\n\ttermPosition: number;\n\ttermsCount: number;\n}\n\nexport interface TokenInputProps {\n\tisExpanded: boolean;\n\tinstanceId: string | number;\n\tselectedSuggestionIndex: number;\n\tonChange?: ( { value }: { value: string } ) => void;\n\tvalue: string;\n}\n"],"mappings":""}
|
|
@@ -10,6 +10,9 @@ export function useHeading(props) {
|
|
|
10
10
|
const {
|
|
11
11
|
as: asProp,
|
|
12
12
|
level = 2,
|
|
13
|
+
color = COLORS.gray[900],
|
|
14
|
+
isBlock = true,
|
|
15
|
+
weight = CONFIG.fontWeightHeading,
|
|
13
16
|
...otherProps
|
|
14
17
|
} = useContextSystem(props, 'Heading');
|
|
15
18
|
const as = asProp || `h${level}`;
|
|
@@ -20,10 +23,10 @@ export function useHeading(props) {
|
|
|
20
23
|
a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;
|
|
21
24
|
}
|
|
22
25
|
const textProps = useText({
|
|
23
|
-
color
|
|
26
|
+
color,
|
|
27
|
+
isBlock,
|
|
28
|
+
weight,
|
|
24
29
|
size: getHeadingFontSize(level),
|
|
25
|
-
isBlock: true,
|
|
26
|
-
weight: CONFIG.fontWeightHeading,
|
|
27
30
|
...otherProps
|
|
28
31
|
});
|
|
29
32
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContextSystem","useText","getHeadingFontSize","CONFIG","COLORS","useHeading","props","as","asProp","level","
|
|
1
|
+
{"version":3,"names":["useContextSystem","useText","getHeadingFontSize","CONFIG","COLORS","useHeading","props","as","asProp","level","color","gray","isBlock","weight","fontWeightHeading","otherProps","a11yProps","role","parseInt","textProps","size"],"sources":["@wordpress/components/src/heading/hook.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport { useText } from '../text';\nimport { getHeadingFontSize } from '../utils/font-size';\nimport { CONFIG, COLORS } from '../utils';\nimport type { HeadingProps } from './types';\n\nexport function useHeading(\n\tprops: WordPressComponentProps< HeadingProps, 'h1' >\n) {\n\tconst {\n\t\tas: asProp,\n\t\tlevel = 2,\n\t\tcolor = COLORS.gray[ 900 ],\n\t\tisBlock = true,\n\t\tweight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],\n\t\t...otherProps\n\t} = useContextSystem( props, 'Heading' );\n\n\tconst as = ( asProp || `h${ level }` ) as keyof JSX.IntrinsicElements;\n\n\tconst a11yProps: {\n\t\trole?: string;\n\t\t'aria-level'?: number;\n\t} = {};\n\tif ( typeof as === 'string' && as[ 0 ] !== 'h' ) {\n\t\t// If not a semantic `h` element, add a11y props:\n\t\ta11yProps.role = 'heading';\n\t\ta11yProps[ 'aria-level' ] =\n\t\t\ttypeof level === 'string' ? parseInt( level ) : level;\n\t}\n\n\tconst textProps = useText( {\n\t\tcolor,\n\t\tisBlock,\n\t\tweight,\n\t\tsize: getHeadingFontSize( level ),\n\t\t...otherProps,\n\t} );\n\n\treturn { ...textProps, ...a11yProps, as };\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,OAAO,QAAQ,SAAS;AACjC,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,MAAM,EAAEC,MAAM,QAAQ,UAAU;AAGzC,OAAO,SAASC,UAAUA,CACzBC,KAAoD,EACnD;EACD,MAAM;IACLC,EAAE,EAAEC,MAAM;IACVC,KAAK,GAAG,CAAC;IACTC,KAAK,GAAGN,MAAM,CAACO,IAAI,CAAE,GAAG,CAAE;IAC1BC,OAAO,GAAG,IAAI;IACdC,MAAM,GAAGV,MAAM,CAACW,iBAAkE;IAClF,GAAGC;EACJ,CAAC,GAAGf,gBAAgB,CAAEM,KAAK,EAAE,SAAU,CAAC;EAExC,MAAMC,EAAE,GAAKC,MAAM,IAAK,IAAIC,KAAO,EAAkC;EAErE,MAAMO,SAGL,GAAG,CAAC,CAAC;EACN,IAAK,OAAOT,EAAE,KAAK,QAAQ,IAAIA,EAAE,CAAE,CAAC,CAAE,KAAK,GAAG,EAAG;IAChD;IACAS,SAAS,CAACC,IAAI,GAAG,SAAS;IAC1BD,SAAS,CAAE,YAAY,CAAE,GACxB,OAAOP,KAAK,KAAK,QAAQ,GAAGS,QAAQ,CAAET,KAAM,CAAC,GAAGA,KAAK;EACvD;EAEA,MAAMU,SAAS,GAAGlB,OAAO,CAAE;IAC1BS,KAAK;IACLE,OAAO;IACPC,MAAM;IACNO,IAAI,EAAElB,kBAAkB,CAAEO,KAAM,CAAC;IACjC,GAAGM;EACJ,CAAE,CAAC;EAEH,OAAO;IAAE,GAAGI,SAAS;IAAE,GAAGH,SAAS;IAAET;EAAG,CAAC;AAC1C"}
|