@preply/ds-docs 6.1.0 → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-Czuzrjrk.js → 00.LayoutFlex.stories-CFA_TqiB.js} +1 -1
- package/dist/assets/{00.applications-LrxGyYUD.js → 00.applications-CBHIYP5V.js} +1 -1
- package/dist/assets/{00.favicons.guide-BGmNrnkW.js → 00.favicons.guide-DES91oFw.js} +1 -1
- package/dist/assets/{00.token-explorer-C9RjGd2m.js → 00.token-explorer-CB_W5xDw.js} +1 -1
- package/dist/assets/{00.using-responsive-props-B5Hf_zhg.js → 00.using-responsive-props-BlNxgh6e.js} +1 -1
- package/dist/assets/{01.semantic-tokens-LE_URlku.js → 01.semantic-tokens-57w9hsId.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-B6ZHTEKI.js → 01.using-shorthand-props-B4ptLiFF.js} +1 -1
- package/dist/assets/{10.Combinations.stories-crFMqWYW.js → 10.Combinations.stories-BoSshDz-.js} +1 -1
- package/dist/assets/{10.fonts.guide-BvsFakA0.js → 10.fonts.guide-CChndGR6.js} +1 -1
- package/dist/assets/{10.ssr-CvzytiB2.js → 10.ssr-DLi856r9.js} +1 -1
- package/dist/assets/{11.languageFont.explorer.stories-D74Fnx-9.js → 11.languageFont.explorer.stories-B768GtgD.js} +1 -1
- package/dist/assets/{11.ssr.app-router-6gm8LtbX.js → 11.ssr.app-router-D_15gE8t.js} +1 -1
- package/dist/assets/{20.libraries-DK289zy7.js → 20.libraries-DQTTSvsY.js} +1 -1
- package/dist/assets/{30.icons.explorer-Beh39C6t.js → 30.icons.explorer-aVpQ43do.js} +8 -8
- package/dist/assets/{30.storybook-DOaJn8iY.js → 30.storybook-YIHgueDX.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-B_EKmaEw.js → 40.illustrations.explorer-DDcxoN1B.js} +1 -1
- package/dist/assets/{90.advanced-CSPomJZ9.js → 90.advanced-B439yxZO.js} +1 -1
- package/dist/assets/{Accordion-D6ZH-DjE.js → Accordion-C0QrA-6c.js} +5 -5
- package/dist/assets/{Accordion.stories-BeDqFMEq.js → Accordion.stories-CCwJvBCB.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-WqwXlFhP.js → Accordion.tests.stories-BrRH9_Sj.js} +1 -1
- package/dist/assets/{AlertDialog.stories-wkxHjKFk.js → AlertDialog.stories-CCjaPjvg.js} +1 -1
- package/dist/assets/{Avatar-pYo4pD9f.js → Avatar-CUIDF2Uz.js} +1 -1
- package/dist/assets/{Avatar.stories-DW2TYQqg.js → Avatar.stories-W6dpZqal.js} +1 -1
- package/dist/assets/{AvatarWithStatus.stories-DJHFLq1b.js → AvatarWithStatus.stories-DKnIlANz.js} +3 -3
- package/dist/assets/{Badge.stories-nc4ge1vK.js → Badge.stories-BPJPq1Zm.js} +2 -2
- package/dist/assets/{Box.stories-DDa-aSBM.js → Box.stories-DHzuH0q4.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-BbmHv_wr.js → BubbleCounter.stories-Bl92FUMb.js} +1 -1
- package/dist/assets/{Button-C0ATLgoL.js → Button-DixvkhBo.js} +1 -1
- package/dist/assets/Button-Dpx1oUXU.css +1 -0
- package/dist/assets/{Button.stories-CPyl_2HB.js → Button.stories-BajPN_9k.js} +1 -1
- package/dist/assets/ButtonBase-CAzN2xsB.css +1 -0
- package/dist/assets/{ButtonBase-6aCRtC4n.js → ButtonBase-DTqpenrU.js} +1 -1
- package/dist/assets/{Checkbox-B4QnbKjr.js → Checkbox-D0qeA3OO.js} +3 -3
- package/dist/assets/{Checkbox.stories-BoDx-Aqb.js → Checkbox.stories-B8jPRdZg.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-0pTjaycC.js → Checkbox.tests.stories-DwOcteiI.js} +1 -1
- package/dist/assets/{Chips.stories-DHJLxAwi.js → Chips.stories-DvEyddmS.js} +1 -1
- package/dist/assets/{Color-YHDXOIA2-DtSlX6y8.js → Color-YHDXOIA2-BtW6qOVR.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-Buhcez-K.js → ComposingPopovers.stories-DBJFjhzX.js} +1 -1
- package/dist/assets/CountryFlag-BhibdOJ2.js +49 -0
- package/dist/assets/{CountryFlag.stories-BAoq9f11.js → CountryFlag.stories-DfJhWYOz.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-BQOn25VR.js → CountryFlag.test.stories-BmLRxSj2.js} +1 -1
- package/dist/assets/{Dialog.stories-wddpMYPZ.js → Dialog.stories-DuVAp1uh.js} +1 -1
- package/dist/assets/DismissibleChips-D8qOUNl1.js +1 -0
- package/dist/assets/{DismissibleChips.stories-DJjBWEal.js → DismissibleChips.stories-Bggm2Uu_.js} +1 -1
- package/dist/assets/{Divider-BPgGsji3.js → Divider-nt4GwjWS.js} +1 -1
- package/dist/assets/{Divider.stories-D0XhMPpe.js → Divider.stories-DD0t6A5Y.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-BRe85de1.js → DocsRenderer-CFRXHY34-BF4-7Bvz.js} +1 -1
- package/dist/assets/{DropdownMenu-BjXJi9hq.js → DropdownMenu-D0HlOrIY.js} +180 -180
- package/dist/assets/{DropdownMenu.stories-Br_YQdnZ.js → DropdownMenu.stories-BjlS3fvQ.js} +1 -1
- package/dist/assets/{FormControl.stories-Do6Ag_mi.js → FormControl.stories-Dwh6RVsg.js} +1 -1
- package/dist/assets/{Heading-AcDVTZ-_.js → Heading-O7e38RDd.js} +2 -2
- package/dist/assets/{Heading.stories-Dq8LtEfG.js → Heading.stories-DUy8mOqK.js} +1 -1
- package/dist/assets/{Icon-wspFbxjK.js → Icon-Dh4gq7rV.js} +1 -1
- package/dist/assets/{Icon-RSC-COhGavBW.js → Icon-RSC-Dcn5sZ3U.js} +1 -1
- package/dist/assets/{Icon.stories-BNA7Bui8.js → Icon.stories-YNDb1uxz.js} +1 -1
- package/dist/assets/IconButton-BpsZ_i0D.js +8 -0
- package/dist/assets/{Input-BAXGCyfY.js → Input-p1USf21q.js} +3 -3
- package/dist/assets/{IntegrationWithReactHookForm.stories-B0wzkRUy.js → IntegrationWithReactHookForm.stories-C7rkP74I.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-DXgF0fgL.js → IntlFormattedCurrency.stories-DKCbye_s.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-1kBqMLSv.js → IntlFormattedDateTime.stories-C7ql1fzH.js} +1 -1
- package/dist/assets/{LayoutFlex-DaVVk5XW.js → LayoutFlex-BQNwfAZ8.js} +1 -1
- package/dist/assets/{LayoutFlexItem-CbD8uHkr.js → LayoutFlexItem-Cnu7TJMT.js} +1 -1
- package/dist/assets/{LayoutGrid-BIeryQor.js → LayoutGrid-DKo6LloH.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-pQ5UReWz.js → LayoutGrid.stories-d8Uh7SyS.js} +1 -1
- package/dist/assets/{LayoutGridItem-DhK3Bywt.js → LayoutGridItem-C3Sbj_zb.js} +1 -1
- package/dist/assets/{Link-Cc9tpbxA.js → Link-DNHygNgT.js} +1 -1
- package/dist/assets/{Link.stories-Drp_umWZ.js → Link.stories-C8G914wS.js} +1 -1
- package/dist/assets/MultiSelectChips-x8-aNb7S.js +2 -0
- package/dist/assets/{MultiSelectChips.stories-dUDp4Xc_.js → MultiSelectChips.stories-C-itbYdR.js} +1 -1
- package/dist/assets/NumberField-D2w4cJKT.js +6 -0
- package/dist/assets/{NumberField.stories-ZxFHRJyU.js → NumberField.stories-K0G1eZYP.js} +1 -1
- package/dist/assets/{ObserveIntersection-CBPJ0vGf.js → ObserveIntersection-CJD9SPB4.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-Bj8cybzJ.js → ObserveIntersection.stories-BZxt8NB9.js} +1 -1
- package/dist/assets/{OnboardingTooltip-BKRWp9Pq.js → OnboardingTooltip-DGGIkrYL.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-DU8mHci-.js → OnboardingTooltip.stories-CqHYAi6H.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-CkbP5Ipu.js → OnboardingTooltip.tests.stories-nFV51x-_.js} +1 -1
- package/dist/assets/{OnboardingTour-BV2VCN_i.js → OnboardingTour-BglC71Ta.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-K9VvH40P.js → OnboardingTour.stories-DBshcJ0B.js} +2 -2
- package/dist/assets/{OnboardingTour.tests.stories-D7L1eKyZ.js → OnboardingTour.tests.stories-CSVFsDnS.js} +1 -1
- package/dist/assets/PasswordField-CxIkNFsF.js +6 -0
- package/dist/assets/{PasswordField.stories-D9iudzST.js → PasswordField.stories-Dco0ovJg.js} +1 -1
- package/dist/assets/{PreplyLogo.stories-eJP4lbLQ.js → PreplyLogo.stories-DQVXMPIz.js} +1 -1
- package/dist/assets/{ProgressBar.stories-uUJTq2by.js → ProgressBar.stories-D3jz1ZQP.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-b7cdUZmK.js → ProgressSteps.stories-1KAWRZVd.js} +1 -1
- package/dist/assets/{PromoDialog-DZI6CpQc.js → PromoDialog-DmE1Ox6z.js} +1 -1
- package/dist/assets/{Rating.stories-CC-5R6ut.js → Rating.stories-byG85-k9.js} +1 -1
- package/dist/assets/{RatingInput.stories-BO7jyUpI.js → RatingInput.stories-BmyAcN2r.js} +1 -1
- package/dist/assets/{SelectField-D9Fok9XR.js → SelectField-BygRJ7mA.js} +8 -8
- package/dist/assets/{SelectField.stories-DQTnk9Os.js → SelectField.stories-DgBLde_T.js} +1 -1
- package/dist/assets/{ShowOnIntersection.stories-CtV5r2Kn.js → ShowOnIntersection.stories-Dgh5DwVX.js} +1 -1
- package/dist/assets/SingleSelectChips-D3BHVGfe.js +2 -0
- package/dist/assets/{SingleSelectChips.stories-BQFZDkdR.js → SingleSelectChips.stories-Dh4SjJCK.js} +1 -1
- package/dist/assets/{Steps-BUMjNhaw.js → Steps-DhH69dIM.js} +1 -1
- package/dist/assets/{Steps.stories-BIrAAKzK.js → Steps.stories-BYZWWBHf.js} +1 -1
- package/dist/assets/{Switch.stories-DS5KnbfD.js → Switch.stories-CaMAnd_b.js} +1 -1
- package/dist/assets/{Text-BeTVFZDV.js → Text-Bj4lCtRc.js} +1 -1
- package/dist/assets/{Text.stories-BTK0-cRF.js → Text.stories-Dx9I8yq7.js} +1 -1
- package/dist/assets/TextField-CpqUV3nE.js +6 -0
- package/dist/assets/{TextField.stories-DkdS2Mfb.js → TextField.stories-DVcFAmI_.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-C75NoH2M.js → TextHighlighted.stories-Ddkb0Eic.js} +1 -1
- package/dist/assets/{TextInline.stories-0r8wshPV.js → TextInline.stories-TF8QL7dO.js} +1 -1
- package/dist/assets/{TextareaField-Drzk_csF.js → TextareaField-BllgUips.js} +8 -8
- package/dist/assets/{TextareaField.stories-BEBK6RZT.js → TextareaField.stories-CCqlnPe_.js} +1 -1
- package/dist/assets/{Toast.stories-6u3p4VaR.js → Toast.stories-DIdoJeJF.js} +1 -1
- package/dist/assets/{Tooltip.stories-DIt2icPQ.js → Tooltip.stories-CNov-gkX.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-D4UUXvaG.js → Tooltip.tests.stories-CJh9LT0Y.js} +1 -1
- package/dist/assets/{breakpoints-__JDXoVV.js → breakpoints-CXCZFL5D.js} +1 -1
- package/dist/assets/{breakpoints-D1NuJ1Ck.js → breakpoints-D198lovo.js} +1 -1
- package/dist/assets/{breakpoints-DQ0cE-7v.js → breakpoints-D9Y6r7Wa.js} +1 -1
- package/dist/assets/{changelog-B-7o4UyI.js → changelog-C1ld2nDc.js} +240 -230
- package/dist/assets/createRequiredContext-ChMx7FdN.js +241 -0
- package/dist/assets/{entry-preview-B_etxKYS.js → entry-preview-C6CnKIuC.js} +1 -1
- package/dist/assets/{getTokenVar-BrRxg7Sd.js → getTokenVar-Kl4fQ1Kj.js} +1 -1
- package/dist/assets/{hover-BRL3-ew5.js → hover-CZpvGpBh.js} +1 -1
- package/dist/assets/{hover-QZ-mRtAD.js → hover-DxOyTM6D.js} +1 -1
- package/dist/assets/{hover-D6DPls7K.js → hover-deiWDZRE.js} +1 -1
- package/dist/assets/{iframe-HVWDRYwU.js → iframe-DaGDN8RV.js} +2 -2
- package/dist/assets/{index-BVD8Q_yH.js → index-B2Dfubap.js} +1 -1
- package/dist/assets/{index-HAWm7lpA.js → index-DutI5zZq.js} +4 -4
- package/dist/assets/{index-D2OeATJc.js → index-DzhQa_UD.js} +3 -3
- package/dist/assets/{intro-CCOnfVV-.js → intro-BE4s0K_N.js} +1 -1
- package/dist/assets/{migrating-from-less-CGTLe5iR.js → migrating-from-less-CtULEQ8m.js} +1 -1
- package/dist/assets/{preview-Cm45ft8v.js → preview-ByHXCScc.js} +2 -2
- package/dist/assets/{preview-45qDei97.js → preview-V9rP4WZc.js} +1 -1
- package/dist/assets/{preview-Dh5Xn-6N.js → preview-oSwaWaKi.js} +1 -1
- package/dist/assets/{tokens-CLEDQ2NI.js → tokens-8ofWrKCO.js} +1 -1
- package/dist/assets/{tokens-DLLmUmoT.js → tokens-BZHfgJsO.js} +1 -1
- package/dist/assets/{tokens-0vMwrKfg.js → tokens-DhYlNiT9.js} +1 -1
- package/dist/assets/{usePortalElement--_bF-XXu.js → usePortalElement-_10aM_bu.js} +1 -1
- package/dist/assets/{welcome-BeM9AkPY.js → welcome-BE7qPLxT.js} +1 -1
- package/dist/assets/{zeroheight-ot2J4ixf.js → zeroheight-CNXUtlRH.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +9228 -9210
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/dist/assets/Button-DWJn1UPq.css +0 -1
- package/dist/assets/ButtonBase-B_NzLahR.css +0 -1
- package/dist/assets/CountryFlag-B0HpjQWe.js +0 -49
- package/dist/assets/DismissibleChips-DQhE_0Ll.js +0 -1
- package/dist/assets/IconButton-Uj306zax.js +0 -8
- package/dist/assets/MultiSelectChips-BqFtbDlW.js +0 -2
- package/dist/assets/NumberField-D5QfH9e7.js +0 -6
- package/dist/assets/PasswordField-IOfkl1f_.js +0 -6
- package/dist/assets/SingleSelectChips-CSrlgJ4x.js +0 -2
- package/dist/assets/TextField-DNQO5hjo.js +0 -6
- package/dist/assets/createRequiredContext-xfj07Y2n.js +0 -241
- /package/dist/assets/{Button-CiNYQcxX.js → Button-RI9aMQG7.js} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as k}from"./index-Cb9e4tly.js";import{u as x}from"./useControllableState-DKskwY-e.js";import{c as j,$ as R,C as I,a as z,b as _,d as E,e as L}from"./createRequiredContext-ChMx7FdN.js";import{F as N}from"./TokyoUIClose-thK8sk63.js";import{V as A}from"./VisuallyHidden-CZd13GOS.js";import"./index-DWSmmBvQ.js";import{g as S}from"./shared-strings-DFzxd8lM.js";import{f as V}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{I as T}from"./Icon-Dh4gq7rV.js";import{g as w}from"./index-qlqSh81O.js";import{M as F}from"./message-CSdaKtIj.js";import{w as q}from"./componentNames-k0j3gHgH.js";const[M,B]=j("DismissibleChips"),C=k.forwardRef(function({items:l,children:r,orientation:t,"aria-label":o,"aria-controls":m,value:c,onValueChange:d,defaultValue:p,dataset:f,...h},b){const[n,g]=x({value:c,onValueChange:d,defaultValue:p??[]}),u=v=>{g(n.filter(a=>a!==v))},i=l?l.map(({label:v,value:a,...D})=>e.jsx(y,{value:a,...D,children:v},a)):r;return e.jsx(M,{value:{values:n,onRemove:u,ariaControls:m},children:e.jsx(E,{orientation:t,children:e.jsx(L,{...V(h),ref:b,orientation:t,"aria-label":o,...w(f,{preplyDsComponent:q.DismissibleChips}),children:i})})})}),y=k.forwardRef(function({value:l,children:r,icon:t,countryFlagCode:o,disabled:m,counter:c,dataset:d,dsInternalSimulation:p,...f},h){const{values:b,onRemove:n,ariaControls:g}=B(),u=R(),i=()=>{n(l),u==null||u.focusNext({wrap:!0})},v=a=>{switch(a.key){case"Delete":case"Backspace":i();break}};return b.includes(l)?e.jsx(I,{children:e.jsxs(z,{...V(f),ref:h,variant:"dismissible",onClick:i,onKeyDown:v,icon:t,countryFlagCode:o,disabled:m,"aria-controls":g,dsInternalSimulation:p,...w(d,{preplyDsComponent:q.DismissibleChipsItem}),children:[e.jsx(A,{children:e.jsx(F,{...S.remove})}),e.jsx(_,{counter:c,children:r}),e.jsx(T,{svg:N})]})}):null});try{C.displayName="DismissibleChips",C.__docgenInfo={description:"A chips component for displaying dismissible/removable items.",displayName:"DismissibleChips",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},value:{defaultValue:null,description:"Current value of the chips. When provided, the component operates in controlled mode",name:"value",required:!1,type:{name:"enum",value:[{value:"T[]"}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"T[]"}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:"aria-controls",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-label":{defaultValue:null,description:"Accessible label for the chips group. Required for screen reader users",name:"aria-label",required:!0,type:{name:"string"}},onValueChange:{defaultValue:null,description:"Callback fired when the value changes. Receives the new value as an argument",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: T[]) => void"}]}},orientation:{defaultValue:{value:"'horizontal'"},description:"Layout orientation of the chips group.",name:"orientation",required:!1,type:{name:"enum",value:[{value:'"horizontal"'},{value:'"vertical"'}]}},items:{defaultValue:null,description:"",name:"items",required:!1,type:{name:"enum",value:[{value:'(Omit<ChipsItemProps, "children" | "dsInternalSimulation" | "value"> & { value: NonNullable<T>; label: ReactNode; })[]'}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"(instance: HTMLUListElement | null) => void"},{value:"RefObject<HTMLUListElement>"}]}}}}}catch{}try{y.displayName="DismissibleChipsItem",y.__docgenInfo={description:"Individual dismissible chip item for use within DismissibleChips.",displayName:"DismissibleChipsItem",props:{disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},countryFlagCode:{defaultValue:null,description:"",name:"countryFlagCode",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"id"'},{value:'"as"'},{value:'"is"'},{value:'"af"'},{value:'"ax"'},{value:'"al"'},{value:'"dz"'},{value:'"ad"'},{value:'"ao"'},{value:'"aq"'},{value:'"ag"'},{value:'"ar"'},{value:'"am"'},{value:'"aw"'},{value:'"sh-ac"'},{value:'"asean"'},{value:'"au"'},{value:'"at"'},{value:'"az"'},{value:'"bs"'},{value:'"bh"'},{value:'"bd"'},{value:'"bb"'},{value:'"es-pv"'},{value:'"by"'},{value:'"be"'},{value:'"bz"'},{value:'"bj"'},{value:'"bm"'},{value:'"bt"'},{value:'"bo"'},{value:'"bq"'},{value:'"ba"'},{value:'"bw"'},{value:'"bv"'},{value:'"br"'},{value:'"io"'},{value:'"bn"'},{value:'"bg"'},{value:'"bf"'},{value:'"bi"'},{value:'"cv"'},{value:'"kh"'},{value:'"cm"'},{value:'"ca"'},{value:'"ic"'},{value:'"es-ct"'},{value:'"ky"'},{value:'"cf"'},{value:'"cefta"'},{value:'"td"'},{value:'"cl"'},{value:'"cn"'},{value:'"cx"'},{value:'"cp"'},{value:'"cc"'},{value:'"co"'},{value:'"km"'},{value:'"ck"'},{value:'"cr"'},{value:'"hr"'},{value:'"cu"'},{value:'"cw"'},{value:'"cy"'},{value:'"cz"'},{value:'"ci"'},{value:'"cd"'},{value:'"dk"'},{value:'"dg"'},{value:'"dj"'},{value:'"dm"'},{value:'"do"'},{value:'"eac"'},{value:'"ec"'},{value:'"eg"'},{value:'"sv"'},{value:'"gb-eng"'},{value:'"gq"'},{value:'"er"'},{value:'"ee"'},{value:'"sz"'},{value:'"et"'},{value:'"eu"'},{value:'"fk"'},{value:'"fo"'},{value:'"fm"'},{value:'"fj"'},{value:'"fi"'},{value:'"fr"'},{value:'"gf"'},{value:'"pf"'},{value:'"tf"'},{value:'"ga"'},{value:'"es-ga"'},{value:'"gm"'},{value:'"ge"'},{value:'"de"'},{value:'"gh"'},{value:'"gi"'},{value:'"gr"'},{value:'"gl"'},{value:'"gd"'},{value:'"gp"'},{value:'"gu"'},{value:'"gt"'},{value:'"gg"'},{value:'"gn"'},{value:'"gw"'},{value:'"gy"'},{value:'"ht"'},{value:'"hm"'},{value:'"va"'},{value:'"hn"'},{value:'"hk"'},{value:'"hu"'},{value:'"in"'},{value:'"ir"'},{value:'"iq"'},{value:'"ie"'},{value:'"im"'},{value:'"il"'},{value:'"it"'},{value:'"jm"'},{value:'"jp"'},{value:'"je"'},{value:'"jo"'},{value:'"kz"'},{value:'"ke"'},{value:'"ki"'},{value:'"xk"'},{value:'"kw"'},{value:'"kg"'},{value:'"la"'},{value:'"lv"'},{value:'"arab"'},{value:'"lb"'},{value:'"ls"'},{value:'"lr"'},{value:'"ly"'},{value:'"li"'},{value:'"lt"'},{value:'"lu"'},{value:'"mo"'},{value:'"mg"'},{value:'"mw"'},{value:'"my"'},{value:'"mv"'},{value:'"ml"'},{value:'"mt"'},{value:'"mh"'},{value:'"mq"'},{value:'"mr"'},{value:'"mu"'},{value:'"yt"'},{value:'"mx"'},{value:'"md"'},{value:'"mc"'},{value:'"mn"'},{value:'"me"'},{value:'"ms"'},{value:'"ma"'},{value:'"mz"'},{value:'"mm"'},{value:'"na"'},{value:'"nr"'},{value:'"np"'},{value:'"nl"'},{value:'"nc"'},{value:'"nz"'},{value:'"ni"'},{value:'"ne"'},{value:'"ng"'},{value:'"nu"'},{value:'"nf"'},{value:'"kp"'},{value:'"mk"'},{value:'"gb-nir"'},{value:'"mp"'},{value:'"no"'},{value:'"om"'},{value:'"pc"'},{value:'"pk"'},{value:'"pw"'},{value:'"pa"'},{value:'"pg"'},{value:'"py"'},{value:'"pe"'},{value:'"ph"'},{value:'"pn"'},{value:'"pl"'},{value:'"pt"'},{value:'"pr"'},{value:'"qa"'},{value:'"cg"'},{value:'"ro"'},{value:'"ru"'},{value:'"rw"'},{value:'"re"'},{value:'"bl"'},{value:'"sh-hl"'},{value:'"sh"'},{value:'"kn"'},{value:'"lc"'},{value:'"mf"'},{value:'"pm"'},{value:'"vc"'},{value:'"ws"'},{value:'"sm"'},{value:'"st"'},{value:'"sa"'},{value:'"gb-sct"'},{value:'"sn"'},{value:'"rs"'},{value:'"sc"'},{value:'"sl"'},{value:'"sg"'},{value:'"sx"'},{value:'"sk"'},{value:'"si"'},{value:'"sb"'},{value:'"so"'},{value:'"za"'},{value:'"gs"'},{value:'"kr"'},{value:'"ss"'},{value:'"es"'},{value:'"lk"'},{value:'"ps"'},{value:'"sd"'},{value:'"sr"'},{value:'"sj"'},{value:'"se"'},{value:'"ch"'},{value:'"sy"'},{value:'"tw"'},{value:'"tj"'},{value:'"tz"'},{value:'"th"'},{value:'"tl"'},{value:'"tg"'},{value:'"tk"'},{value:'"to"'},{value:'"tt"'},{value:'"sh-ta"'},{value:'"tn"'},{value:'"tm"'},{value:'"tc"'},{value:'"tv"'},{value:'"tr"'},{value:'"ug"'},{value:'"ua"'},{value:'"ae"'},{value:'"gb"'},{value:'"un"'},{value:'"um"'},{value:'"us"'},{value:'"uy"'},{value:'"uz"'},{value:'"vu"'},{value:'"ve"'},{value:'"vn"'},{value:'"vg"'},{value:'"vi"'},{value:'"gb-wls"'},{value:'"wf"'},{value:'"eh"'},{value:'"ye"'},{value:'"zm"'},{value:'"zw"'}]}},value:{defaultValue:null,description:"Unique identifier for this chip. Used for selection tracking",name:"value",required:!0,type:{name:"string"}},children:{defaultValue:null,description:"Content to display inside the chip",name:"children",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},counter:{defaultValue:null,description:"Optional numeric counter to display alongside the chip label",name:"counter",required:!1,type:{name:"enum",value:[{value:"number"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{y as D,C as a};
|
package/dist/assets/{DismissibleChips.stories-DJjBWEal.js → DismissibleChips.stories-Bggm2Uu_.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as j}from"./index-Cb9e4tly.js";import{D as p,a as m}from"./DismissibleChips-DQhE_0Ll.js";import{F as L,a as Qe,b as Xe,c as na}from"./TokyoUIAvailability7LateNight-TgMFD5Or.js";import{F as ia}from"./TokyoUIEmojiFrowning-DwuiVRut.js";import{F as sa}from"./index-DWSmmBvQ.js";import{L as g}from"./LayoutFlex-DaVVk5XW.js";import{T as E}from"./Text-BeTVFZDV.js";import{L as oa}from"./Link-Cc9tpbxA.js";import{H as la}from"./Heading-AcDVTZ-_.js";import{d as ra}from"./styled-components.browser.esm-COuAnjOv.js";import{f as ca,r as ea,w as u,e as a,u as l,a as A}from"./index-Dk_MCKuE.js";import{B as H}from"./Button-C0ATLgoL.js";import{T as S}from"./Tooltip-_f_f-kTL.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./useControllableState-DKskwY-e.js";import"./createRequiredContext-xfj07Y2n.js";import"./Icon-wspFbxjK.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./CountryFlag-B0HpjQWe.js";import"./useMergeRefs-D_RfOOSs.js";import"./TokyoUIClose-thK8sk63.js";import"./VisuallyHidden-CZd13GOS.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./layout-relative.module-uOnIKnjS.js";import"./text-centered-BFb64PJw.js";import"./useHostname-PsilflFC.js";import"./ButtonBase-6aCRtC4n.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./index-CC6DAVyL.js";import"./PortalElementProvider-BAqvxZzH.js";import"./index-Cc-bXjHe.js";import"./index-BqT8peiM.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-BV2iXjxm.js";import"./index-2TVOn9du.js";import"./index-DR63UjCN.js";const rt={title:"components/Chips/DismissibleChips",component:m,subcomponents:{DismissibleChipsItem:p},parameters:{layout:"padded",remountable:!0},args:{"aria-label":"Selected skills",defaultValue:["vocabulary","speaking","listening","reading"],onValueChange:ca(),items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},decorators:[function(t,{parameters:n}){const[s,o]=j.useState(0),r=()=>o(c=>c+1);return n.remountable?e.jsxs(g,{gap:"12",justifyContent:"space-between",children:[e.jsx(t,{},s),e.jsx(H,{variant:"ghost",size:"small",onClick:r,dataset:{testid:"reset"},children:"Reset story"})]}):e.jsx(t,{})}],beforeEach:()=>()=>{ea()}},b={play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("button",{name:/Remove Vocabulary/}),r=s.getByRole("button",{name:/Remove Speaking/}),c=s.getByRole("button",{name:/Remove Listening/}),d=s.getByRole("button",{name:/Remove Reading/});await t("Render chips with default values",async()=>{a(o).toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Chip should have accessible name",async()=>{a(o).toHaveAccessibleName("Remove Vocabulary")}),await t("Dismiss chip by clicking dismiss button",async()=>{await l.click(o),a(n.onValueChange).toHaveBeenCalledWith(["speaking","listening","reading"]),a(o).not.toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Dismiss another chip",async()=>{await l.click(r),a(n.onValueChange).toHaveBeenCalledWith(["listening","reading"]),a(o).not.toBeVisible(),a(r).not.toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await l.click(s.getByTestId("reset")),await l.click(i)}};let D;const y={render:function({defaultValue:t,...n}){const[s,o]=j.useState(t);D=o;const r=c=>{var d;o(c),(d=n.onValueChange)==null||d.call(n,c)};return e.jsx(m,{...n,value:s,onValueChange:r})},play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("button",{name:/Remove Vocabulary/}),r=s.getByRole("button",{name:/Remove Speaking/}),c=s.getByRole("button",{name:/Remove Listening/}),d=s.getByRole("button",{name:/Remove Reading/});await t("Render chips with default values",async()=>{a(o).toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Dismiss chip by clicking dismiss button",async()=>{await l.click(o),a(n.onValueChange).toHaveBeenCalledWith(["speaking","listening","reading"]),a(o).not.toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Change the value externally",async()=>{ea(),D(["listening","reading"]),await A(()=>{a(n.onValueChange).not.toHaveBeenCalled(),a(o).not.toBeVisible(),a(r).not.toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()})}),await l.click(s.getByTestId("reset")),await l.click(i)}},h={args:{items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking",disabled:!0},{value:"listening",label:"Listening",disabled:!0},{value:"reading",label:"Reading"}]},play:async({canvasElement:i,step:t,args:n})=>{const o=u(i).getByRole("button",{name:/Remove Speaking/});await t("Disabled chip must have disabled attribute",async()=>{a(o).toBeDisabled()}),await t("Disabled chip must not be clickable",async()=>{await l.click(o),a(n.onValueChange).not.toHaveBeenCalled(),a(o).toBeVisible()})}},v={args:{"aria-label":"Selected availabilities",defaultValue:["morning","afternoon","evening"],items:[{value:"morning",label:"Morning",icon:e.jsx(L,{})},{value:"afternoon",label:"Afternoon",icon:e.jsx(Qe,{})},{value:"evening",label:"Evening",icon:e.jsx(Xe,{})}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove Morning/}),o=u(s).getByTestId("chip-icon");await t("Chip should render an icon when `icon` prop is passed",async()=>{a(o).toBeVisible()})}},w={args:{"aria-label":"Selected languages",defaultValue:["english"],items:[{value:"english",label:"English",counter:1247},{value:"spanish",label:"Spanish",counter:892},{value:"french",label:"French",counter:534},{value:"german",label:"German",counter:421},{value:"italian",label:"Italian",counter:287},{value:"portuguese",label:"Portuguese",counter:156}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove English/}),o=u(s).getByTestId("chip-counter");await t("Chip should render a counter when `counter` prop is passed",async()=>{a(o).toBeVisible(),a(o).toHaveTextContent("1247")})}},f={args:{"aria-label":"Selected countries",defaultValue:["ua","gb","it","es","au","br","eg"],items:[{value:"ua",label:"Ukraine",countryFlagCode:"ua"},{value:"gb",label:"United Kingdom",countryFlagCode:"gb"},{value:"it",label:"Italy",countryFlagCode:"it"},{value:"es",label:"Spain",countryFlagCode:"es"},{value:"au",label:"Australia",countryFlagCode:"au"},{value:"br",label:"Brazil",countryFlagCode:"br"},{value:"eg",label:"Egypt",countryFlagCode:"eg"}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove Ukraine/}),o=u(s).getByTestId("chip-country-flag");await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{a(o).toBeVisible()})}},k={args:{"aria-label":"Fancy chips",defaultValue:["counter+icon","counter+flag","icon+flag"],items:[{value:"counter+icon",label:"Icon + Counter",icon:e.jsx(L,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:e.jsx(L,{}),countryFlagCode:"ua"}]},play:async({canvasElement:i})=>{const t=u(i),n=u(t.getByRole("button",{name:"Remove Icon + Flag"}));a(n.getByTestId("chip-icon")).toBeVisible(),a(n.queryByTestId("chip-country-flag")).not.toBeInTheDocument()}},x=["2025-08-15T10:00Z","2025-08-16T12:00Z","2025-08-17T14:00Z"],B={args:{orientation:"vertical","aria-label":"Selected time slots",defaultValue:x,items:x.map(i=>({value:i,label:e.jsx(sa,{weekday:"short",day:"numeric",month:"short",hour:"2-digit",minute:"2-digit",value:i}),dataset:{testid:i}}))},decorators:[i=>e.jsx("div",{style:{width:300,margin:"0 auto"},children:e.jsx(i,{})})],play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByTestId(x[0]),o=n.getByTestId(x[1]),r=n.getByTestId(x[2]);await t("Focus first chip",async()=>{s.focus()}),await t("Arrow down should focus second chip",async()=>{await l.keyboard("{ArrowDown}"),a(o).toHaveFocus()}),await t("Arrow down should focus third chip",async()=>{await l.keyboard("{ArrowDown}"),a(r).toHaveFocus()}),await t("Arrow down should focus first chip",async()=>{await l.keyboard("{ArrowDown}"),a(s).toHaveFocus()}),await t("Arrow up should focus third chip",async()=>{await l.keyboard("{ArrowUp}"),a(r).toHaveFocus()})}},R={render:i=>e.jsxs(g,{gap:"12",children:[e.jsx(m,{...i}),e.jsx(H,{variant:"tertiary",size:"small",onClick:()=>alert("Show all"),children:"Show all"})]})},aa=[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"},{value:"writing",label:"Writing"},{value:"grammar",label:"Grammar"}],ua=[{value:"monday",label:"Monday"},{value:"tuesday",label:"Tuesday"},{value:"wednesday",label:"Wednesday"},{value:"thursday",label:"Thursday"},{value:"friday",label:"Friday"},{value:"saturday",label:"Saturday"},{value:"sunday",label:"Sunday"}],da=[{value:"morning",label:"Morning (6-12)",icon:e.jsx(L,{})},{value:"afternoon",label:"Afternoon (12-18)",icon:e.jsx(Qe,{})},{value:"evening",label:"Evening (18-0)",icon:e.jsx(Xe,{})},{value:"night",label:"Night (0-6)",icon:e.jsx(na,{})}],C={render:function(t){return e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"64",children:[e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"What skills do you want to focus on?"}),e.jsx(m,{"aria-label":"Selected skills",defaultValue:["vocabulary","speaking","listening"],items:aa})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"Which days work best for you?"}),e.jsx(m,{"aria-label":"Selected days",defaultValue:["monday","wednesday","friday"],items:ua})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"What times of day work for you?"}),e.jsx(m,{"aria-label":"Selected times",defaultValue:["morning","afternoon"],items:da})]})]})},play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByRole("button",{name:/Remove Vocabulary/}),o=n.getByRole("button",{name:/Remove Speaking/}),r=n.getByRole("button",{name:/Remove Listening/}),c=n.getByRole("button",{name:/Remove Monday/});await t("Tab once to enter the component",async()=>{await l.tab(),a(s).toHaveFocus()}),await t("Next tab should focus second chips group",async()=>{await l.tab(),a(c).toHaveFocus()}),await t("Shift+Tab should focus first chips group again",async()=>{await l.tab({shift:!0}),a(s).toHaveFocus()}),await t("Right arrow should focus next chip in the group",async()=>{await l.keyboard("{ArrowRight}"),a(o).toHaveFocus()}),await t("Left arrow should focus previous chip in the group",async()=>{await l.keyboard("{ArrowLeft}"),a(s).toHaveFocus()}),await t("Left arrow should focus last chip if first chip is focused",async()=>{await l.keyboard("{ArrowLeft}"),a(r).toHaveFocus()}),await t("Right arrow should focus first chip if last chip is focused",async()=>{await l.keyboard("{ArrowRight}"),a(s).toHaveFocus()}),await t("Focus last chip",async()=>{await l.keyboard("{ArrowLeft}")}),await t("Tab to the next group",async()=>{await l.tab()}),await t("Shift+Tab to return to the first group, the last focused chip should be focused",async()=>{await l.tab({shift:!0}),a(r).toHaveFocus()})}},pa=ra.ul`
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as j}from"./index-Cb9e4tly.js";import{D as p,a as m}from"./DismissibleChips-D8qOUNl1.js";import{F as L,a as Qe,b as Xe,c as na}from"./TokyoUIAvailability7LateNight-TgMFD5Or.js";import{F as ia}from"./TokyoUIEmojiFrowning-DwuiVRut.js";import{F as sa}from"./index-DWSmmBvQ.js";import{L as g}from"./LayoutFlex-BQNwfAZ8.js";import{T as E}from"./Text-Bj4lCtRc.js";import{L as oa}from"./Link-DNHygNgT.js";import{H as la}from"./Heading-O7e38RDd.js";import{d as ra}from"./styled-components.browser.esm-COuAnjOv.js";import{f as ca,r as ea,w as u,e as a,u as l,a as A}from"./index-Dk_MCKuE.js";import{B as H}from"./Button-DixvkhBo.js";import{T as S}from"./Tooltip-_f_f-kTL.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./useControllableState-DKskwY-e.js";import"./createRequiredContext-ChMx7FdN.js";import"./Icon-Dh4gq7rV.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./CountryFlag-BhibdOJ2.js";import"./useMergeRefs-D_RfOOSs.js";import"./TokyoUIClose-thK8sk63.js";import"./VisuallyHidden-CZd13GOS.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./layout-relative.module-uOnIKnjS.js";import"./text-centered-BFb64PJw.js";import"./useHostname-PsilflFC.js";import"./ButtonBase-DTqpenrU.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./index-CC6DAVyL.js";import"./PortalElementProvider-BAqvxZzH.js";import"./index-Cc-bXjHe.js";import"./index-BqT8peiM.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-BV2iXjxm.js";import"./index-2TVOn9du.js";import"./index-DR63UjCN.js";const rt={title:"components/Chips/DismissibleChips",component:m,subcomponents:{DismissibleChipsItem:p},parameters:{layout:"padded",remountable:!0},args:{"aria-label":"Selected skills",defaultValue:["vocabulary","speaking","listening","reading"],onValueChange:ca(),items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},decorators:[function(t,{parameters:n}){const[s,o]=j.useState(0),r=()=>o(c=>c+1);return n.remountable?e.jsxs(g,{gap:"12",justifyContent:"space-between",children:[e.jsx(t,{},s),e.jsx(H,{variant:"ghost",size:"small",onClick:r,dataset:{testid:"reset"},children:"Reset story"})]}):e.jsx(t,{})}],beforeEach:()=>()=>{ea()}},b={play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("button",{name:/Remove Vocabulary/}),r=s.getByRole("button",{name:/Remove Speaking/}),c=s.getByRole("button",{name:/Remove Listening/}),d=s.getByRole("button",{name:/Remove Reading/});await t("Render chips with default values",async()=>{a(o).toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Chip should have accessible name",async()=>{a(o).toHaveAccessibleName("Remove Vocabulary")}),await t("Dismiss chip by clicking dismiss button",async()=>{await l.click(o),a(n.onValueChange).toHaveBeenCalledWith(["speaking","listening","reading"]),a(o).not.toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Dismiss another chip",async()=>{await l.click(r),a(n.onValueChange).toHaveBeenCalledWith(["listening","reading"]),a(o).not.toBeVisible(),a(r).not.toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await l.click(s.getByTestId("reset")),await l.click(i)}};let D;const y={render:function({defaultValue:t,...n}){const[s,o]=j.useState(t);D=o;const r=c=>{var d;o(c),(d=n.onValueChange)==null||d.call(n,c)};return e.jsx(m,{...n,value:s,onValueChange:r})},play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("button",{name:/Remove Vocabulary/}),r=s.getByRole("button",{name:/Remove Speaking/}),c=s.getByRole("button",{name:/Remove Listening/}),d=s.getByRole("button",{name:/Remove Reading/});await t("Render chips with default values",async()=>{a(o).toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Dismiss chip by clicking dismiss button",async()=>{await l.click(o),a(n.onValueChange).toHaveBeenCalledWith(["speaking","listening","reading"]),a(o).not.toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Change the value externally",async()=>{ea(),D(["listening","reading"]),await A(()=>{a(n.onValueChange).not.toHaveBeenCalled(),a(o).not.toBeVisible(),a(r).not.toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()})}),await l.click(s.getByTestId("reset")),await l.click(i)}},h={args:{items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking",disabled:!0},{value:"listening",label:"Listening",disabled:!0},{value:"reading",label:"Reading"}]},play:async({canvasElement:i,step:t,args:n})=>{const o=u(i).getByRole("button",{name:/Remove Speaking/});await t("Disabled chip must have disabled attribute",async()=>{a(o).toBeDisabled()}),await t("Disabled chip must not be clickable",async()=>{await l.click(o),a(n.onValueChange).not.toHaveBeenCalled(),a(o).toBeVisible()})}},v={args:{"aria-label":"Selected availabilities",defaultValue:["morning","afternoon","evening"],items:[{value:"morning",label:"Morning",icon:e.jsx(L,{})},{value:"afternoon",label:"Afternoon",icon:e.jsx(Qe,{})},{value:"evening",label:"Evening",icon:e.jsx(Xe,{})}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove Morning/}),o=u(s).getByTestId("chip-icon");await t("Chip should render an icon when `icon` prop is passed",async()=>{a(o).toBeVisible()})}},w={args:{"aria-label":"Selected languages",defaultValue:["english"],items:[{value:"english",label:"English",counter:1247},{value:"spanish",label:"Spanish",counter:892},{value:"french",label:"French",counter:534},{value:"german",label:"German",counter:421},{value:"italian",label:"Italian",counter:287},{value:"portuguese",label:"Portuguese",counter:156}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove English/}),o=u(s).getByTestId("chip-counter");await t("Chip should render a counter when `counter` prop is passed",async()=>{a(o).toBeVisible(),a(o).toHaveTextContent("1247")})}},f={args:{"aria-label":"Selected countries",defaultValue:["ua","gb","it","es","au","br","eg"],items:[{value:"ua",label:"Ukraine",countryFlagCode:"ua"},{value:"gb",label:"United Kingdom",countryFlagCode:"gb"},{value:"it",label:"Italy",countryFlagCode:"it"},{value:"es",label:"Spain",countryFlagCode:"es"},{value:"au",label:"Australia",countryFlagCode:"au"},{value:"br",label:"Brazil",countryFlagCode:"br"},{value:"eg",label:"Egypt",countryFlagCode:"eg"}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove Ukraine/}),o=u(s).getByTestId("chip-country-flag");await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{a(o).toBeVisible()})}},k={args:{"aria-label":"Fancy chips",defaultValue:["counter+icon","counter+flag","icon+flag"],items:[{value:"counter+icon",label:"Icon + Counter",icon:e.jsx(L,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:e.jsx(L,{}),countryFlagCode:"ua"}]},play:async({canvasElement:i})=>{const t=u(i),n=u(t.getByRole("button",{name:"Remove Icon + Flag"}));a(n.getByTestId("chip-icon")).toBeVisible(),a(n.queryByTestId("chip-country-flag")).not.toBeInTheDocument()}},x=["2025-08-15T10:00Z","2025-08-16T12:00Z","2025-08-17T14:00Z"],B={args:{orientation:"vertical","aria-label":"Selected time slots",defaultValue:x,items:x.map(i=>({value:i,label:e.jsx(sa,{weekday:"short",day:"numeric",month:"short",hour:"2-digit",minute:"2-digit",value:i}),dataset:{testid:i}}))},decorators:[i=>e.jsx("div",{style:{width:300,margin:"0 auto"},children:e.jsx(i,{})})],play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByTestId(x[0]),o=n.getByTestId(x[1]),r=n.getByTestId(x[2]);await t("Focus first chip",async()=>{s.focus()}),await t("Arrow down should focus second chip",async()=>{await l.keyboard("{ArrowDown}"),a(o).toHaveFocus()}),await t("Arrow down should focus third chip",async()=>{await l.keyboard("{ArrowDown}"),a(r).toHaveFocus()}),await t("Arrow down should focus first chip",async()=>{await l.keyboard("{ArrowDown}"),a(s).toHaveFocus()}),await t("Arrow up should focus third chip",async()=>{await l.keyboard("{ArrowUp}"),a(r).toHaveFocus()})}},R={render:i=>e.jsxs(g,{gap:"12",children:[e.jsx(m,{...i}),e.jsx(H,{variant:"tertiary",size:"small",onClick:()=>alert("Show all"),children:"Show all"})]})},aa=[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"},{value:"writing",label:"Writing"},{value:"grammar",label:"Grammar"}],ua=[{value:"monday",label:"Monday"},{value:"tuesday",label:"Tuesday"},{value:"wednesday",label:"Wednesday"},{value:"thursday",label:"Thursday"},{value:"friday",label:"Friday"},{value:"saturday",label:"Saturday"},{value:"sunday",label:"Sunday"}],da=[{value:"morning",label:"Morning (6-12)",icon:e.jsx(L,{})},{value:"afternoon",label:"Afternoon (12-18)",icon:e.jsx(Qe,{})},{value:"evening",label:"Evening (18-0)",icon:e.jsx(Xe,{})},{value:"night",label:"Night (0-6)",icon:e.jsx(na,{})}],C={render:function(t){return e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"64",children:[e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"What skills do you want to focus on?"}),e.jsx(m,{"aria-label":"Selected skills",defaultValue:["vocabulary","speaking","listening"],items:aa})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"Which days work best for you?"}),e.jsx(m,{"aria-label":"Selected days",defaultValue:["monday","wednesday","friday"],items:ua})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"What times of day work for you?"}),e.jsx(m,{"aria-label":"Selected times",defaultValue:["morning","afternoon"],items:da})]})]})},play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByRole("button",{name:/Remove Vocabulary/}),o=n.getByRole("button",{name:/Remove Speaking/}),r=n.getByRole("button",{name:/Remove Listening/}),c=n.getByRole("button",{name:/Remove Monday/});await t("Tab once to enter the component",async()=>{await l.tab(),a(s).toHaveFocus()}),await t("Next tab should focus second chips group",async()=>{await l.tab(),a(c).toHaveFocus()}),await t("Shift+Tab should focus first chips group again",async()=>{await l.tab({shift:!0}),a(s).toHaveFocus()}),await t("Right arrow should focus next chip in the group",async()=>{await l.keyboard("{ArrowRight}"),a(o).toHaveFocus()}),await t("Left arrow should focus previous chip in the group",async()=>{await l.keyboard("{ArrowLeft}"),a(s).toHaveFocus()}),await t("Left arrow should focus last chip if first chip is focused",async()=>{await l.keyboard("{ArrowLeft}"),a(r).toHaveFocus()}),await t("Right arrow should focus first chip if last chip is focused",async()=>{await l.keyboard("{ArrowRight}"),a(s).toHaveFocus()}),await t("Focus last chip",async()=>{await l.keyboard("{ArrowLeft}")}),await t("Tab to the next group",async()=>{await l.tab()}),await t("Shift+Tab to return to the first group, the last focused chip should be focused",async()=>{await l.tab({shift:!0}),a(r).toHaveFocus()})}},pa=ra.ul`
|
|
2
2
|
all: unset;
|
|
3
3
|
list-style: none;
|
|
4
4
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{w as r}from"./componentNames-k0j3gHgH.js";const l="Divider__o9--B",i={Divider:l,"size-small":"size-small__QrAgV","size-large":"size-large__agPv9"},s=({size:e="small"})=>a.jsx("hr",{className:`${i.Divider} ${i[`size-${e}`]}`,"data-preply-ds-component":r.Divider});try{s.displayName="Divider",s.__docgenInfo={description:"",displayName:"Divider",props:{size:{defaultValue:{value:"small"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"
|
|
1
|
+
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{w as r}from"./componentNames-k0j3gHgH.js";const l="Divider__o9--B",i={Divider:l,"size-small":"size-small__QrAgV","size-large":"size-large__agPv9"},s=({size:e="small"})=>a.jsx("hr",{className:`${i.Divider} ${i[`size-${e}`]}`,"data-preply-ds-component":r.Divider});try{s.displayName="Divider",s.__docgenInfo={description:"",displayName:"Divider",props:{size:{defaultValue:{value:"small"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'}]}}}}}catch{}export{s as D};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as s}from"./jsx-runtime-BTJTZTIL.js";import{D as p}from"./Divider-
|
|
1
|
+
import{j as s}from"./jsx-runtime-BTJTZTIL.js";import{D as p}from"./Divider-nt4GwjWS.js";import"./index-ChsGqxH_.js";import"./componentNames-k0j3gHgH.js";const u={title:"Components/Divider",component:p,decorators:[n=>s.jsx("div",{style:{padding:"24px 12px 48px"},children:s.jsx(n,{})})],argTypes:{size:{control:{type:"select",labels:["small","large"]}}}},r={args:{size:"small"}},e={args:{size:"large"}};var a,o,t;r.parameters={...r.parameters,docs:{...(a=r.parameters)==null?void 0:a.docs,source:{originalSource:`{
|
|
2
2
|
args: {
|
|
3
3
|
size: 'small'
|
|
4
4
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-BN6VMYqa.js","./index-Cb9e4tly.js","./_commonjsHelpers-Cpj98o6Y.js","./index-ChsGqxH_.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as c}from"./iframe-
|
|
2
|
+
import{_ as c}from"./iframe-DaGDN8RV.js";import{r as s,e as n}from"./index-Cb9e4tly.js";import{H as p,A as h,C as E,e as d}from"./index-DzhQa_UD.js";import{c as v}from"./client-CYxxc9KC.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-ChsGqxH_.js";import"./jsx-runtime-BTJTZTIL.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";var i=new Map;function R(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let r=s.useRef();return s.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var w=async(e,t,r)=>{let o=await x(t,r);if(R()){o.render(e);return}let{promise:a,resolve:m}=Promise.withResolvers();return o.render(s.createElement(f,{callback:m},e)),a},_=(e,t)=>{let r=i.get(e);r&&(r.unmount(),i.delete(e))},x=async(e,t)=>{let r=i.get(e);return r||(r=v.createRoot(e,t),i.set(e,r)),r},g={code:E,a:h,...p},y=class extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},H=class{constructor(){this.render=async(e,t,r)=>{let o={...g,...t==null?void 0:t.components},a=d;return new Promise((m,l)=>{c(async()=>{const{MDXProvider:u}=await import("./index-BN6VMYqa.js");return{MDXProvider:u}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:u})=>w(n.createElement(y,{showException:l,key:Math.random()},n.createElement(u,{components:o},n.createElement(a,{context:e,docsParameter:t}))),r)).then(()=>m())})},this.unmount=e=>{_(e)}}};export{H as DocsRenderer,g as defaultComponents};
|