@wordpress/components 28.8.5 → 28.8.6
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 +6 -3
- package/build/drop-zone/index.js +1 -2
- package/build/drop-zone/index.js.map +1 -1
- package/build/palette-edit/index.js +24 -1
- package/build/palette-edit/index.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js +2 -1
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option-base/component.js +8 -10
- package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
- package/build/toggle-group-control/types.js.map +1 -1
- package/build/tooltip/index.js +5 -1
- package/build/tooltip/index.js.map +1 -1
- package/build-module/drop-zone/index.js +1 -2
- package/build-module/drop-zone/index.js.map +1 -1
- package/build-module/palette-edit/index.js +23 -1
- package/build-module/palette-edit/index.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +2 -1
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +8 -10
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
- package/build-module/toggle-group-control/types.js.map +1 -1
- package/build-module/tooltip/index.js +5 -1
- package/build-module/tooltip/index.js.map +1 -1
- package/build-style/style-rtl.css +4 -4
- package/build-style/style.css +4 -4
- package/build-types/drop-zone/index.d.ts.map +1 -1
- package/build-types/palette-edit/index.d.ts +3 -0
- package/build-types/palette-edit/index.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/types.d.ts +1 -0
- package/build-types/toggle-group-control/types.d.ts.map +1 -1
- package/build-types/tooltip/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/drop-zone/index.tsx +1 -2
- package/src/drop-zone/style.scss +1 -1
- package/src/palette-edit/index.tsx +30 -5
- package/src/palette-edit/test/index.tsx +50 -1
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +6 -6
- package/src/toggle-group-control/test/index.tsx +13 -0
- package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +3 -1
- package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +11 -15
- package/src/toggle-group-control/types.ts +1 -0
- package/src/tooltip/index.tsx +8 -1
- package/src/tooltip/test/index.tsx +78 -0
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clsx","__","useState","upload","Icon","getFilesFromDataTransfer","__experimentalUseDropZone","useDropZone","jsx","_jsx","jsxs","_jsxs","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","event","files","dataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","children","icon"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n *\n * return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'
|
|
1
|
+
{"version":3,"names":["clsx","__","useState","upload","Icon","getFilesFromDataTransfer","__experimentalUseDropZone","useDropZone","jsx","_jsx","jsxs","_jsxs","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","event","files","dataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","children","icon"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n *\n * return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -46,6 +46,28 @@ function NameInput({
|
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
/*
|
|
50
|
+
* Deduplicates the slugs of the provided elements.
|
|
51
|
+
*/
|
|
52
|
+
export function deduplicateElementSlugs(elements) {
|
|
53
|
+
const slugCounts = {};
|
|
54
|
+
return elements.map(element => {
|
|
55
|
+
var _newSlug;
|
|
56
|
+
let newSlug;
|
|
57
|
+
const {
|
|
58
|
+
slug
|
|
59
|
+
} = element;
|
|
60
|
+
slugCounts[slug] = (slugCounts[slug] || 0) + 1;
|
|
61
|
+
if (slugCounts[slug] > 1) {
|
|
62
|
+
newSlug = `${slug}-${slugCounts[slug] - 1}`;
|
|
63
|
+
}
|
|
64
|
+
return {
|
|
65
|
+
...element,
|
|
66
|
+
slug: (_newSlug = newSlug) !== null && _newSlug !== void 0 ? _newSlug : slug
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
49
71
|
/**
|
|
50
72
|
* Returns a name and slug for a palette item. The name takes the format "Color + id".
|
|
51
73
|
* To ensure there are no duplicate ids, this function checks all slugs.
|
|
@@ -206,7 +228,7 @@ function PaletteEditListView({
|
|
|
206
228
|
useEffect(() => {
|
|
207
229
|
elementsReferenceRef.current = elements;
|
|
208
230
|
}, [elements]);
|
|
209
|
-
const debounceOnChange = useDebounce(onChange, 100);
|
|
231
|
+
const debounceOnChange = useDebounce(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);
|
|
210
232
|
return /*#__PURE__*/_jsx(VStack, {
|
|
211
233
|
spacing: 3,
|
|
212
234
|
children: /*#__PURE__*/_jsx(ItemGroup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clsx","useState","useRef","useEffect","useCallback","useMemo","__","sprintf","lineSolid","moreVertical","plus","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","PaletteEditContents","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","kebabCase","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULT_COLOR","NameInput","value","onChange","label","hideLabelFromVision","getNameAndSlugForPosition","elements","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","name","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","shift","offset","resize","placement","className","children","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","onRemove","isEditingColor","setIsEditingColor","popoverAnchor","setPopoverAnchor","anchor","ref","as","justify","onClick","trim","length","style","padding","colorValue","nextName","size","icon","PaletteEditListView","addColorRef","elementsReferenceRef","current","debounceOnChange","spacing","isRounded","map","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","undefined","focus","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","isEditing","setIsEditing","editingElement","setEditingElement","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","level","isPressed","toggleProps","role","variant","clearable","disableCustomGradients","disableCustomColors"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn {\n\t\tname: sprintf(\n\t\t\t/* translators: %s: is an id for a custom color */\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\n\t};\n}\n\nfunction ColorPickerPopover< T extends Color | Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: clsx(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\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</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color | Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tonRemove,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst value = isGradient ? element.gradient : element.color;\n\tconst [ isEditingColor, setIsEditingColor ] = useState( false );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem ref={ setPopoverAnchor } as=\"div\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsEditingColor( true );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t</Button>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\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\t\t<NameContainer>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: /* Fall back to non-breaking space to maintain height */\n\t\t\t\t\t\t\t\t '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t\t__( 'Remove color: %s' ),\n\t\t\t\t\t\t\t\telement.name.trim().length\n\t\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditingColor && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tonClose={ () => setIsEditingColor( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends Color | Gradient >( {\n\telements,\n\tonChange,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n\taddColorRef,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReferenceRef = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReferenceRef.current = elements;\n\t}, [ elements ] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\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\tonRemove={ () => {\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\taddColorRef.current?.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n *\n * return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber | null | undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\tconst addColorRef = useRef< HTMLButtonElement | null >( null );\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={ addColorRef }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\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\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\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\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\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\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\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\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\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\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\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</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\taddColorRef={ addColorRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\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\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["clsx","useState","useRef","useEffect","useCallback","useMemo","__","sprintf","lineSolid","moreVertical","plus","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","PaletteEditContents","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","kebabCase","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULT_COLOR","NameInput","value","onChange","label","hideLabelFromVision","deduplicateElementSlugs","elements","slugCounts","map","element","_newSlug","newSlug","slug","getNameAndSlugForPosition","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","matches","match","id","parseInt","name","ColorPickerPopover","isGradient","popoverProps","receivedPopoverProps","onClose","shift","offset","resize","placement","className","children","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","onRemove","isEditingColor","setIsEditingColor","popoverAnchor","setPopoverAnchor","anchor","ref","as","justify","onClick","trim","length","style","padding","colorValue","nextName","size","icon","PaletteEditListView","addColorRef","elementsReferenceRef","current","debounceOnChange","updatedElements","spacing","isRounded","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","undefined","focus","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","isEditing","setIsEditing","editingElement","setEditingElement","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","level","isPressed","toggleProps","role","variant","clearable","disableCustomGradients","disableCustomColors"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/*\n * Deduplicates the slugs of the provided elements.\n */\nexport function deduplicateElementSlugs< T extends PaletteElement >(\n\telements: T[]\n) {\n\tconst slugCounts: { [ slug: string ]: number } = {};\n\n\treturn elements.map( ( element ) => {\n\t\tlet newSlug: string | undefined;\n\n\t\tconst { slug } = element;\n\t\tslugCounts[ slug ] = ( slugCounts[ slug ] || 0 ) + 1;\n\n\t\tif ( slugCounts[ slug ] > 1 ) {\n\t\t\tnewSlug = `${ slug }-${ slugCounts[ slug ] - 1 }`;\n\t\t}\n\n\t\treturn { ...element, slug: newSlug ?? slug };\n\t} );\n}\n\n/**\n * Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn {\n\t\tname: sprintf(\n\t\t\t/* translators: %s: is an id for a custom color */\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\n\t};\n}\n\nfunction ColorPickerPopover< T extends PaletteElement >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: clsx(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\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</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends PaletteElement >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tonRemove,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst value = isGradient ? element.gradient : element.color;\n\tconst [ isEditingColor, setIsEditingColor ] = useState( false );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem ref={ setPopoverAnchor } as=\"div\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsEditingColor( true );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t</Button>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\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\t\t<NameContainer>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: /* Fall back to non-breaking space to maintain height */\n\t\t\t\t\t\t\t\t '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t\t__( 'Remove color: %s' ),\n\t\t\t\t\t\t\t\telement.name.trim().length\n\t\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditingColor && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tonClose={ () => setIsEditingColor( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends PaletteElement >( {\n\telements,\n\tonChange,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n\taddColorRef,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReferenceRef = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReferenceRef.current = elements;\n\t}, [ elements ] );\n\n\tconst debounceOnChange = useDebounce(\n\t\t( updatedElements: T[] ) =>\n\t\t\tonChange( deduplicateElementSlugs( updatedElements ) ),\n\t\t100\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\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\tonRemove={ () => {\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\taddColorRef.current?.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n *\n * return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber | null | undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\tconst addColorRef = useRef< HTMLButtonElement | null >( null );\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={ addColorRef }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\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\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\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\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\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\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\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\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\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\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\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</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\taddColorRef={ addColorRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\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\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -55,12 +55,13 @@ function UnforwardedToggleGroupControlAsRadioGroup({
|
|
|
55
55
|
const selectedValue = useStoreState(radio, 'value');
|
|
56
56
|
const setValue = radio.setValue;
|
|
57
57
|
const groupContextValue = useMemo(() => ({
|
|
58
|
+
activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),
|
|
58
59
|
baseId,
|
|
59
60
|
isBlock: !isAdaptiveWidth,
|
|
60
61
|
size,
|
|
61
62
|
value: selectedValue,
|
|
62
63
|
setValue
|
|
63
|
-
}), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
|
|
64
|
+
}), [baseId, isAdaptiveWidth, radio, size, selectedValue, setValue]);
|
|
64
65
|
return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {
|
|
65
66
|
value: groupContextValue,
|
|
66
67
|
children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","useStoreState","useInstanceId","forwardRef","useMemo","isRTL","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","selectedValue","groupContextValue","isBlock","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGtB,aAAa,CAChCuB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BnB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG/B,OAAO,CAACgC,aAAa,CAAE;IACpCL,YAAY;IACZT,KAAK;IACLe,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE7B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM8B,aAAa,GAAGlC,aAAa,CAAE8B,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAGhC,OAAO,CAChC,OACG;
|
|
1
|
+
{"version":3,"names":["Ariakit","useStoreState","useInstanceId","forwardRef","useMemo","isRTL","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","selectedValue","groupContextValue","activeItemIsNotFirstItem","getState","activeId","first","isBlock","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tactiveItemIsNotFirstItem: () =>\n\t\t\t\t\tradio.getState().activeId !== radio.first(),\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, radio, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGtB,aAAa,CAChCuB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BnB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG/B,OAAO,CAACgC,aAAa,CAAE;IACpCL,YAAY;IACZT,KAAK;IACLe,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE7B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM8B,aAAa,GAAGlC,aAAa,CAAE8B,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAGhC,OAAO,CAChC,OACG;IACDiC,wBAAwB,EAAEA,CAAA,KACzBN,KAAK,CAACO,QAAQ,CAAC,CAAC,CAACC,QAAQ,KAAKR,KAAK,CAACS,KAAK,CAAC,CAAC;IAC5Cd,MAAM;IACNe,OAAO,EAAE,CAAE5B,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEiB,aAAa;IACpBF;EACD,CAAC,CAAoC,EACtC,CAAEP,MAAM,EAAEb,eAAe,EAAEkB,KAAK,EAAEd,IAAI,EAAEkB,aAAa,EAAEF,QAAQ,CAChE,CAAC;EAED,oBACCvB,IAAA,CAACH,yBAAyB,CAACmC,QAAQ;IAACxB,KAAK,EAAGkB,iBAAmB;IAAAxB,QAAA,eAC9DF,IAAA,CAACV,OAAO,CAAC2C,UAAU;MAClBC,KAAK,EAAGb,KAAO;MACf,cAAajB,KAAO;MACpB+B,MAAM,eAAGnC,IAAA,CAACJ,IAAI,IAAE,CAAG;MAAA,GACdgB,UAAU;MACfF,EAAE,EAAGM,MAAQ;MACboB,GAAG,EAAGvB,YAAc;MAAAX,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEA,OAAO,MAAMa,8BAA8B,GAAGtB,UAAU,CACvDQ,yCACD,CAAC","ignoreList":[]}
|
|
@@ -66,7 +66,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
|
|
|
66
66
|
value,
|
|
67
67
|
children,
|
|
68
68
|
showTooltip = false,
|
|
69
|
-
onFocus: onFocusProp,
|
|
70
69
|
disabled,
|
|
71
70
|
...otherButtonProps
|
|
72
71
|
} = buttonProps;
|
|
@@ -101,7 +100,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
|
|
|
101
100
|
children: isDeselectable ? /*#__PURE__*/_jsx("button", {
|
|
102
101
|
...commonProps,
|
|
103
102
|
disabled: disabled,
|
|
104
|
-
onFocus: onFocusProp,
|
|
105
103
|
"aria-pressed": isPressed,
|
|
106
104
|
type: "button",
|
|
107
105
|
onClick: buttonOnClick,
|
|
@@ -110,16 +108,16 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
|
|
|
110
108
|
})
|
|
111
109
|
}) : /*#__PURE__*/_jsx(Ariakit.Radio, {
|
|
112
110
|
disabled: disabled,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
onFocusProp?.(event);
|
|
118
|
-
if (event.defaultPrevented) {
|
|
119
|
-
return;
|
|
120
|
-
}
|
|
111
|
+
onFocusVisible: () => {
|
|
112
|
+
// Conditions ensure that the first visible focus to a radio group
|
|
113
|
+
// without a selected option will not automatically select the option.
|
|
114
|
+
if (toggleGroupControlContext.value !== null || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {
|
|
121
115
|
toggleGroupControlContext.setValue(value);
|
|
122
116
|
}
|
|
117
|
+
},
|
|
118
|
+
render: /*#__PURE__*/_jsx("button", {
|
|
119
|
+
type: "button",
|
|
120
|
+
...commonProps
|
|
123
121
|
}),
|
|
124
122
|
value: value,
|
|
125
123
|
children: /*#__PURE__*/_jsx(ButtonContentView, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","motion","useReducedMotion","useInstanceId","useMemo","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","placement","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","onFocus","onFocusProp","disabled","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","type","onClick","Radio","render","event","defaultPrevented","div","layout","layoutRoot","transition","role","layoutId","ConnectedToggleGroupControlOptionBase"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { motion } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t| 'id'\n\t\t// due to how the component works, only the `disabled` prop should be used\n\t\t| 'aria-disabled'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst shouldReduceMotion = useReducedMotion();\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tonFocus: onFocusProp,\n\t\tdisabled,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tonFocus={ onFocusProp }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tonFocus={ ( event ) => {\n\t\t\t\t\t\t\t\t\tonFocusProp?.( event );\n\t\t\t\t\t\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\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\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t\t{ /* Animated backdrop using framer motion's shared layout animation */ }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Ariakit","motion","useReducedMotion","useInstanceId","useMemo","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","placement","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","disabled","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","type","onClick","Radio","onFocusVisible","activeItemIsNotFirstItem","render","div","layout","layoutRoot","transition","role","layoutId","ConnectedToggleGroupControlOptionBase"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { motion } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t| 'id'\n\t\t// due to how the component works, only the `disabled` prop should be used\n\t\t| 'aria-disabled'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst shouldReduceMotion = useReducedMotion();\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tdisabled,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tonFocusVisible={ () => {\n\t\t\t\t\t\t\t// Conditions ensure that the first visible focus to a radio group\n\t\t\t\t\t\t\t// without a selected option will not automatically select the option.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.value !== null ||\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.activeItemIsNotFirstItem?.()\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trender={ <button type=\"button\" { ...commonProps } /> }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t\t{ /* Animated backdrop using framer motion's shared layout animation */ }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/**\n\t * Style the option as an icon option.\n\t *\n\t * @default false\n\t */\n\tisIcon?: boolean;\n\tvalue: string | number;\n\t/**\n\t * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/**\n\t * Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t */\n\ticon: JSX.Element;\n\t/**\n\t * The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t */\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' | 'showTooltip'\n> & {\n\t/**\n\t * Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t */\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/**\n\t * React children\n\t */\n\tchildren: TooltipProps[ 'children' ];\n\t/**\n\t * Label for the Tooltip component.\n\t */\n\ttext?: string;\n\t/**\n\t * Whether to wrap the control option in a Tooltip component.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Determines if segments should be rendered with equal widths.\n\t *\n\t * @default false\n\t */\n\tisAdaptiveWidth?: boolean;\n\t/**\n\t * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t *\n\t * @default false\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Whether an option can be deselected by clicking it again.\n\t *\n\t * @default false\n\t */\n\tisDeselectable?: boolean;\n\t/**\n\t * Callback when a segment is selected.\n\t */\n\tonChange?: ( value: string | number | undefined ) => void;\n\t/**\n\t * The selected value.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The size variant of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\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};\n\nexport type ToggleGroupControlContextProps = {\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string | number | undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n>;\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/**\n\t * Style the option as an icon option.\n\t *\n\t * @default false\n\t */\n\tisIcon?: boolean;\n\tvalue: string | number;\n\t/**\n\t * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/**\n\t * Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t */\n\ticon: JSX.Element;\n\t/**\n\t * The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t */\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' | 'showTooltip'\n> & {\n\t/**\n\t * Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t */\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/**\n\t * React children\n\t */\n\tchildren: TooltipProps[ 'children' ];\n\t/**\n\t * Label for the Tooltip component.\n\t */\n\ttext?: string;\n\t/**\n\t * Whether to wrap the control option in a Tooltip component.\n\t *\n\t * @default false\n\t */\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * If true, the label will only be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Determines if segments should be rendered with equal widths.\n\t *\n\t * @default false\n\t */\n\tisAdaptiveWidth?: boolean;\n\t/**\n\t * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t *\n\t * @default false\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * Whether an option can be deselected by clicking it again.\n\t *\n\t * @default false\n\t */\n\tisDeselectable?: boolean;\n\t/**\n\t * Callback when a segment is selected.\n\t */\n\tonChange?: ( value: string | number | undefined ) => void;\n\t/**\n\t * The selected value.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The size variant of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\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};\n\nexport type ToggleGroupControlContextProps = {\n\tactiveItemIsNotFirstItem?: () => boolean;\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string | number | undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'\n>;\n"],"mappings":"","ignoreList":[]}
|
|
@@ -87,9 +87,13 @@ function UnforwardedTooltip(props, ref) {
|
|
|
87
87
|
// TODO: this is a temporary workaround to minimize the effects of the
|
|
88
88
|
// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
|
|
89
89
|
// the tooltip anchor anymore since 0.4.0, so we need to add it manually.
|
|
90
|
+
// The `aria-describedby` attribute is added only if the anchor doesn't have
|
|
91
|
+
// one already, and if the tooltip text is not the same as the anchor's
|
|
92
|
+
// `aria-label`
|
|
90
93
|
// See: https://github.com/WordPress/gutenberg/pull/64066
|
|
94
|
+
// See: https://github.com/WordPress/gutenberg/pull/65989
|
|
91
95
|
function addDescribedById(element) {
|
|
92
|
-
return describedById && mounted ? cloneElement(element, {
|
|
96
|
+
return describedById && mounted && element.props['aria-describedby'] === undefined && element.props['aria-label'] !== text ? cloneElement(element, {
|
|
93
97
|
'aria-describedby': describedById
|
|
94
98
|
}) : element;
|
|
95
99
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","useStoreState","clsx","useInstanceId","Children","useContext","createContext","forwardRef","cloneElement","deprecated","Shortcut","positionToPlacement","jsx","_jsx","jsxs","_jsxs","TooltipInternalContext","isNestedInTooltip","TOOLTIP_DELAY","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","baseId","Tooltip","describedById","undefined","isOnlyChild","count","process","env","NODE_ENV","console","error","computedPlacement","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","Role","render","addDescribedById","element","Provider","value","TooltipAnchor","onClick","hide","store","unmountOnHide","gutter","id","overflowPadding"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById
|
|
1
|
+
{"version":3,"names":["Ariakit","useStoreState","clsx","useInstanceId","Children","useContext","createContext","forwardRef","cloneElement","deprecated","Shortcut","positionToPlacement","jsx","_jsx","jsxs","_jsxs","TooltipInternalContext","isNestedInTooltip","TOOLTIP_DELAY","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","baseId","Tooltip","describedById","undefined","isOnlyChild","count","process","env","NODE_ENV","console","error","computedPlacement","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","Role","render","addDescribedById","element","Provider","value","TooltipAnchor","onClick","hide","store","unmountOnHide","gutter","id","overflowPadding"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// The `aria-describedby` attribute is added only if the anchor doesn't have\n\t// one already, and if the tooltip text is not the same as the anchor's\n\t// `aria-label`\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\t// See: https://github.com/WordPress/gutenberg/pull/65989\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById &&\n\t\t\tmounted &&\n\t\t\telement.props[ 'aria-describedby' ] === undefined &&\n\t\t\telement.props[ 'aria-label' ] !== text\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text || shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1132,22 +1132,22 @@ body.is-dragging-components-draggable {
|
|
|
1132
1132
|
opacity: 0;
|
|
1133
1133
|
transform: scale(0.9);
|
|
1134
1134
|
}
|
|
1135
|
-
.components-drop-zone.is-active
|
|
1135
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
|
|
1136
1136
|
opacity: 1;
|
|
1137
1137
|
transition: opacity 0.2s ease-in-out;
|
|
1138
1138
|
}
|
|
1139
1139
|
@media (prefers-reduced-motion) {
|
|
1140
|
-
.components-drop-zone.is-active
|
|
1140
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
|
|
1141
1141
|
transition: none;
|
|
1142
1142
|
}
|
|
1143
1143
|
}
|
|
1144
|
-
.components-drop-zone.is-active
|
|
1144
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
|
|
1145
1145
|
opacity: 1;
|
|
1146
1146
|
transform: scale(1);
|
|
1147
1147
|
transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
|
|
1148
1148
|
}
|
|
1149
1149
|
@media (prefers-reduced-motion) {
|
|
1150
|
-
.components-drop-zone.is-active
|
|
1150
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
|
|
1151
1151
|
transition: none;
|
|
1152
1152
|
}
|
|
1153
1153
|
}
|
package/build-style/style.css
CHANGED
|
@@ -1137,22 +1137,22 @@ body.is-dragging-components-draggable {
|
|
|
1137
1137
|
opacity: 0;
|
|
1138
1138
|
transform: scale(0.9);
|
|
1139
1139
|
}
|
|
1140
|
-
.components-drop-zone.is-active
|
|
1140
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
|
|
1141
1141
|
opacity: 1;
|
|
1142
1142
|
transition: opacity 0.2s ease-in-out;
|
|
1143
1143
|
}
|
|
1144
1144
|
@media (prefers-reduced-motion) {
|
|
1145
|
-
.components-drop-zone.is-active
|
|
1145
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
|
|
1146
1146
|
transition: none;
|
|
1147
1147
|
}
|
|
1148
1148
|
}
|
|
1149
|
-
.components-drop-zone.is-active
|
|
1149
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
|
|
1150
1150
|
opacity: 1;
|
|
1151
1151
|
transform: scale(1);
|
|
1152
1152
|
transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
|
|
1153
1153
|
}
|
|
1154
1154
|
@media (prefers-reduced-motion) {
|
|
1155
|
-
.components-drop-zone.is-active
|
|
1155
|
+
.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
|
|
1156
1156
|
transition: none;
|
|
1157
1157
|
}
|
|
1158
1158
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BAyFxD;AAED,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { PaletteEditProps, PaletteElement } from './types';
|
|
2
|
+
export declare function deduplicateElementSlugs<T extends PaletteElement>(elements: T[]): (T & {
|
|
3
|
+
slug: string;
|
|
4
|
+
})[];
|
|
2
5
|
/**
|
|
3
6
|
* Returns a name and slug for a palette item. The name takes the format "Color + id".
|
|
4
7
|
* To ensure there are no duplicate ids, this function checks all slugs.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/palette-edit/index.tsx"],"names":[],"mappings":"AAgDA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/palette-edit/index.tsx"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAMX,gBAAgB,EAChB,cAAc,EACd,MAAM,SAAS,CAAC;AAkBjB,wBAAgB,uBAAuB,CAAE,CAAC,SAAS,cAAc,EAChE,QAAQ,EAAE,CAAC,EAAE;;KAgBb;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACxC,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,MAAM;;;EAwBlB;AAiOD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAE,EAC5B,SAAS,EACT,MAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,wBAA4B,EAC5B,YAAY,EACZ,mBAAmB,EACnB,QAAQ,EACR,UAAe,EACf,YAAY,GACZ,EAAE,gBAAgB,+BA8OlB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"as-radio-group.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,kCAAkC,EAElC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"as-radio-group.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,kCAAkC,EAElC,MAAM,UAAU,CAAC;AAgFlB,eAAO,MAAM,8BAA8B,uUAE1C,CAAC"}
|
package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,KAAK,EACX,iCAAiC,EAEjC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,KAAK,EACX,iCAAiC,EAEjC,MAAM,UAAU,CAAC;AA+JlB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,qCAAqC,2RAG1C,CAAC;AAEF,eAAe,qCAAqC,CAAC"}
|
|
@@ -115,6 +115,7 @@ export type ToggleGroupControlProps = Pick<BaseControlProps, 'help' | '__nextHas
|
|
|
115
115
|
__next40pxDefaultSize?: boolean;
|
|
116
116
|
};
|
|
117
117
|
export type ToggleGroupControlContextProps = {
|
|
118
|
+
activeItemIsNotFirstItem?: () => boolean;
|
|
118
119
|
isDeselectable?: boolean;
|
|
119
120
|
baseId: string;
|
|
120
121
|
isBlock: ToggleGroupControlProps['isBlock'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CACnD,iCAAiC,EACjC,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC/C,iCAAiC,EACjC,OAAO,GAAG,aAAa,CACvB,GAAG;IACH;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,EAChB,MAAM,GAAG,yBAAyB,CAClC,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACtC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,uBAAuB,CAAE,SAAS,CAAE,CAAC;IAC9C,IAAI,EAAE,uBAAuB,CAAE,MAAM,CAAE,CAAC;IACxC,KAAK,EAAE,uBAAuB,CAAE,OAAO,CAAE,CAAC;IAC1C,QAAQ,EAAE,CAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,IAAI,CACpD,uBAAuB,EACvB,UAAU,GAAG,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACxE,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CACnD,iCAAiC,EACjC,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC/C,iCAAiC,EACjC,OAAO,GAAG,aAAa,CACvB,GAAG;IACH;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,EAChB,MAAM,GAAG,yBAAyB,CAClC,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACtC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC5C,wBAAwB,CAAC,EAAE,MAAM,OAAO,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,uBAAuB,CAAE,SAAS,CAAE,CAAC;IAC9C,IAAI,EAAE,uBAAuB,CAAE,MAAM,CAAE,CAAC;IACxC,KAAK,EAAE,uBAAuB,CAAE,OAAO,CAAE,CAAC;IAC1C,QAAQ,EAAE,CAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,IAAI,CACpD,uBAAuB,EACvB,UAAU,GAAG,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACxE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":"AAoBA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":"AAoBA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AA0HjC,eAAO,MAAM,OAAO,8FAAmC,CAAC;AAExD,eAAe,OAAO,CAAC"}
|