elements-autocomplete-stories.224b746c.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[5497],{"./.storybook/interactive-docs-page.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{f:()=>InteractiveDocsPage});var _storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const InteractiveDocsPage=({stories})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.hE,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Pd,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"meta"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"story"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Tn,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.H2,{}),stories.map(((story,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.fy,{of:story},(null==story?void 0:story.name)||`story-${index}`)))]});InteractiveDocsPage.propTypes={stories:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,prop_types__WEBPACK_IMPORTED_MODULE_3___default().func]))},InteractiveDocsPage.defaultProps={stories:[]},InteractiveDocsPage.__docgenInfo={description:"An alternative version of the Storybook DocsPage component.\n\nReplacing the Stories component with individual DocsStory components.\nThis prevents Stories from passing `__forceInitialArgs` to the DocsStory components.\nWhich makes the stories are interactive on the docs page, making the `args` more like initial values.\n\n@param {(Object|function)[]} [stories] The stories to display.\n@returns {JSX.Element} The DocsPage component without stories.",methods:[],displayName:"InteractiveDocsPage",props:{stories:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"object"},{name:"func"}]}},required:!1}}}},"./src/elements/autocomplete/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,Nullable:()=>Nullable,Validation:()=>Validation,WithLabel:()=>WithLabel,WithPlaceholder:()=>WithPlaceholder,WithSelectedLabel:()=>WithSelectedLabel,default:()=>stories});var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),react=__webpack_require__("../../node_modules/react/index.js"),autocomplete=__webpack_require__("./src/elements/autocomplete/index.js"),interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js"),constants=__webpack_require__("./src/elements/validation/constants.js");var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const dummyOptions=[{value:"option-1",label:"Option 1"},{value:"option-2",label:"Option 2"},{value:"option-3",label:"Option 3"}],Template=args=>{const[{value,query},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),selectedOption=(0,react.useMemo)((()=>(0,lodash.find)(dummyOptions,["value",value])),[value]),filteredOptions=(0,react.useMemo)((()=>(0,lodash.filter)(dummyOptions,(option=>!query||(0,lodash.includes)((0,lodash.toLower)(option.label),(0,lodash.toLower)(query))))),[query]),handleChange=(0,react.useCallback)((newValue=>updateArgs({value:newValue})),[updateArgs]),handleQueryChange=(0,react.useCallback)((event=>updateArgs({query:event.target.value})),[updateArgs]);return(0,jsx_runtime.jsx)(autocomplete.A,{...args,selectedLabel:(null==args?void 0:args.selectedLabel)||(null==selectedOption?void 0:selectedOption.label)||"",value,onChange:handleChange,onQueryChange:handleQueryChange,children:filteredOptions.map((option=>(0,jsx_runtime.jsx)(autocomplete.A.Option,{value:option.value,children:option.label},option.value)))})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{id:"factory",value:"",placeholder:"Type to autocomplete options"}},WithLabel={render:Template.bind({}),name:"With label",parameters:{controls:{disable:!1},docs:{description:{story:"An example with a label using `label` prop.\n"}}},args:{id:"with-label",label:"Example label"}},Nullable={render:Template.bind({}),parameters:{controls:{disable:!1},docs:{description:{story:"Allow empty values with reset button `X` or deleting the option and clicking outside the field.\nYou should also provide the screen reader text `clearButtonScreenReaderText` for accessibility.\nIf not supplying an `onClear` function, it defaults to call `onChange` with the value `null`.\n"}}},args:{id:"nullable",value:dummyOptions[0].value,placeholder:"Type to autocomplete options",nullable:!0,clearButtonScreenReaderText:"Clear selection"}},WithPlaceholder={render:Template.bind({}),name:"With placeholder",parameters:{controls:{disable:!1},docs:{description:{story:"An example with placeholder using `placeholder` prop.\n"}}},args:{id:"with-placeholder",value:"",placeholder:"Search a value..."}},WithSelectedLabel={render:Template.bind({}),name:"With selected label",parameters:{controls:{disable:!1},docs:{description:{story:"An example with default value using `selectedLabel` prop.\n"}}},args:{value:"option-1",id:"selected-label",selectedLabel:"Option 1"}},Validation={render:()=>(0,jsx_runtime.jsx)("div",{className:"yst-space-y-8",children:(0,lodash.map)(constants.U,(variant=>(0,jsx_runtime.jsx)(autocomplete.A,{id:`validation-${variant}`,name:`validation-${variant}`,label:`With validation of variant ${variant}`,value:"1",selectedLabel:"The quick brown fox jumps over the lazy dog",onChange:lodash.noop,onQueryChange:lodash.noop,options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"},{value:"3",label:"Option 3"},{value:"4",label:"Option 4"}],validation:{variant,message:{success:"Looks like you are nailing it!",warning:"Looks like you could do better!",info:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:["Looks like you could use some ",(0,jsx_runtime.jsx)("a",{href:"https://yoast.com",target:"_blank",rel:"noreferrer",children:"more info"}),"!"]}),error:"Looks like you are doing it wrong!"}[variant]}},variant)))}),parameters:{docs:{description:{story:"We distinguish four optional validation variants for the autocomplete select:\n\n1. **Success**<br>\nConfirms that the selected option is valid and meets the required criteria, providing positive feedback to users.\n\n2. **Warning**<br>\nHighlights potential issues or considerations related to the selected option, allowing users to proceed with caution.\n\n3. **Info**<br>\nProvides additional contextual information or guidance related to the selected option, enhancing user understanding.\n\n4. **Error**<br>\nIndicates that the selected option is invalid or not allowed, helping users identify and correct the issue.\n"}}}},stories={title:"1) Elements/Autocomplete",component:autocomplete.A,argTypes:{children:{control:"text"},labelSuffix:{control:"text"},value:{control:"text"}},parameters:{docs:{description:{component:"Autocomplete selects combine the functionality of an autocomplete feature with a selection mechanism, allowing users to efficiently find and choose options from a large set of choices."},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[WithLabel,Nullable,WithPlaceholder,WithSelectedLabel,Validation]})}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{style:{minHeight:200},children:(0,jsx_runtime.jsx)(Story,{})})]}},"./src/elements/validation/constants.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{B:()=>VALIDATION_ICON_MAP,U:()=>VALIDATION_VARIANTS});var _heroicons_react_solid__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckCircleIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/ExclamationIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/InformationCircleIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/ExclamationCircleIcon.js");const VALIDATION_VARIANTS={success:"success",warning:"warning",info:"info",error:"error"},VALIDATION_ICON_MAP={success:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_0__.A,warning:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_1__.A,info:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_2__.A,error:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_3__.A}},"./src/elements/validation/validation-icon.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_6__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_hooks__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/hooks/use-svg-aria.js"),_constants__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/validation/constants.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const CLASSNAME_MAP={variant:{success:"yst-validation-icon--success",warning:"yst-validation-icon--warning",info:"yst-validation-icon--info",error:"yst-validation-icon--error"}},ValidationIcon=({variant="info",className="",...props})=>{const Component=(0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)((()=>_constants__WEBPACK_IMPORTED_MODULE_4__.B[variant]),[variant]),svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_5__.A)();return Component?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component,{...svgAriaProps,...props,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-validation-icon",CLASSNAME_MAP.variant[variant],className)}):null};ValidationIcon.propTypes={variant:prop_types__WEBPACK_IMPORTED_MODULE_6___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.values)(_constants__WEBPACK_IMPORTED_MODULE_4__.U)),className:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string};const __WEBPACK_DEFAULT_EXPORT__=ValidationIcon;ValidationIcon.__docgenInfo={description:"@param {string} variant The variant to render.\n@param {string} className The classname.\n@param {Object} [props] Any extra props.\n@returns {JSX.Element} The ValidationIcon component.",methods:[],displayName:"ValidationIcon",props:{variant:{defaultValue:{value:'"info"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"values( VALIDATION_VARIANTS )"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/elements/validation/validation-input.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_4__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),_validation_icon__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/elements/validation/validation-icon.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const CLASSNAME_MAP={variant:{success:"yst-validation-input--success",warning:"yst-validation-input--warning",info:"yst-validation-input--info",error:"yst-validation-input--error"}},ValidationInput=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({as:Component,validation={},className="",...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-validation-input",(null==validation?void 0:validation.message)&&CLASSNAME_MAP.variant[null==validation?void 0:validation.variant]),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,...props,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-validation-input__input",className)}),(null==validation?void 0:validation.message)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_validation_icon__WEBPACK_IMPORTED_MODULE_3__.A,{variant:null==validation?void 0:validation.variant,className:"yst-validation-input__icon"})]})));ValidationInput.displayName="ValidationInput",ValidationInput.propTypes={as:prop_types__WEBPACK_IMPORTED_MODULE_4___default().elementType.isRequired,validation:prop_types__WEBPACK_IMPORTED_MODULE_4___default().shape({variant:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string,message:prop_types__WEBPACK_IMPORTED_MODULE_4___default().node}),className:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string},ValidationInput.defaultProps={validation:{},className:""};const __WEBPACK_DEFAULT_EXPORT__=ValidationInput;ValidationInput.__docgenInfo={description:"@param {string} variant The variant to render.\n@param {Object} [validation] The validation state.\n@param {string} [className] The classname.\n@returns {JSX.Element} The ValidationInput component.",methods:[],displayName:"ValidationInput",props:{validation:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"shape",value:{variant:{name:"string",required:!1},message:{name:"node",required:!1}}},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},as:{description:"",type:{name:"elementType"},required:!0}}}},"./src/hooks/use-svg-aria.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=(isFocusable=null)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>{const aria={role:"img","aria-hidden":"true"};return null!==isFocusable&&(aria.focusable=isFocusable?"true":"false"),aria}),[isFocusable])},"../../node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);