@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 5.86 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/custom-select-control-v2/custom-select.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n if (isValueEmpty) {\n return __('Select an item');\n }\n if (Array.isArray(value)) {\n return value.length === 1 ? value[0] : sprintf(\n // translators: %d: number of items selected (it will always be 2 or more items)\n _n('%d item selected', '%d items selected', value.length), value.length);\n }\n return value;\n}\nconst CustomSelectButton = ({\n renderSelectedValue,\n size = 'default',\n store,\n ...restProps\n}) => {\n const {\n value: currentValue\n } = Ariakit.useStoreState(store);\n const computedRenderSelectedValue = useMemo(() => renderSelectedValue ?? defaultRenderSelectedValue, [renderSelectedValue]);\n return /*#__PURE__*/_jsx(Styled.Select, {\n ...restProps,\n size: size,\n hasCustomRenderProp: !!renderSelectedValue,\n store: store,\n children: computedRenderSelectedValue(currentValue)\n });\n};\nfunction _CustomSelect(props) {\n const {\n children,\n hideLabelFromVision = false,\n label,\n size,\n store,\n className,\n isLegacy = false,\n ...restProps\n } = props;\n const onSelectPopoverKeyDown = useCallback(e => {\n if (isLegacy) {\n e.stopPropagation();\n }\n }, [isLegacy]);\n const contextValue = useMemo(() => ({\n store,\n size\n }), [store, size]);\n return (\n /*#__PURE__*/\n // Where should `restProps` be forwarded to?\n _jsxs(\"div\", {\n className: className,\n children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n store: store,\n render: hideLabelFromVision ?\n /*#__PURE__*/\n // @ts-expect-error `children` are passed via the render prop\n _jsx(VisuallyHidden, {}) :\n /*#__PURE__*/\n // @ts-expect-error `children` are passed via the render prop\n _jsx(BaseControl.VisualLabel, {\n as: \"div\"\n }),\n children: label\n }), /*#__PURE__*/_jsxs(InputBase, {\n __next40pxDefaultSize: true,\n size: size,\n suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n ...restProps,\n size: size,\n store: store\n // Match legacy behavior (move selection rather than open the popover)\n ,\n showOnKeyDown: !isLegacy\n }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n gutter: 12,\n store: store,\n sameWidth: true,\n slide: false,\n onKeyDown: onSelectPopoverKeyDown\n // Match legacy behavior\n ,\n flip: !isLegacy,\n children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n value: contextValue,\n children: children\n })\n })]\n })]\n })\n );\n}\nexport default _CustomSelect;"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAAoD;AACpD,kBAAgC;AAKhC,6BAA+B;AAC/B,aAAwB;AACxB,wBAAsB;AACtB,0BAAqC;AACrC,0BAAwB;AACxB,yBAA2C;AACpC,IAAM,0BAAsB,8BAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,eAAO,gBAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,QAAI;AAAA;AAAA,UAEvC,gBAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAY,sBAAc,KAAK;AAC/B,QAAM,kCAA8B,wBAAQ,MAAM,uBAAuB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1H,SAAoB,uCAAAA,KAAY,eAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,cAAc,OAAO;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,6BAAyB,4BAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,uCAAAC,MAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,uCAAAD,KAAa,qBAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,uCAAAA,KAAK,uCAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,uCAAAA,KAAK,oBAAAE,QAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAD,MAAM,kBAAAE,SAAW;AAAA,QAChC,uBAAuB;AAAA,QACvB;AAAA,QACA,QAAqB,uCAAAH,KAAK,oBAAAI,SAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,uCAAAJ,KAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,uCAAAA,KAAY,sBAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,uCAAAA,KAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
"names": ["_jsx", "_jsxs", "BaseControl", "InputBase", "SelectControlChevronDown"]
}