@plaudit/gutenberg-api-extensions 1.5.0 → 2.0.1

package/build/controls/PickOne.d.ts

@@ -1,6 +1,6 @@
+import type { BlockIcon } from "@wordpress/blocks";
 import type { PickableOptions, SimpleBlockControlProps } from "./types";
 import React from "react";
-import { BlockIcon } from "@wordpress/blocks";
 export declare function PickOneFromToggleGroup<T extends string>(props: SimpleBlockControlProps<T, string> & {
     options: PickableOptions<{
         icon: BlockIcon;

package/build/controls/PickOne.js

@@ -1,16 +1,18 @@
-import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, ColorPalette, RadioControl, SelectControl } from "@wordpress/components";
+import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, BaseControl, ColorPalette, RadioControl, SelectControl, useBaseControlProps } from "@wordpress/components";
 import React from "react";
 function makeSharedRadioAndSelectProps(props) {
     return {
         label: props.label,
-        onChange: (value) => props.setAttributes({ [props.attribute]: value }),
-        options: Object.entries(props.options).map(([value, label]) => ({
+        onChange(value) {
+            props.setAttributes({ [props.attribute]: value });
+        },
+        options: props.options.map(([value, label]) => ({
             value, label: typeof label === 'string' ? label : label.text
         }))
     };
 }
 export function PickOneFromToggleGroup(props) {
-    return React.createElement(ToggleGroupControl, { label: props.label, value: props.attributes[props.attribute], onChange: value => props.setAttributes({ [props.attribute]: value }), children: Object.entries(props.options).map(([value, label]) => typeof label === 'string'
+    return React.createElement(ToggleGroupControl, { label: props.label, value: props.attributes[props.attribute], onChange: value => props.setAttributes({ [props.attribute]: value }), children: props.options.map(([value, label]) => typeof label === 'string'
             ? React.createElement(ToggleGroupControlOption, { key: value, value: value, label: label })
             : React.createElement(ToggleGroupControlOptionIcon, { key: value, value: value, label: label.text, icon: label.icon })) });
 }
@@ -25,7 +27,7 @@ export function PickOneFromColors(props) {
     const valueToColorMap = new Map();
     const colorToValueMap = new Map();
     const colors = [];
-    for (const [value, display] of Object.entries(props.options)) {
+    for (const [value, display] of props.options) {
         if (typeof display === 'string') {
             colors.push({ color: value, name: display });
         }
@@ -39,8 +41,7 @@ export function PickOneFromColors(props) {
         }
     }
     const currentColor = (_a = valueToColorMap.get(props.attributes[props.attribute])) !== null && _a !== void 0 ? _a : props.attributes[props.attribute];
-    const id = `layeredStyles__colorPicker--${Math.random().toString().replace(/[.\-]/, '')}`;
-    return React.createElement(React.Fragment, null,
-        React.createElement("label", { htmlFor: id }, props.label),
-        React.createElement(ColorPalette, { id: id, disableCustomColors: true, onChange: color => { var _a, _b; return props.setAttributes({ [props.attribute]: (_b = (_a = colorToValueMap.get(color !== null && color !== void 0 ? color : currentColor)) !== null && _a !== void 0 ? _a : color) !== null && _b !== void 0 ? _b : currentColor }); }, colors: colors, value: currentColor, clearable: false }));
+    const { baseControlProps, controlProps } = useBaseControlProps({ label: props.label });
+    return React.createElement(BaseControl, Object.assign({}, baseControlProps),
+        React.createElement(ColorPalette, Object.assign({}, controlProps, { disableCustomColors: true, onChange: color => { var _a, _b; return props.setAttributes({ [props.attribute]: (_b = (_a = colorToValueMap.get(color !== null && color !== void 0 ? color : currentColor)) !== null && _a !== void 0 ? _a : color) !== null && _b !== void 0 ? _b : currentColor }); }, colors: colors, value: currentColor, clearable: false })));
 }

package/build/controls/types.d.ts

@@ -7,6 +7,6 @@ export type SpecificValueBlockProps<T extends string, V> = {
 export type SimpleBlockControlProps<T extends string, V> = SpecificValueBlockProps<T, V> & {
     label: string;
 };
-export type PickableOptions<T extends object = {}> = Record<string, string | ({
+export type PickableOptions<T extends object = {}> = Array<[string, string | ({
     text: string;
-} & T)>;
+} & T)]>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plaudit/gutenberg-api-extensions",
-	"version": "1.5.0",
+	"version": "2.0.1",
 	"scripts": {
 		"prepublishOnly": "rm -rf build && mkdir build && tsc",
 		"build": "tsc",
@@ -13,6 +13,13 @@
 		"./blocks": "./build/blocks/index.js",
 		"./controls": "./build/controls/index.js"
 	},
+	"typesVersions": {
+		"*": {
+			"blocks": ["build/blocks/index.d.ts"],
+			"controls": ["build/controls/index.d.ts"],
+			"lib/plaudit-icons": ["build/lib/plaudit-icons.d.ts"]
+		}
+	},
 	"dependencies": {
 		"@wordpress/block-editor": "^12.4.0",
 		"@wordpress/blocks": "^12.13.0",