@oliasoft-open-source/react-ui-library 4.2.6 → 4.2.7
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/404.html +1 -1
- package/dist/assets/{index-0d78a198.css → index-2b7aaa8d.css} +65 -64
- package/dist/assets/{index-26f804a8.js → index-326366e3.js} +37 -37
- package/dist/index.html +1 -1
- package/dist/index.js +13 -1
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/Color-6VNJS4EI-19a3d535.js +1 -0
- package/dist/storybook/assets/DocsRenderer-NNNQARDV-b44c5c3b.js +1 -0
- package/dist/storybook/assets/WithTooltip-4HIR6TLV-62ae405f.js +1 -0
- package/dist/storybook/assets/{accordion-1b587708.js → accordion-168fa7c5.js} +1 -1
- package/dist/storybook/assets/{accordion.stories-41aed20e.js → accordion.stories-0f8af16e.js} +2 -2
- package/dist/storybook/assets/{actions-83a2a04e.js → actions-2d4e1c8e.js} +1 -1
- package/dist/storybook/assets/{actions.stories-a38cd26e.js → actions.stories-81a7cb7a.js} +1 -1
- package/dist/storybook/assets/{afe.stories-a4fbd6ce.js → afe.stories-41970a5c.js} +2 -2
- package/dist/storybook/assets/{badge.stories-1cbf35f9.js → badge.stories-5ce7957f.js} +1 -1
- package/dist/storybook/assets/{blowout.stories-3d16e5ec.js → blowout.stories-ee7f932b.js} +1 -1
- package/dist/storybook/assets/{button-050c998a.js → button-74c97e4a.js} +1 -1
- package/dist/storybook/assets/{button-group-0176fca3.js → button-group-fa895d0c.js} +1 -1
- package/dist/storybook/assets/{button-group.stories-7659a587.js → button-group.stories-22f072b7.js} +1 -1
- package/dist/storybook/assets/{button.stories-5f73ddef.js → button.stories-9b954335.js} +1 -1
- package/dist/storybook/assets/buttons-and-links-0dff29be.js +14 -0
- package/dist/storybook/assets/{card.stories-0437a4e2.js → card.stories-537a1772.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-d5882170.js → casing-loads.stories-d3994990.js} +2 -2
- package/dist/storybook/assets/{cell.stories-0ae4bf08.js → cell.stories-524a7418.js} +2 -2
- package/dist/storybook/assets/{check-box-b38490e5.js → check-box-e21258d5.js} +1 -1
- package/dist/storybook/assets/{check-box.stories-9bf1c260.js → check-box.stories-5f7d06e0.js} +1 -1
- package/dist/storybook/assets/{chunk-HLWAVYOI-555fb35d.js → chunk-HLWAVYOI-591b0bb6.js} +1 -1
- package/dist/storybook/assets/color-f9237a15.js +25 -0
- package/dist/storybook/assets/{column.stories-d5ca2c42.js → column.stories-ae7588c5.js} +1 -1
- package/dist/storybook/assets/{dialog-c036ff34.js → dialog-cd58dd09.js} +1 -1
- package/dist/storybook/assets/{drawer-308b0a03.js → drawer-7f450988.js} +1 -1
- package/dist/storybook/assets/{drawer.stories-d76c0577.js → drawer.stories-948b5e8b.js} +2 -2
- package/dist/storybook/assets/{empty.stories-30fdd793.js → empty.stories-e0e3ac78.js} +1 -1
- package/dist/storybook/assets/{field-248df38c.js → field-a094cd72.js} +1 -1
- package/dist/storybook/assets/{field.stories-60d1a82f.js → field.stories-f1318053.js} +1 -1
- package/dist/storybook/assets/{file-input.stories-ec8a6eba.js → file-input.stories-1f3cfbda.js} +1 -1
- package/dist/storybook/assets/{flex.stories-6a278b40.js → flex.stories-09e9c602.js} +1 -1
- package/dist/storybook/assets/footer.stories-57f07ea2.js +3 -0
- package/dist/storybook/assets/form.stories-d6c8da7e.js +49 -0
- package/dist/storybook/assets/formation.stories-5eeaa826.js +74 -0
- package/dist/storybook/assets/{formatter-SWP5E3XI-38010e15.js → formatter-SWP5E3XI-19153158.js} +2 -2
- package/dist/storybook/assets/{heading-39e599c8.js → heading-d29eb744.js} +1 -1
- package/dist/storybook/assets/{heading.stories-6ff7f5ed.js → heading.stories-9689bddc.js} +1 -1
- package/dist/storybook/assets/{help-icon-c0abd380.js → help-icon-d4189b1b.js} +1 -1
- package/dist/storybook/assets/{help-icon.stories-a30b7058.js → help-icon.stories-15d1620d.js} +1 -1
- package/dist/storybook/assets/icon-e9cbb4d7.js +8 -0
- package/dist/storybook/assets/{icon.stories-466d158f.js → icon.stories-8dae69e1.js} +1 -1
- package/dist/storybook/assets/iframe-bd62c6a5.js +1 -0
- package/dist/storybook/assets/{index-6d024837.js → index-46a3faee.js} +4 -4
- package/dist/storybook/assets/{index.es-37e2ce0d.js → index.es-85cc7dfc.js} +4 -4
- package/dist/storybook/assets/inheritsLoose-d4851ab8.js +1 -0
- package/dist/storybook/assets/{input-05f21b51.js → input-d68625a5.js} +1 -1
- package/dist/storybook/assets/{input-group.stories-602e1e93.js → input-group.stories-a2a3400e.js} +2 -2
- package/dist/storybook/assets/{input-validation-6a52ffa7.js → input-validation-0b57c591.js} +2 -2
- package/dist/storybook/assets/{input.stories-bf58ba7c.js → input.stories-164d93ab.js} +1 -1
- package/dist/storybook/assets/{inputs-95511a4c.js → inputs-e25729fb.js} +2 -2
- package/dist/storybook/assets/{label-e6d15b59.js → label-13d490a3.js} +1 -1
- package/dist/storybook/assets/{label.stories-1c98204a.js → label.stories-427ba162.js} +1 -1
- package/dist/storybook/assets/layout-forms-3fdc3701.js +16 -0
- package/dist/storybook/assets/{layout-general-07b5275e.js → layout-general-eeed1dd7.js} +2 -2
- package/dist/storybook/assets/{list-bc0d9ad9.js → list-31b815b8.js} +1 -1
- package/dist/storybook/assets/list-heading-58edcddc.css +1 -0
- package/dist/storybook/assets/list-heading-5a293d8b.js +1 -0
- package/dist/storybook/assets/{list.stories-c8b4f325.js → list.stories-4850aa29.js} +3 -3
- package/dist/storybook/assets/{list.stories-data-ba40864f.js → list.stories-data-94f7c623.js} +1 -1
- package/dist/storybook/assets/{loader.stories-4e8e8df7.js → loader.stories-6107832a.js} +1 -1
- package/dist/storybook/assets/{menu.stories-8d724757.js → menu.stories-927adf3d.js} +1 -1
- package/dist/storybook/assets/{message-0b5ae3c5.js → message-7e627e60.js} +1 -1
- package/dist/storybook/assets/{message.stories-9b9c40c4.js → message.stories-f41a0c22.js} +1 -1
- package/dist/storybook/assets/{modal.stories-1b13be75.js → modal.stories-0e068cc1.js} +2 -2
- package/dist/storybook/assets/{number-input-cfbd9eb7.js → number-input-7d49b0b3.js} +1 -1
- package/dist/storybook/assets/{number-input.stories-8137782e.js → number-input.stories-02528124.js} +2 -2
- package/dist/storybook/assets/{option-dropdown.stories-4c391727.js → option-dropdown.stories-5030bdb8.js} +1 -1
- package/dist/storybook/assets/{padding-and-spacing-99245558.js → padding-and-spacing-f1ec66a3.js} +2 -2
- package/dist/storybook/assets/{page.stories-8d0476d7.js → page.stories-7cb68fed.js} +1 -1
- package/dist/storybook/assets/{pagination-443065a8.js → pagination-8aade846.js} +1 -1
- package/dist/storybook/assets/{pagination.stories-985230f7.js → pagination.stories-423b4938.js} +2 -2
- package/dist/storybook/assets/{pop-confirm.stories-3016f322.js → pop-confirm.stories-81b30901.js} +1 -1
- package/dist/storybook/assets/{popover-c1234faa.js → popover-06e375a5.js} +1 -1
- package/dist/storybook/assets/popover.stories-f651a81c.js +1 -0
- package/dist/storybook/assets/{preview-016d1252.js → preview-1fbb7fbb.js} +3 -3
- package/dist/storybook/assets/preview-b00886b3.js +1 -0
- package/dist/storybook/assets/projects.stories-222ad869.js +47 -0
- package/dist/storybook/assets/{radio-button-d69b72e4.js → radio-button-135a9615.js} +1 -1
- package/dist/storybook/assets/{radio-button.stories-6ff0dc9b.js → radio-button.stories-0e8377ea.js} +1 -1
- package/dist/storybook/assets/{reservoirs.stories-537002ca.js → reservoirs.stories-8e7035a5.js} +2 -2
- package/dist/storybook/assets/{rich-text-input.stories-383819b4.js → rich-text-input.stories-661f34f1.js} +3 -3
- package/dist/storybook/assets/{row.stories-c12a3e52.js → row.stories-d5b6b4a6.js} +2 -2
- package/dist/storybook/assets/select-205cd538.js +1 -0
- package/dist/storybook/assets/{select.stories-6651d3f2.js → select.stories-60f055e6.js} +2 -2
- package/dist/storybook/assets/{side-bar-10cceacd.js → side-bar-88e8cf41.js} +1 -1
- package/dist/storybook/assets/{side-bar.stories-02211e0d.js → side-bar.stories-2c06f8a6.js} +1 -1
- package/dist/storybook/assets/{site.stories-9486039d.js → site.stories-8b3718ce.js} +2 -2
- package/dist/storybook/assets/slider-160e2152.js +7 -0
- package/dist/storybook/assets/{slider.stories-a55df653.js → slider.stories-79ab0e97.js} +2 -2
- package/dist/storybook/assets/{spacer.stories-a2798d47.js → spacer.stories-38071af8.js} +1 -1
- package/dist/storybook/assets/syntaxhighlighter-NMPM6SWI-dc50bcce.js +1 -0
- package/dist/storybook/assets/{table-134da40b.js → table-da6f6045.js} +1 -1
- package/dist/storybook/assets/{table.stories-8dd2a568.js → table.stories-67a3023a.js} +2 -2
- package/dist/storybook/assets/{table.stories-data-ddbcf8c3.js → table.stories-data-8a836b92.js} +1 -1
- package/dist/storybook/assets/{textarea-5ebdd171.js → textarea-d48efea2.js} +1 -1
- package/dist/storybook/assets/{textarea.stories-02879684.js → textarea.stories-89c8afd7.js} +1 -1
- package/dist/storybook/assets/{title.stories-2ba6aa87.js → title.stories-5b4a226c.js} +2 -2
- package/dist/storybook/assets/{toaster-f096ba56.js → toaster-541ce85b.js} +1 -1
- package/dist/storybook/assets/{toaster.stories-66162195.js → toaster.stories-5e4d95b1.js} +1 -1
- package/dist/storybook/assets/{toggle-f8e1d8f4.js → toggle-01690c44.js} +1 -1
- package/dist/storybook/assets/{toggle.stories-457a497d.js → toggle.stories-bc686ae1.js} +1 -1
- package/dist/storybook/assets/{tooltip-856042a7.js → tooltip-23e84186.js} +1 -1
- package/dist/storybook/assets/{tooltip.stories-666868d0.js → tooltip.stories-e8ba5fff.js} +1 -1
- package/dist/storybook/assets/{tooltip.test-case.stories-4c1ea273.js → tooltip.test-case.stories-9817078b.js} +1 -1
- package/dist/storybook/assets/{top-bar-2c70083e.js → top-bar-a84b9365.js} +1 -1
- package/dist/storybook/assets/{top-bar.stories-bbfb7220.js → top-bar.stories-e93330f0.js} +1 -1
- package/dist/storybook/assets/{top-bar.testcase.stories-1d4c6e3a.js → top-bar.testcase.stories-3a824a14.js} +1 -1
- package/dist/storybook/assets/{tree.stories-729aebd7.js → tree.stories-3422a0bc.js} +1 -1
- package/dist/storybook/assets/{unit-input.stories-b1e6685e.js → unit-input.stories-65984064.js} +1 -1
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/project.json +1 -1
- package/package.json +1 -1
- package/dist/storybook/assets/Color-6VNJS4EI-8248b4eb.js +0 -1
- package/dist/storybook/assets/DocsRenderer-NNNQARDV-7f6ec049.js +0 -1
- package/dist/storybook/assets/WithTooltip-4HIR6TLV-a85e177a.js +0 -1
- package/dist/storybook/assets/buttons-and-links-2c75d84a.js +0 -14
- package/dist/storybook/assets/color-8d2387d7.js +0 -25
- package/dist/storybook/assets/extends-98964cd2.js +0 -1
- package/dist/storybook/assets/footer.stories-50a2e3db.js +0 -3
- package/dist/storybook/assets/form.stories-604e2c2e.js +0 -49
- package/dist/storybook/assets/formation.stories-3c9cd637.js +0 -74
- package/dist/storybook/assets/icon-8acf9925.js +0 -8
- package/dist/storybook/assets/iframe-73d68d2a.js +0 -1
- package/dist/storybook/assets/inheritsLoose-c82a83d4.js +0 -1
- package/dist/storybook/assets/layout-forms-c665280b.js +0 -16
- package/dist/storybook/assets/list-heading-2215213f.js +0 -1
- package/dist/storybook/assets/list-heading-d7e578fa.css +0 -1
- package/dist/storybook/assets/popover.stories-7542a367.js +0 -1
- package/dist/storybook/assets/preview-5c00ba36.js +0 -1
- package/dist/storybook/assets/projects.stories-47d63f05.js +0 -47
- package/dist/storybook/assets/select-d4593fc0.js +0 -1
- package/dist/storybook/assets/slider-5d5442fe.js +0 -7
- package/dist/storybook/assets/syntaxhighlighter-NMPM6SWI-dd81f801.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as r}from"./jsx-runtime-f961835c.js";import{r as d}from"./index-f80c8c95.js";import{c as H}from"./index-a80ed1cf.js";import{D as F}from"./disabled-context-d654f6ff.js";import{i as l}from"./types-332ceaf3.js";import{T as R}from"./tooltip-
|
|
1
|
+
import{j as r}from"./jsx-runtime-f961835c.js";import{r as d}from"./index-f80c8c95.js";import{c as H}from"./index-a80ed1cf.js";import{D as F}from"./disabled-context-d654f6ff.js";import{i as l}from"./types-332ceaf3.js";import{T as R}from"./tooltip-23e84186.js";const S="_inputInTable_jnwnh_1",L="_inputHover_jnwnh_13",M="_inputFocus_jnwnh_18",P="_inputError_jnwnh_25",W="_inputWarning_jnwnh_26",D="_inputDisabled_jnwnh_61",J="_hideScrollbars_jnwnh_67",K="_input_jnwnh_1",X="_isInTable_jnwnh_100",$="_small_jnwnh_124",z="_error_jnwnh_130",B="_warning_jnwnh_147",k="_right_jnwnh_170",A="_groupOrderFirst_jnwnh_173",G="_groupOrderMiddle_jnwnh_174",Q="_groupOrderLast_jnwnh_175",n={inputInTable:S,inputHover:L,inputFocus:M,inputError:P,inputWarning:W,inputDisabled:D,hideScrollbars:J,input:K,isInTable:X,small:$,error:z,warning:B,right:k,groupOrderFirst:A,groupOrderMiddle:G,groupOrderLast:Q},p=e=>`calc((${e} * 0.675em) + (2 * var(--padding-input-x)))`,c=d.forwardRef(({error:e=null,tooltip:a=null,isInTable:i,width:m=void 0,small:f=!1,onChange:_=()=>{},placeholder:g="",value:h="",onKeyPress:b=()=>{},onFocus:y=()=>{},onBlur:v=()=>{},onPaste:w=()=>{},name:I=void 0,type:q="text",tabIndex:V=0,disabled:j=!1,right:x=!1,warning:t=null,groupOrder:u=null,maxTooltipWidth:E=void 0,testId:T=void 0,size:s=null},O)=>{const N=d.useContext(F),C=(()=>{if(u)switch(u){case"first":return n.groupOrderFirst;case"last":return n.groupOrderLast;default:return n.groupOrderMiddle}return""})(),o=m||(s?"auto":"100%");return r.jsx("div",{style:{width:o},className:C,children:r.jsx(R,{error:!!e,warning:!!t,text:a||e||t,enabled:a&&l(a)||e&&l(e)||t&&l(t)||!1,maxWidth:E,display:"block",placement:"bottom-center",children:r.jsx("input",{ref:O,type:q||"text",size:s||20,placeholder:g??"",value:h??"",onChange:_,onKeyPress:b,onFocus:y,onBlur:v,onPaste:w,name:I,tabIndex:V,autoComplete:"off",disabled:j||N,className:H(n.input,e?n.error:t?n.warning:"",x?n.right:"",f?n.small:"",i?n.isInTable:""),style:{width:o},"data-testid":T})})})});try{p.displayName="widthOfCharacters",p.__docgenInfo={description:"",displayName:"widthOfCharacters",props:{}}}catch{}try{c.displayName="Input",c.__docgenInfo={description:"",displayName:"Input",props:{error:{defaultValue:{value:"null"},description:"",name:"error",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},warning:{defaultValue:{value:"null"},description:"",name:"warning",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},tooltip:{defaultValue:{value:"null"},description:"",name:"tooltip",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},name:{defaultValue:{value:"undefined"},description:"",name:"name",required:!1,type:{name:"string"}},type:{defaultValue:{value:"text"},description:"",name:"type",required:!1,type:{name:"string"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"ChangeEventHandler<HTMLInputElement>"}},onKeyPress:{defaultValue:{value:"() => {}"},description:"",name:"onKeyPress",required:!1,type:{name:"KeyboardEventHandler<HTMLInputElement>"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"FocusEventHandler<HTMLInputElement>"}},onBlur:{defaultValue:{value:"() => {}"},description:"",name:"onBlur",required:!1,type:{name:"FocusEventHandler<HTMLInputElement>"}},onPaste:{defaultValue:{value:"() => {}"},description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<HTMLInputElement>"}},small:{defaultValue:{value:"false"},description:"",name:"small",required:!1,type:{name:"boolean"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string | null"}},tabIndex:{defaultValue:{value:"0"},description:"",name:"tabIndex",required:!1,type:{name:"number"}},value:{defaultValue:{value:""},description:"",name:"value",required:!1,type:{name:"TStringNumberNull"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},right:{defaultValue:{value:"false"},description:"",name:"right",required:!1,type:{name:"boolean"}},groupOrder:{defaultValue:{value:"null"},description:"",name:"groupOrder",required:!1,type:{name:"string"}},maxTooltipWidth:{defaultValue:{value:"undefined"},description:"",name:"maxTooltipWidth",required:!1,type:{name:"TStringOrNumber"}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},testId:{defaultValue:{value:"undefined"},description:"",name:"testId",required:!1,type:{name:"string"}},size:{defaultValue:{value:"null"},description:"",name:"size",required:!1,type:{name:"number"}},isInTable:{defaultValue:null,description:"",name:"isInTable",required:!1,type:{name:"boolean"}}}}}catch{}export{c as I};
|
package/dist/storybook/assets/{input-group.stories-602e1e93.js → input-group.stories-a2a3400e.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{T as x}from"./common-types-2c81813f.js";import{I as
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{T as x}from"./common-types-2c81813f.js";import{I as s}from"./input-group-20c3add3.js";import{I as h}from"./input-group-addon-f8f6683a.js";import{I as M}from"./input-d68625a5.js";import{B as C}from"./button-74c97e4a.js";import{M as f}from"./actions-2d4e1c8e.js";import{S as I}from"./select-205cd538.js";import{T as P}from"./tooltip-23e84186.js";import{M as o}from"./types-cc224262.js";import"./index-f80c8c95.js";import"./index-a80ed1cf.js";import"./disabled-context-d654f6ff.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./spinner-a81ebe38.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./badge-20e7ee0b.js";import"./assertThisInitialized-081f9914.js";import"./memoize-one.esm-52518564.js";import"./text-ad1f5f1d.js";import"./select.input-88b6ebab.js";import"./index-3d476d02.js";const ee={title:"Forms/InputGroup",component:s,args:{}},t=i=>e.jsxs(s,{...i,children:[e.jsx(h,{children:"$"}),e.jsx(M,{width:"100%",name:"example",value:"123",onChange:()=>{}}),e.jsx(I,{options:[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{label:"Possums",value:"slugs"}],onChange:()=>{},value:{label:"Monkeys",value:"bananas"},width:"auto",native:!0}),e.jsx(f,{menu:{label:"E-06/degC",trigger:x.DROP_DOWN_BUTTON,small:i.small,sections:[{type:o.OPTION,label:"403.5433",description:"ft",inline:!0,onClick:()=>{}},{type:o.OPTION,label:"0.123",description:"km",inline:!0,onClick:()=>{}},{type:o.OPTION,label:"4842.4608",description:"in",inline:!0,onClick:()=>{}}]}}),e.jsx(C,{name:"example",label:"Confirm",colored:!0,onClick:()=>{}})]}),n=t.bind({}),a=t.bind({});a.args={width:"480px"};const l=t.bind({});l.args={small:!0};const r=()=>e.jsxs(s,{children:[e.jsx(I,{options:[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{label:"Possums",value:"slugs"}],onChange:()=>{},value:{label:"Monkeys",value:"bananas"}}),e.jsx(P,{text:"This is a tooltip",children:e.jsx(C,{name:"example",label:"Confirm",colored:!0,onClick:()=>{},groupOrder:"last"})})]});var u,p,m;n.parameters={...n.parameters,docs:{...(u=n.parameters)==null?void 0:u.docs,source:{originalSource:`args => {
|
|
2
2
|
return <InputGroup
|
|
3
3
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
4
4
|
{...args}>
|
|
@@ -164,4 +164,4 @@ import{j as e}from"./jsx-runtime-f961835c.js";import{T as x}from"./common-types-
|
|
|
164
164
|
<Button name="example" label="Confirm" colored onClick={() => {}} groupOrder="last" />
|
|
165
165
|
</Tooltip>
|
|
166
166
|
</InputGroup>;
|
|
167
|
-
}`,...(y=(O=r.parameters)==null?void 0:O.docs)==null?void 0:y.source}}};const
|
|
167
|
+
}`,...(y=(O=r.parameters)==null?void 0:O.docs)==null?void 0:y.source}}};const ae=["Default","FixedWidth","Small","SelectWithButton"];export{n as Default,a as FixedWidth,r as SelectWithButton,l as Small,ae as __namedExportsOrder,ee as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{M as s,C as n}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{M as s,C as n}from"./index-46a3faee.js";import{NonExistentValue as a,Error as l}from"./select.stories-60f055e6.js";import{u as r}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-bd62c6a5.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-cf68f115.js";import"./select-205cd538.js";import"./index-a80ed1cf.js";import"./common-types-2c81813f.js";import"./disabled-context-d654f6ff.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./tooltip-23e84186.js";import"./index-c89a1915.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./text-ad1f5f1d.js";import"./actions-2d4e1c8e.js";import"./button-74c97e4a.js";import"./spinner-a81ebe38.js";import"./icon-e9cbb4d7.js";import"./tslib.es6-dfef685f.js";import"./badge-20e7ee0b.js";import"./select.input-88b6ebab.js";import"./spacer-54db0620.js";function o(t){const i=Object.assign({h1:"h1",h2:"h2",h3:"h3",p:"p",code:"code",strong:"strong"},r(),t.components);return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Input Validation"}),`
|
|
2
2
|
`,e.jsx(i.h1,{id:"input-validation",children:"Input Validation"}),`
|
|
3
3
|
`,e.jsx(i.h2,{id:"select",children:"Select"}),`
|
|
4
4
|
`,e.jsx(i.h3,{id:"invalid-states",children:"Invalid states"}),`
|
|
@@ -23,4 +23,4 @@ application layer.`}),`
|
|
|
23
23
|
`,e.jsxs(i.p,{children:[`For a 'hard invalid' state (where the value is unusable, but required), it is recommended for the business logic to not
|
|
24
24
|
set a value (use `,e.jsx(i.code,{children:"null"})," or ",e.jsx(i.code,{children:"undefined"}),"), and to set the ",e.jsx(i.code,{children:"error"}),` prop with an appropriate message
|
|
25
25
|
(e.g. "Value is required").`]}),`
|
|
26
|
-
`,e.jsx(n,{of:l})]})}function
|
|
26
|
+
`,e.jsx(n,{of:l})]})}function H(t={}){const{wrapper:i}=Object.assign({},r(),t.components);return i?e.jsx(i,Object.assign({},t,{children:e.jsx(o,t)})):o(t)}export{H as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as b}from"./jsx-runtime-f961835c.js";import{I}from"./input-
|
|
1
|
+
import{j as b}from"./jsx-runtime-f961835c.js";import{I}from"./input-d68625a5.js";import"./index-f80c8c95.js";import"./index-a80ed1cf.js";import"./disabled-context-d654f6ff.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";const{useArgs:L}=__STORYBOOK_MODULE_ADDONS__,F={title:"Forms/Input",component:I,args:{disabled:!1,small:!1,placeholder:"Placeholder"}},t=S=>{const[M,f]=L(),D=T=>{f({value:T.target.value})};return b.jsx(I,{...S,onChange:D})},s=t.bind({}),e=t.bind({});e.args={small:!0};const n=t.bind({});n.args={error:"Error goes here"};const r=t.bind({});r.args={warning:"Warning goes here"};const a=t.bind({});a.args={type:"date",value:"2020-01-01"};var o,g,u;s.parameters={...s.parameters,docs:{...(o=s.parameters)==null?void 0:o.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
4
4
|
updateArgs({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{M as r,C as n}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{M as r,C as n}from"./index-46a3faee.js";import{Default as l}from"./button.stories-9b954335.js";import{Default as a}from"./check-box.stories-5f7d06e0.js";import{Default as c}from"./file-input.stories-1f3cfbda.js";import{Default as d,Date as p}from"./input.stories-164d93ab.js";import{Default as h}from"./number-input.stories-02528124.js";import{Default as u}from"./option-dropdown.stories-5030bdb8.js";import{Default as m}from"./radio-button.stories-0e8377ea.js";import{Native as f,Default as x}from"./select.stories-60f055e6.js";import{Default as j}from"./slider.stories-79ab0e97.js";import{Default as b}from"./textarea.stories-89c8afd7.js";import{Default as g}from"./toggle.stories-bc686ae1.js";import{u as s}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-bd62c6a5.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-cf68f115.js";import"./flex-1d14d86c.js";import"./button-74c97e4a.js";import"./index-a80ed1cf.js";import"./common-types-2c81813f.js";import"./disabled-context-d654f6ff.js";import"./spinner-a81ebe38.js";import"./icon-e9cbb4d7.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./tooltip-23e84186.js";import"./check-box-e21258d5.js";import"./help-icon-d4189b1b.js";import"./input-group-20c3add3.js";import"./input-d68625a5.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./spacer-54db0620.js";import"./message-7e627e60.js";import"./textarea-d48efea2.js";import"./number-input-7d49b0b3.js";import"./index-57d7693e.js";import"./index-54f0d271.js";import"./input-group-addon-f8f6683a.js";import"./select-205cd538.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./text-ad1f5f1d.js";import"./actions-2d4e1c8e.js";import"./badge-20e7ee0b.js";import"./select.input-88b6ebab.js";import"./divider-182aa58c.js";import"./radio-button-135a9615.js";import"./slider-160e2152.js";import"./objectSpread2-fdee9b6d.js";import"./index-c7f280f6.js";import"./toggle-01690c44.js";function i(o){const t=Object.assign({h1:"h1",p:"p",h2:"h2",strong:"strong",ul:"ul",li:"li",code:"code",h3:"h3",a:"a"},s(),o.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Inputs"}),`
|
|
2
2
|
`,e.jsx(t.h1,{id:"inputs",children:"Inputs"}),`
|
|
3
3
|
`,e.jsx(t.p,{children:"React UI Library provides a comprehensive set of user input components."}),`
|
|
4
4
|
`,e.jsx(t.h2,{id:"button",children:"Button"}),`
|
|
@@ -59,4 +59,4 @@ particularly on touch devices.`]}),`
|
|
|
59
59
|
`,e.jsx(n,{of:j}),`
|
|
60
60
|
`,e.jsx(t.h2,{id:"file-input",children:"File Input"}),`
|
|
61
61
|
`,e.jsxs(t.p,{children:["Use a ",e.jsx(t.code,{children:"FileInput"})," when a user needs to upload a file. The ",e.jsx(t.code,{children:"accept"})," prop allows you to restrict the accepted file types."]}),`
|
|
62
|
-
`,e.jsx(n,{of:c})]})}function
|
|
62
|
+
`,e.jsx(n,{of:c})]})}function De(o={}){const{wrapper:t}=Object.assign({},s(),o.components);return t?e.jsx(t,Object.assign({},o,{children:e.jsx(i,o)})):i(o)}export{De as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-f961835c.js";import{c as m}from"./index-a80ed1cf.js";import{I as a}from"./common-types-2c81813f.js";import{H as n}from"./help-icon-
|
|
1
|
+
import{j as t}from"./jsx-runtime-f961835c.js";import{c as m}from"./index-a80ed1cf.js";import{I as a}from"./common-types-2c81813f.js";import{H as n}from"./help-icon-d4189b1b.js";const b="_label_18pfe_1",v="_labelLeft_18pfe_5",x="_icons_18pfe_13",i={label:b,labelLeft:v,icons:x},u=({label:s=null,width:c="auto",helpText:o="",helpTextMaxWidth:p="300px",onClickHelp:r=void 0,lock:e={visible:!1,active:!1,onClick:()=>{},tooltip:"",testId:void 0},info:d,libraryIcon:l,labelLeft:f=!1})=>t.jsx("div",{className:m(i.label,f?i.labelLeft:""),children:t.jsxs("label",{style:{width:c||""},children:[s,t.jsxs("div",{className:i.icons,children:[(o||r)&&t.jsx(n,{text:o,onClick:r,maxWidth:p}),d&&t.jsx(n,{text:d,icon:a.INFO}),e&&e.visible&&e.onClick&&t.jsx(n,{onClick:e.onClick,icon:e.active?a.LOCK:a.UNLOCK,active:e.active,testId:e.testId}),l&&t.jsx(n,{text:(l==null?void 0:l.tooltip)??"",onClick:l.onClick,icon:a.LIBRARY})]})]})});try{u.displayName="Label",u.__docgenInfo={description:"",displayName:"Label",props:{label:{defaultValue:{value:"null"},description:"",name:"label",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},helpText:{defaultValue:{value:""},description:"",name:"helpText",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},helpTextMaxWidth:{defaultValue:{value:"300px"},description:"",name:"helpTextMaxWidth",required:!1,type:{name:"TStringOrNumber"}},width:{defaultValue:{value:"auto"},description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},info:{defaultValue:null,description:"",name:"info",required:!1,type:{name:"string"}},onClickHelp:{defaultValue:{value:"undefined"},description:"",name:"onClickHelp",required:!1,type:{name:"((event?: MouseEvent<HTMLDivElement, MouseEvent>) => void)"}},lock:{defaultValue:{value:`{
|
|
2
2
|
visible: false,
|
|
3
3
|
active: false,
|
|
4
4
|
onClick: () => {},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j}from"./jsx-runtime-f961835c.js";import{r as E}from"./index-f80c8c95.js";import{L as p}from"./label-
|
|
1
|
+
import{j}from"./jsx-runtime-f961835c.js";import{r as E}from"./index-f80c8c95.js";import{L as p}from"./label-13d490a3.js";import"./index-a80ed1cf.js";import"./common-types-2c81813f.js";import"./help-icon-d4189b1b.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";const J={title:"Forms/Label",component:p,args:{label:"Label"}},t=e=>j.jsx(p,{...e}),c=t.bind({}),o=t.bind({});o.args={helpText:"Tooltip goes here"};const r=t.bind({});r.args={onClickHelp:()=>{}};const s=t.bind({});s.args={info:"Info goes here"};const l=()=>{const[e,v]=E.useState(!1),y=()=>v(!e);return j.jsx(p,{label:"Label",lock:{visible:!0,active:e,onClick:y,tooltip:e?"Unlock":"Lock",testId:"testId"}})},a=t.bind({});a.args={libraryIcon:{onClick:()=>{},tooltip:"View in library"}};var i,n,m;c.parameters={...c.parameters,docs:{...(i=c.parameters)==null?void 0:i.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(m=(n=c.parameters)==null?void 0:n.docs)==null?void 0:m.source}}};var d,b,g;o.parameters={...o.parameters,docs:{...(d=o.parameters)==null?void 0:d.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(g=(b=o.parameters)==null?void 0:b.docs)==null?void 0:g.source}}};var L,u,k;r.parameters={...r.parameters,docs:{...(L=r.parameters)==null?void 0:L.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(k=(u=r.parameters)==null?void 0:u.docs)==null?void 0:k.source}}};var I,f,x;s.parameters={...s.parameters,docs:{...(I=s.parameters)==null?void 0:I.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(x=(f=s.parameters)==null?void 0:f.docs)==null?void 0:x.source}}};var S,T,h;l.parameters={...l.parameters,docs:{...(S=l.parameters)==null?void 0:S.docs,source:{originalSource:`() => {
|
|
2
2
|
const [locked, setLocked] = useState(false);
|
|
3
3
|
const handleToggleLock = () => setLocked(!locked);
|
|
4
4
|
return <Label label="Label" lock={{
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import{j as t}from"./jsx-runtime-f961835c.js";import{M as s,C as o}from"./index-46a3faee.js";import{Default as l,LabelOnLeft as p}from"./field.stories-f1318053.js";import{Default as m,LabelsOnLeft as a,Row as h}from"./form.stories-d6c8da7e.js";import{u as n}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-bd62c6a5.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-cf68f115.js";import"./field-a094cd72.js";import"./index-a80ed1cf.js";import"./label-13d490a3.js";import"./common-types-2c81813f.js";import"./help-icon-d4189b1b.js";import"./tooltip-23e84186.js";import"./icon-e9cbb4d7.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./input-d68625a5.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./text-ad1f5f1d.js";import"./select-205cd538.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./actions-2d4e1c8e.js";import"./button-74c97e4a.js";import"./spinner-a81ebe38.js";import"./badge-20e7ee0b.js";import"./select.input-88b6ebab.js";import"./check-box-e21258d5.js";import"./button-group-fa895d0c.js";import"./toggle-01690c44.js";import"./input-group-20c3add3.js";import"./input-group-addon-f8f6683a.js";import"./slider-160e2152.js";import"./objectSpread2-fdee9b6d.js";import"./index-c7f280f6.js";import"./textarea-d48efea2.js";import"./radio-button-135a9615.js";import"./form-row-19dd7f6e.js";function r(i){const e=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code"},n(),i.components);return t.jsxs(t.Fragment,{children:[t.jsx(s,{title:"Layout (Forms)"}),`
|
|
2
|
+
`,t.jsx(e.h1,{id:"layout-forms",children:"Layout (Forms)"}),`
|
|
3
|
+
`,t.jsx(e.h2,{id:"field",children:"Field"}),`
|
|
4
|
+
`,t.jsxs(e.p,{children:["This is a wrapper for any form element with default bottom margin, and props like ",t.jsx(e.code,{children:"label"})," for other default styling."]}),`
|
|
5
|
+
`,t.jsx(o,{of:l}),`
|
|
6
|
+
`,t.jsxs(e.p,{children:["For inline labels, use the ",t.jsx(e.code,{children:"labelLeft"})," prop (and the optional ",t.jsx(e.code,{children:"labelWidth"}),")."]}),`
|
|
7
|
+
`,t.jsx(o,{of:p}),`
|
|
8
|
+
`,t.jsx(e.h2,{id:"stacked",children:"Stacked"}),`
|
|
9
|
+
`,t.jsxs(e.p,{children:["This is the simplest form layout, and works well when horizontal space is limited, or inputs vary in height (e.g. ",t.jsx(e.code,{children:"TextArea"}),")."]}),`
|
|
10
|
+
`,t.jsx(o,{of:m}),`
|
|
11
|
+
`,t.jsx(e.h2,{id:"stacked-with-inline-labels",children:"Stacked with inline labels"}),`
|
|
12
|
+
`,t.jsxs(e.p,{children:["This has the same markup, but with ",t.jsx(e.code,{children:"labelLeft"})," and ",t.jsx(e.code,{children:"labelWidth"})," set on each field."]}),`
|
|
13
|
+
`,t.jsx(o,{of:a}),`
|
|
14
|
+
`,t.jsx(e.h2,{id:"row",children:"Row"}),`
|
|
15
|
+
`,t.jsxs(e.p,{children:["Wrapping a group of form controls in ",t.jsx(e.code,{children:"FormRow"})," arranges them horizontally, and applies default spacing between each item. This works well when vertical space is limited, because inputs will only wrap onto the next line when they need to."]}),`
|
|
16
|
+
`,t.jsx(o,{of:h})]})}function ot(i={}){const{wrapper:e}=Object.assign({},n(),i.components);return e?t.jsx(e,Object.assign({},i,{children:t.jsx(r,i)})):r(i)}export{ot as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{M as r,C as n}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{M as r,C as n}from"./index-46a3faee.js";import{Center as d,SpaceBetween as a,JustifyEnd as c,Column as l}from"./flex.stories-09e9c602.js";import{Default as h,CustomColumnWidth as p,DefaultGap as x,CustomGap as m,Responsive as j}from"./grid.stories-bf68df4a.js";import{Default as u,FixedWidth as f,NoPadding as g,ResponsiveWidth as w}from"./column.stories-ae7588c5.js";import{u as t}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-bd62c6a5.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-cf68f115.js";import"./flex-1d14d86c.js";import"./button-74c97e4a.js";import"./index-a80ed1cf.js";import"./common-types-2c81813f.js";import"./disabled-context-d654f6ff.js";import"./spinner-a81ebe38.js";import"./icon-e9cbb4d7.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./tooltip-23e84186.js";import"./text-ad1f5f1d.js";import"./grid-3b729f81.js";import"./styled-components.browser.esm-416d73e5.js";import"./card-3847c251.js";import"./row-2299f0e7.js";import"./heading-d29eb744.js";import"./help-icon-d4189b1b.js";function s(i){const o=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",h3:"h3"},t(),i.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Layout (General)"}),`
|
|
2
2
|
`,e.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
|
|
3
3
|
`,e.jsx(o.h2,{id:"flex",children:"Flex"}),`
|
|
4
4
|
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Flex"})," component is a basic flexbox wrapper with optional props for ",e.jsx(o.code,{children:"alignItems"}),", ",e.jsx(o.code,{children:"justifyContent"})," and ",e.jsx(o.code,{children:"flexDirection"}),". This is a conveninent way to center items vertically and/or horizontally, to align them to opposite edges, or align them to the far side."]}),`
|
|
@@ -32,4 +32,4 @@ import{j as e}from"./jsx-runtime-f961835c.js";import{M as r,C as n}from"./index-
|
|
|
32
32
|
`,e.jsx(n,{of:g}),`
|
|
33
33
|
`,e.jsx(o.h3,{id:"responsive",children:"Responsive"}),`
|
|
34
34
|
`,e.jsxs(o.p,{children:["To change the layout on smaller devices, you can set props for ",e.jsx(o.code,{children:"widthTablet"})," (up to 992px wide) and/or ",e.jsx(o.code,{children:"widthMobile"})," (up to 575px wide)."]}),`
|
|
35
|
-
`,e.jsx(n,{of:w})]})}function
|
|
35
|
+
`,e.jsx(n,{of:w})]})}function K(i={}){const{wrapper:o}=Object.assign({},t(),i.components);return o?e.jsx(o,Object.assign({},i,{children:e.jsx(s,i)})):s(i)}export{K as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{r as o}from"./index-f80c8c95.js";import{c as C}from"./index-a80ed1cf.js";import{P as ne,D as re,C as te,I as le}from"./index.es-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{r as o}from"./index-f80c8c95.js";import{c as C}from"./index-a80ed1cf.js";import{P as ne,D as re,C as te,I as le}from"./index.es-85cc7dfc.js";import{C as se}from"./card-3847c251.js";import{s as r,N as ie,M as oe,L as ce}from"./list-heading-5a293d8b.js";import{I as w}from"./common-types-2c81813f.js";import{D as B}from"./disabled-context-d654f6ff.js";import{A as G}from"./actions-2d4e1c8e.js";import{B as F}from"./badge-20e7ee0b.js";import{I as T}from"./icon-e9cbb4d7.js";import{L as de}from"./loader-87ec8334.js";const E=({label:a})=>a?e.jsx("span",{className:r.label,children:e.jsx(F,{color:a.color,title:a.value,small:a.small})}):null;try{E.displayName="Label",E.__docgenInfo={description:"",displayName:"Label",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"ILabel"}}}}}catch{}const S=({item:a})=>a.metaCount!==void 0?e.jsx(F,{color:"rgba(0,0,0,0.25)",title:a.metaCount}):null;try{S.displayName="MetaCount",S.__docgenInfo={description:"",displayName:"MetaCount",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"{ metaCount?: number | undefined; }"}}}}}catch{}const R=({item:a,expanding:i})=>{const c=u=>{u.preventDefault(),u.stopPropagation()};return i&&a.active&&a.content?e.jsx("div",{className:r.itemContent,onClick:c,children:a.content}):null};try{R.displayName="ItemContent",R.__docgenInfo={description:"",displayName:"ItemContent",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"{ active?: boolean | undefined; content?: ReactNode; }"}},expanding:{defaultValue:null,description:"",name:"expanding",required:!1,type:{name:"boolean"}}}}}catch{}const A=o.forwardRef(({item:a,index:i},c)=>{const u=o.useContext(B),{actions:x,disabled:f,expanded:g,onClick:b,title:t,name:s,icon:n,testId:m}=a;return e.jsx("div",{ref:p=>{c&&"current"in c&&Array.isArray(c.current)&&i!==void 0&&(c.current[i]=p)},"data-testid":m??null,className:C(r.item,r.heading,f||u?r.disabled:"",b?r.action:""),onClick:p=>{b&&b(p)},title:t,children:e.jsx("div",{children:e.jsxs("div",{className:r.itemHeader,children:[typeof g=="boolean"&&e.jsx("div",{className:C(r.expandIcon,g&&r.expanded),children:e.jsx(T,{icon:w.CHEVRON_RIGHT})}),e.jsx(ie,{name:s,icon:n}),e.jsxs("div",{className:r.right,children:[e.jsx(S,{item:a}),!(f||u)&&x&&e.jsx("div",{className:r.actions,children:e.jsx(G,{actions:a.actions??[]})})]})]})})})});try{A.displayName="ListSubheading",A.__docgenInfo={description:"",displayName:"ListSubheading",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"IListSubheadingItem"}},index:{defaultValue:null,description:"",name:"index",required:!1,type:{name:"number"}}}}}catch{}const ue=(a,i)=>a?{cursor:i.cursor?i.cursor:"",...a.style}:null,H=o.forwardRef(({items:a,expanding:i,invokeEditOnRowClick:c,provided:u,draggable:x},f)=>{const g=o.useContext(B),b=(t,s,n,m,p,y)=>o.createElement("a",{href:n.url,ref:s==null?void 0:s.innerRef,...s.draggableProps,style:ue(s.draggableProps,n),className:C(r.item,n.active?r.active:"",n.disabled||g?r.disabled:"",p?r.action:""),onClick:d=>{if(c&&y&&y.onClick&&y.onClick(d,n.id),n.onClick)return n.onClick(d)},key:t,"data-id":t,title:n.title,"data-testid":n.testId},e.jsxs("div",{ref:d=>{f&&"current"in f&&Array.isArray(f.current)&&t!==void 0&&(f.current[t]=d)},style:{paddingLeft:m},children:[e.jsxs("div",{className:r.itemHeader,children:[x&&e.jsx("div",{className:r.drag,...s.dragHandleProps,children:e.jsx(T,{icon:w.DRAG})}),n.level&&n.level>0?e.jsx("div",{className:r.indentIcon,children:e.jsx(T,{icon:w.INDENT})}):null,e.jsx(E,{label:n.label}),e.jsx(oe,{item:n}),e.jsxs("div",{className:r.right,children:[e.jsx(S,{item:n}),!(n.disabled||g)&&n.actions&&e.jsx("div",{className:r.actions,children:e.jsx(G,{actions:n.actions})})]})]}),e.jsx(R,{item:n,expanding:i})]}));return e.jsxs(e.Fragment,{children:[a.map((t,s)=>{const n=t.type==="Heading",m=t.actions&&t.actions.find(d=>{var V;return d.label&&((V=String(d.label))==null?void 0:V.toLowerCase())==="edit"}),p=!!(m||t.url||t.onClick),y=t.level&&t.level>1?(t.level-1)*20:0;return n?e.jsx(A,{ref:f,item:t,index:s},s):x?e.jsx(ne,{draggableId:t.id+"",index:s,children:d=>b(s,d,t,y,p,m)},t.id):b(s,u,t,y,p,m)}),u.placeholder]})});try{H.displayName="ListRow",H.__docgenInfo={description:"",displayName:"ListRow",props:{draggable:{defaultValue:null,description:"",name:"draggable",required:!1,type:{name:"boolean"}},expanding:{defaultValue:null,description:"",name:"expanding",required:!1,type:{name:"boolean"}},invokeEditOnRowClick:{defaultValue:null,description:"",name:"invokeEditOnRowClick",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((args: { from?: number; to?: number; }) => void) | undefined"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"IListItem[]"}},provided:{defaultValue:null,description:"",name:"provided",required:!1,type:{name:"any"}},snapshot:{defaultValue:null,description:"",name:"snapshot",required:!1,type:{name:"DroppableStateSnapshot"}}}}}catch{}const P=({list:a,bordered:i=!1,expanding:c=!1,narrow:u=!1,toggleNarrow:x=!1,onToggleNarrow:f=()=>{},invokeEditOnRowClick:g=!0,noHeader:b=!1,stickyHeader:t,draggable:s=!1,onListReorder:n=()=>{},marginBottom:m=0,height:p,testId:y,scrollDetails:d={scrollable:!1,hideScrollbar:!1,triggerScrollToActiveItem:!1,infiniteScroll:!1,limit:10,infiniteScrollTarget:void 0}})=>{const{scrollable:V,hideScrollbar:z,triggerScrollToActiveItem:D,infiniteScroll:M,infiniteScrollTarget:J}=d,v=o.useRef(null),_=o.useRef([]),j=o.useRef(null),K=44,O=M?Math.ceil(window.innerHeight/K):a.items.length,[I,Q]=o.useState(O),[U,W]=o.useState(I<(a==null?void 0:a.items.length));o.useEffect(()=>{_.current=_.current.slice(0,a.items.length)},[a.items.length]);const X=()=>{if(I>=a.items.length){W(!1);return}const l=O+I;Q(l)},Y=l=>l.findIndex(h=>h.active===!0),Z=l=>{if(!j.current||!v.current)return;const h=1;if(D&&l>=0){const k=_.current.reduce((L,ee,ae)=>ae<l?L+ee.clientHeight+h:L,0),q=j.current.clientHeight/2-_.current[l].clientHeight/2,N=k-q;if(t){const L=v.current.clientHeight/2;j.current.scrollTop=N+L}const $=v.current.clientHeight;j.current.scrollTop=N+$}};return o.useEffect(()=>{if(D){const l=Y(a==null?void 0:a.items);Z(l)}},[j.current,v.current,D]),e.jsx(re,{onDragEnd:l=>{var q,N;const h=(q=l==null?void 0:l.source)==null?void 0:q.index,k=(N=l==null?void 0:l.destination)==null?void 0:N.index;n({from:h,to:k})},children:e.jsx(te,{droppableId:"droppable",children:(l,h)=>e.jsx("div",{className:C(u?r.narrow:"",V?r.scrollableList:"",z?r.hideScrollbar:""),"data-testid":y,id:"scrollableDiv",style:{height:p,marginBottom:m},ref:j,children:e.jsx("div",{ref:l.innerRef,...l.droppableProps,children:e.jsxs(se,{bordered:i,padding:!1,children:[!b&&e.jsx(ce,{name:a.name,actions:a.actions,toggleNarrow:x,onToggleNarrow:f,stickyHeader:t,ref:v}),e.jsx("div",{className:C(r.list,i?r.bordered:""),children:M?e.jsx(le,{dataLength:I,next:X,hasMore:U,scrollableTarget:J||"scrollableDiv",loader:e.jsx(de,{}),children:e.jsx(H,{draggable:s,items:a.items.slice(0,I),expanding:c,invokeEditOnRowClick:g,onListReorder:n,provided:l,snapshot:h,ref:_})}):e.jsx(H,{draggable:s,items:a.items,expanding:c,invokeEditOnRowClick:g,onListReorder:n,provided:l,snapshot:h,ref:_})})]})})})})})};try{P.displayName="List",P.__docgenInfo={description:"",displayName:"List",props:{drawer:{defaultValue:null,description:"",name:"drawer",required:!1,type:{name:"boolean"}},list:{defaultValue:null,description:"",name:"list",required:!0,type:{name:"IListData"}},bordered:{defaultValue:{value:"false"},description:"",name:"bordered",required:!1,type:{name:"boolean"}},expanding:{defaultValue:{value:"false"},description:"",name:"expanding",required:!1,type:{name:"boolean"}},narrow:{defaultValue:{value:"false"},description:"",name:"narrow",required:!1,type:{name:"boolean"}},toggleNarrow:{defaultValue:{value:"false"},description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onToggleNarrow:{defaultValue:{value:"() => {}"},description:"",name:"onToggleNarrow",required:!1,type:{name:"TEmpty"}},invokeEditOnRowClick:{defaultValue:{value:"true"},description:"",name:"invokeEditOnRowClick",required:!1,type:{name:"boolean"}},noHeader:{defaultValue:{value:"false"},description:"",name:"noHeader",required:!1,type:{name:"boolean"}},stickyHeader:{defaultValue:null,description:"",name:"stickyHeader",required:!1,type:{name:"boolean"}},draggable:{defaultValue:{value:"false"},description:"",name:"draggable",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:{value:"() => {}"},description:"",name:"onListReorder",required:!1,type:{name:"((args: IReorderData) => void)"}},marginBottom:{defaultValue:{value:"0"},description:"",name:"marginBottom",required:!1,type:{name:"string | number"}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:"string | number"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}},scrollDetails:{defaultValue:{value:`{
|
|
2
2
|
scrollable: false,
|
|
3
3
|
hideScrollbar: false,
|
|
4
4
|
triggerScrollToActiveItem: false,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._inputInTable_1qlur_1{background-color:transparent;border-radius:inherit!important;height:var(--size);min-height:100%}._inputInTable_1qlur_1:not(:hover){border-color:transparent}._inputInTable_1qlur_1:not(:focus){box-shadow:none}._inputHover_1qlur_13{position:relative;border-color:var(--color-border-hover);z-index:2}._inputFocus_1qlur_18{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputError_1qlur_25,._inputWarning_1qlur_26{position:relative}._inputError_1qlur_25{z-index:2;border-color:var(--color-border-error);color:var(--color-text-error)!important;background-color:var(--color-background-error-muted)}._inputError_1qlur_25:hover{border-color:var(--color-border-error-hover)!important}._inputError_1qlur_25:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputWarning_1qlur_26{z-index:1;border-color:var(--color-border-warning);color:var(--color-text-warning)!important;background-color:var(--color-background-warning-muted)}._inputWarning_1qlur_26:hover{border-color:var(--color-border-warning-hover)!important}._inputWarning_1qlur_26:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputDisabled_1qlur_61{pointer-events:none;background-color:var(--color-background-disabled);color:var(--color-text-muted);box-shadow:none}._hideScrollbars_1qlur_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbars_1qlur_67::-webkit-scrollbar{display:none}._header_1qlur_77 ._headerTitle_1qlur_77,._heading_1qlur_78 ._itemHeader_1qlur_78{transition:opacity .3s}._narrow_1qlur_81 ._header_1qlur_77 ._headerTitle_1qlur_77,._narrow_1qlur_81 ._heading_1qlur_78 ._itemHeader_1qlur_78{opacity:0}._stickyHeader_1qlur_85{position:sticky;top:0;background-color:var(--color-background);z-index:10}._itemHeader_1qlur_78{padding:var(--padding-xs) var(--padding);display:flex;align-items:flex-start}._itemHeader_1qlur_78 ._title_1qlur_96{margin:0;padding:0;flex-grow:1;min-width:0}._itemHeader_1qlur_78 ._name_1qlur_102{font-weight:400}._itemHeader_1qlur_78 ._iconTooltipMargin_1qlur_105{margin-left:var(--padding-xs)}._itemHeader_1qlur_78 ._bold_1qlur_108{font-weight:700}._header_1qlur_77{padding:var(--padding);display:flex;align-items:center;border-bottom:1px solid var(--color-border)}._toggleNarrow_1qlur_117{margin-right:16px;margin-left:-5px;color:#c8c8c8;transition:all .4s;display:flex;width:22px;justify-content:center}._toggleNarrow_1qlur_117:hover{color:var(--color-text-primary-hover)}._toggleNarrow_1qlur_117:active{color:var(--color-text-primary-active)}._narrow_1qlur_81 ._toggleNarrow_1qlur_117{transform:scaleX(-1)}._drag_1qlur_135{color:var(--color-text-faint);display:flex;align-items:center;justify-content:center;margin-right:var(--padding-xs);margin-left:calc(var(--padding-xs) * -1);margin-top:calc((var(--line-height) - var(--size-sm)) / 2);margin-bottom:calc((var(--line-height) - var(--size-sm)) / 2);cursor:move;height:var(--size-sm);width:var(--size-sm);flex-shrink:0}._drag_1qlur_135:hover{color:var(--color-text-primary-hover)}._drag_1qlur_135:active{color:var(--color-text-primary-active)}._list_1qlur_155{flex-shrink:0;background:var(--color-background)}._list_1qlur_155._bordered_1qlur_159:first-child,._list_1qlur_155._bordered_1qlur_159:first-child>:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}._list_1qlur_155._bordered_1qlur_159:last-child,._list_1qlur_155._bordered_1qlur_159:last-child>:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-bottom:0}._item_1qlur_78{color:inherit;display:block;transition:background-color .2s;position:relative;border-bottom:1px solid var(--color-border);background-color:var(--color-background-raised);transition:background .3s;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}._item_1qlur_78:not(._heading_1qlur_78):after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-top-left-radius:inherit;border-bottom-left-radius:inherit;transition:background .3s,width .3s}._item_1qlur_78._action_1qlur_192{cursor:pointer}._item_1qlur_78._action_1qlur_192:not(._active_1qlur_195):hover{background:var(--color-background-listitem-hover)}._item_1qlur_78._action_1qlur_192:not(._active_1qlur_195):hover:after{width:5px;background:rgba(0,0,0,.1)}._item_1qlur_78._indented_1qlur_202:after{width:3px;background:rgba(0,0,0,.1)}._item_1qlur_78._active_1qlur_195{cursor:default;position:relative;z-index:1;background:var(--color-background-listitem-active)}._item_1qlur_78._active_1qlur_195:after{background:var(--color-background-primary)!important}._item_1qlur_78._disabled_1qlur_215{color:var(--color-text-faint);pointer-events:none}._item_1qlur_78._heading_1qlur_78{color:var(--color-text-muted);background-color:var(--color-background-cardheader)}._item_1qlur_78._heading_1qlur_78._action_1qlur_192:hover{color:var(--color-text-primary-hover)}._item_1qlur_78 ._label_1qlur_226{margin-right:var(--padding-xs);flex-shrink:0;width:var(--size-sm);height:var(--size-sm);margin-top:calc(var(--line-height) / 2 - var(--size-sm) / 2);margin-bottom:calc(var(--line-height) / 2 - var(--size-sm) / 2);display:flex;align-items:center;justify-content:center}._item_1qlur_78 ._details_1qlur_237,._item_1qlur_78 ._metadata_1qlur_238{display:block;width:100%;font-weight:400}._item_1qlur_78 ._metadata_1qlur_238{color:var(--color-text-muted)}._item_1qlur_78 ._itemContent_1qlur_246{padding:0 var(--padding) var(--padding-sm);cursor:auto}._item_1qlur_78 ._itemContent_1qlur_246:empty{padding:inherit}._indentIcon_1qlur_253{color:var(--color-text-faint);flex-shrink:0;margin-right:var(--padding-xxs)}._expandIcon_1qlur_258{flex-shrink:0;position:relative;display:flex;height:var(--line-height);margin-right:var(--padding-xs)}._expandIcon_1qlur_258._expanded_1qlur_265 svg{transform:rotate(90deg)}._right_1qlur_268{margin-left:auto;display:flex;align-items:center;margin-top:calc((var(--line-height) - var(--size-sm)) / 2);margin-bottom:calc((var(--line-height) - var(--size-sm)) / 2);min-height:var(--size-sm)}._actions_1qlur_276{margin-left:var(--padding-xs);display:flex;align-items:center}._scrollableList_1qlur_281{height:100%;overflow-y:auto;scroll-behavior:smooth}._hideScrollbar_1qlur_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbar_1qlur_67::-webkit-scrollbar{display:none}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{B as q}from"./badge-20e7ee0b.js";import{c as m}from"./index-a80ed1cf.js";import{I as g}from"./icon-e9cbb4d7.js";import{T as N}from"./tooltip-23e84186.js";import{r as f}from"./index-f80c8c95.js";import{I as y}from"./common-types-2c81813f.js";import{H as h}from"./heading-d29eb744.js";import{A as x}from"./actions-2d4e1c8e.js";const b="_inputInTable_1qlur_1",I="_inputHover_1qlur_13",T="_inputFocus_1qlur_18",j="_inputError_1qlur_25",w="_inputWarning_1qlur_26",H="_inputDisabled_1qlur_61",V="_hideScrollbars_1qlur_67",v="_header_1qlur_77",C="_headerTitle_1qlur_77",R="_heading_1qlur_78",E="_itemHeader_1qlur_78",k="_narrow_1qlur_81",M="_stickyHeader_1qlur_85",L="_title_1qlur_96",S="_name_1qlur_102",F="_iconTooltipMargin_1qlur_105",W="_bold_1qlur_108",$="_toggleNarrow_1qlur_117",B="_drag_1qlur_135",D="_list_1qlur_155",A="_bordered_1qlur_159",J="_item_1qlur_78",O="_action_1qlur_192",P="_active_1qlur_195",X="_indented_1qlur_202",z="_disabled_1qlur_215",G="_label_1qlur_226",K="_details_1qlur_237",Q="_metadata_1qlur_238",U="_itemContent_1qlur_246",Y="_indentIcon_1qlur_253",Z="_expandIcon_1qlur_258",ee="_expanded_1qlur_265",te="_right_1qlur_268",ae="_actions_1qlur_276",re="_scrollableList_1qlur_281",ne="_hideScrollbar_1qlur_67",r={inputInTable:b,inputHover:I,inputFocus:T,inputError:j,inputWarning:w,inputDisabled:H,hideScrollbars:V,header:v,headerTitle:C,heading:R,itemHeader:E,narrow:k,stickyHeader:M,title:L,name:S,iconTooltipMargin:F,bold:W,toggleNarrow:$,drag:B,list:D,bordered:A,item:J,action:O,active:P,indented:X,disabled:z,label:G,details:K,metadata:Q,itemContent:U,indentIcon:Y,expandIcon:Z,expanded:ee,right:te,actions:ae,scrollableList:re,hideScrollbar:ne},c=({name:a,icon:t,testId:l})=>{const n=t&&e.jsx(g,{icon:t.icon,color:t.color||"#db2828"});return e.jsxs("span",{className:m(r.name,r.bold),"data-testid":l,children:[a,t&&t.tooltip&&t.tooltip.text?e.jsx("span",{className:r.iconTooltipMargin,children:e.jsx(N,{text:t.tooltip.text,maxWidth:"350px",children:n})}):t&&t.icon&&e.jsx("span",{className:r.iconTooltipMargin,children:n})]})};try{c.displayName="Name",c.__docgenInfo={description:"",displayName:"Name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}try{name.displayName="name",name.__docgenInfo={description:"",displayName:"name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const u=({item:a})=>{const{name:t,icon:l,details:n,metadata:i,invalid:s,testId:o}=a;let d=e.jsx(c,{name:t,icon:l,testId:o&&`${o}-name`});return s&&(d=e.jsx(q,{small:!0,margin:"-2px",title:"!",children:d})),e.jsxs("span",{className:r.title,children:[d,n&&e.jsx("span",{className:r.details,"data-testid":o&&`${o}-details`,children:n}),i&&e.jsx("span",{className:r.metadata,"data-testid":o&&`${o}-metadata`,children:i})]})};try{u.displayName="MetaContent",u.__docgenInfo={description:"",displayName:"MetaContent",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"IMetaContentItem"}}}}}catch{}const _=({toggleNarrow:a,onClickToggleNarrow:t})=>a?e.jsx("a",{className:r.toggleNarrow,onClick:t,children:e.jsx(g,{icon:y.CHEVRON_LEFT})}):null;try{_.displayName="ToggleNarrow",_.__docgenInfo={description:"",displayName:"ToggleNarrow",props:{toggleNarrow:{defaultValue:null,description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onClickToggleNarrow:{defaultValue:null,description:"",name:"onClickToggleNarrow",required:!1,type:{name:"TEmpty"}}}}}catch{}const p=f.forwardRef(({name:a,actions:t=[],toggleNarrow:l=!1,onToggleNarrow:n=()=>{},stickyHeader:i},s)=>e.jsxs("div",{ref:s,className:m(r.header,i?r.stickyHeader:""),children:[e.jsx(_,{toggleNarrow:l,onClickToggleNarrow:n}),a&&e.jsx("div",{className:r.headerTitle,children:e.jsx(h,{top:!0,marginBottom:0,children:a})}),e.jsx("div",{className:r.right,children:e.jsx("div",{className:r.actions,children:e.jsx(x,{actions:t})})})]}));try{p.displayName="ListHeading",p.__docgenInfo={description:"",displayName:"ListHeading",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined"}},actions:{defaultValue:{value:"[]"},description:"",name:"actions",required:!1,type:{name:"any[]"}},toggleNarrow:{defaultValue:{value:"false"},description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onToggleNarrow:{defaultValue:{value:"() => {}"},description:"",name:"onToggleNarrow",required:!1,type:{name:"TEmpty"}},stickyHeader:{defaultValue:null,description:"",name:"stickyHeader",required:!1,type:{name:"boolean"}}}}}catch{}export{p as L,u as M,c as N,r as s};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-f961835c.js";import{r as B}from"./index-f80c8c95.js";import{p as k}from"./immer.esm-5c06d4d0.js";import{L as x,a as q}from"./list-
|
|
1
|
+
import{j as o}from"./jsx-runtime-f961835c.js";import{r as B}from"./index-f80c8c95.js";import{p as k}from"./immer.esm-5c06d4d0.js";import{L as x,a as q}from"./list-31b815b8.js";import{L as en}from"./list-heading-5a293d8b.js";import{F as nn}from"./flex-1d14d86c.js";import{l as an,a as tn,b as rn,c as sn,d as on,e as dn,f as mn,g as ln,h as cn,i as pn,j as un,k as gn,m as hn,n as Ye}from"./list.stories-data-94f7c623.js";import"./index-a80ed1cf.js";import"./index.es-85cc7dfc.js";import"./inheritsLoose-d4851ab8.js";import"./redux-10ee6be7.js";import"./objectSpread2-fdee9b6d.js";import"./index-3d476d02.js";import"./memoize-one.esm-52518564.js";import"./icon-e9cbb4d7.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./card-3847c251.js";import"./common-types-2c81813f.js";import"./actions-2d4e1c8e.js";import"./lodash-75c70a11.js";import"./button-74c97e4a.js";import"./spinner-a81ebe38.js";import"./tooltip-23e84186.js";import"./types-cc224262.js";import"./types-332ceaf3.js";import"./badge-20e7ee0b.js";import"./loader-87ec8334.js";import"./heading-d29eb744.js";import"./help-icon-d4189b1b.js";const Gn={title:"Basic/List",component:x,args:{list:an,noHeader:!0},parameters:{layout:"fullscreen"}},s=d=>o.jsx(x,{...d}),O=s.bind({}),L=s.bind({});L.args={list:tn};const D=s.bind({});D.args={list:rn};const v=s.bind({});v.args={list:sn};const K=s.bind({});K.args={list:on,expanding:!0};const H=s.bind({});H.args={list:dn,noHeader:!1};const M=s.bind({});M.args={list:mn};const j=s.bind({});j.args={list:ln};const T=s.bind({});T.args={list:cn};const R=s.bind({});R.args={list:pn};const E=s.bind({});E.args={list:un,noHeader:!1};const N=s.bind({});N.args={bordered:!0};const w=s.bind({});w.args={list:gn};const $=s.bind({});$.args={list:hn};const S=s.bind({});S.args={list:Ye,noHeader:!1,stickyHeader:!0};S.parameters={docs:{story:{inline:!1,iframeHeight:200}}};const f=s.bind({});f.args={list:Ye,scrollDetails:{scrollable:!0}};f.parameters={docs:{description:{story:"Adds an internal scrollbar to the `List`, which will fill its parent height unless a `height` is set. The scrollbar can be toggled using `hideScrollbar`."}}};f.decorators=[d=>o.jsx("div",{style:{height:200,overflow:"hidden"},children:d()})];const J=()=>{const[d,y]=B.useState(0),b={name:"Animals",items:[...Array(50)].map((m,l)=>({id:l,name:`Aardvark #${l+1}`,active:l===d,onClick:()=>y(l)}))};return o.jsx("div",{style:{height:200,overflow:"auto"},children:o.jsx(x,{list:b,scrollDetails:{infiniteScroll:!0,scrollable:!0,limit:10}})})},_=()=>{const d=(e,a)=>{switch(a.type){case"headingClicked":{const{headingKey:t}=a.payload;return k(e,r=>{const i=r[t];i.expanded=!i.expanded})}case"itemClicked":{const{headingKey:t,itemIndex:r}=a.payload;return k(e,i=>{Object.keys(i).forEach(h=>{i[h].items.forEach((A,Ze)=>{A.active=h===t&&Ze===r})})})}case"addClicked":{const{headingKey:t}=a.payload;return k(e,r=>{const i=r[t];i.expanded=!0,i.items.push({name:`${i.label} #${i.items.length+1}`})})}case"deleteClicked":{const{headingKey:t,itemIndex:r}=a.payload;return k(e,i=>{let{items:h}=i[t];delete h[r],i[t].items=h.filter(A=>A)})}default:return e}},y=()=>({mammals:{draggable:!0,name:"Mammals",key:"mammals",label:"Mammals",expanded:!0,items:[{name:"Click item to scroll",type:"Heading"},{name:"Mammal #1",active:!0},{name:"Mammal #2"},{name:"Mammal #3"},{name:"Mammal #4"},{name:"Mammal #5"},{name:"Mammal #6"},{name:"Mammal #7"},{name:"Mammal #8"},{name:"Mammal #9"},{name:"Mammal #10"}]},amphibians:{name:"Amphibians (sticky header)",key:"amphibians",label:"Amphibians",expanded:!0,items:[{name:"Click item to scroll",type:"Heading"},{name:"Amphibian #1",active:!0},{name:"Amphibian #2"},{name:"Amphibian #3"},{name:"Amphibian #4"},{name:"Amphibian #5"},{name:"Amphibian #6"},{name:"Amphibian #7"},{name:"Amphibian #8"},{name:"Amphibian #9"},{name:"Amphibian #10"}]}}),[b,m]=B.useReducer(d,{},()=>y()),[l,u]=B.useState(!1),c=(e,a)=>{u(!0),m({type:"itemClicked",payload:{headingKey:e,itemIndex:a}}),setTimeout(()=>u(!1),0)},p=e=>{m({type:"addClicked",payload:{headingKey:e}})},g=(e,a)=>m({type:"deleteClicked",payload:{headingKey:e,itemIndex:a}}),{mammals:I,amphibians:F}=b,C=e=>({...e,actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>p(e.key)}],items:e.items.map((a,t)=>a.type=="Heading"?{...a,id:t}:{...a,id:t,onClick:()=>c(e.key,t),actions:[{label:"Delete",icon:"delete",onClick:()=>g(e.key,t)}]})}),n=300;return o.jsxs(nn,{gap:!0,children:[o.jsx(x,{list:C(I),bordered:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}}),o.jsx(x,{list:C(F),bordered:!0,stickyHeader:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}})]})},W=()=>{const d=(n,e)=>{switch(e.type){case"headingClicked":{const{headingKey:a}=e.payload;return k(n,t=>{const r=t[a];r.expanded=!r.expanded})}case"itemClicked":{const{headingKey:a,itemIndex:t}=e.payload;return k(n,r=>{Object.keys(r).forEach(i=>{r[i].items.forEach((h,A)=>{h.active=i===a&&A===t})})})}case"addClicked":{const{headingKey:a}=e.payload;return k(n,t=>{const r=t[a];r.expanded=!0,r.items.push({name:`${r.label} #${r.items.length+1}`})})}case"deleteClicked":{const{headingKey:a,itemIndex:t}=e.payload;return k(n,r=>{let{items:i}=r[a];delete i[t],r[a].items=i.filter(h=>h)})}default:return n}},y=()=>({mammals:{key:"mammals",label:"Mammals",expanded:!0,items:[{name:"Aardvark",active:!0},{name:"Kangaroo"}]},amphibians:{key:"amphibians",label:"Amphibians",expanded:!0,items:[{name:"Frog"}]}}),[b,m]=B.useReducer(d,y()),l=n=>m({type:"headingClicked",payload:{headingKey:n}}),u=(n,e)=>m({type:"itemClicked",payload:{headingKey:n,itemIndex:e}}),c=n=>m({type:"addClicked",payload:{headingKey:n}}),p=(n,e)=>m({type:"deleteClicked",payload:{headingKey:n,itemIndex:e}}),{mammals:g,amphibians:I}=b,F=n=>({name:n.label,metaCount:n.items.length,expanded:n.expanded,onClick:()=>l(n.key),actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>c(n.key)}]}),C=n=>({...n,items:n.items.map((e,a)=>({...e,id:a,onClick:()=>u(n.key,a),actions:[{label:"Delete",icon:"delete",onClick:()=>p(n.key,a)}]}))});return o.jsxs(o.Fragment,{children:[o.jsx(en,{name:"Animals"}),o.jsx(q,{item:F(g)}),g.expanded&&o.jsx(x,{noHeader:!0,list:C(g)}),o.jsx(q,{item:F(I)}),I.expanded&&o.jsx(x,{noHeader:!0,list:C(I)})]})},X=()=>{const d=(u,c,p)=>{if(c&&isNaN(c)||p&&isNaN(p)||c===p)return u;const g=[...u];return typeof p=="number"&&typeof c=="number"&&g.splice(p,0,g.splice(c,1)[0]),g},y={name:"List Name",draggable:!0,items:[{id:1,name:"element 1",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:2,name:"Long element name goes here lorem ipsum dolor lorem ipsum dolor",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:3,name:"element 3"},{id:4,name:"element 4",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:5,name:"element 5",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}]},[b,m]=B.useState(y.items),l=u=>{const{to:c,from:p}=u;m(d(b,p,c))};return o.jsx(x,{list:{...y,items:b},draggable:!0,onListReorder:l})};var z,G,P;O.parameters={...O.parameters,docs:{...(z=O.parameters)==null?void 0:z.docs,source:{originalSource:`args => {
|
|
2
2
|
return <List {...args} />;
|
|
3
3
|
}`,...(P=(G=O.parameters)==null?void 0:G.docs)==null?void 0:P.source}}};var Q,U,V;L.parameters={...L.parameters,docs:{...(Q=L.parameters)==null?void 0:Q.docs,source:{originalSource:`args => {
|
|
4
4
|
return <List {...args} />;
|
|
@@ -415,7 +415,7 @@ import{j as o}from"./jsx-runtime-f961835c.js";import{r as B}from"./index-f80c8c9
|
|
|
415
415
|
}]
|
|
416
416
|
}, {
|
|
417
417
|
id: 2,
|
|
418
|
-
name: 'element
|
|
418
|
+
name: 'Long element name goes here lorem ipsum dolor lorem ipsum dolor',
|
|
419
419
|
actions: [{
|
|
420
420
|
label: 'Delete',
|
|
421
421
|
icon: 'delete',
|
|
@@ -454,4 +454,4 @@ import{j as o}from"./jsx-runtime-f961835c.js";import{r as B}from"./index-f80c8c9
|
|
|
454
454
|
...beautifulDnD,
|
|
455
455
|
items: reorderedItems
|
|
456
456
|
}} draggable onListReorder={onListReorder} />;
|
|
457
|
-
}`,...(Ve=(Ue=X.parameters)==null?void 0:Ue.docs)==null?void 0:Ve.source}}};const
|
|
457
|
+
}`,...(Ve=(Ue=X.parameters)==null?void 0:Ue.docs)==null?void 0:Ve.source}}};const Pn=["Default","Actions","Menus","Details","Expanding","Header","Badges","BadgesSmall","Nested","InvalidItems","JSXTitles","Bordered","IconWithTooltip","Metacount","StickyHeader","Scrollable","InfiniteScroll","ScrollToActiveItem","HeadingsManaged","ManagedDragAndDrop"];export{L as Actions,M as Badges,j as BadgesSmall,N as Bordered,O as Default,v as Details,K as Expanding,H as Header,W as HeadingsManaged,w as IconWithTooltip,J as InfiniteScroll,R as InvalidItems,E as JSXTitles,X as ManagedDragAndDrop,D as Menus,$ as Metacount,T as Nested,_ as ScrollToActiveItem,f as Scrollable,S as StickyHeader,Pn as __namedExportsOrder,Gn as default};
|
package/dist/storybook/assets/{list.stories-data-ba40864f.js → list.stories-data-94f7c623.js}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-f961835c.js";import{I as i,T as c}from"./common-types-2c81813f.js";import{F as o}from"./flex-1d14d86c.js";import{M as d}from"./actions-
|
|
1
|
+
import{j as t}from"./jsx-runtime-f961835c.js";import{I as i,T as c}from"./common-types-2c81813f.js";import{F as o}from"./flex-1d14d86c.js";import{M as d}from"./actions-2d4e1c8e.js";import{I as n}from"./icon-e9cbb4d7.js";import{M as l}from"./types-cc224262.js";const a=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Jaguar",disabled:!0}],p=[{id:1,name:"Marsupials",type:"Heading",metaCount:1},{id:2,name:"Aardvark"},{id:3,name:"Kangaroo",active:!0},{id:4,name:"Mammals",type:"Heading",metaCount:1},{id:5,name:"Jaguar"}],g=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Grey",level:1},{id:4,name:"Eastern",level:2},{id:5,name:"Macropus giganteus giganteus",title:"Macropus giganteus giganteus",level:3},{id:6,name:"Macropus giganteus tasmaniensis",title:"Macropus giganteus tasmaniensis",level:3},{id:7,name:"Western",level:2},{id:8,name:"Red",level:1},{id:9,name:"Jaguar"}],h={items:a},r={name:"Animals",actions:[{label:"More",subActions:[{label:"Item",icon:"up",onClick:()=>{}},{label:"Item",icon:"down",onClick:()=>{}}]},{label:"Add",primary:!0,icon:"add",onClick:()=>{}}],items:a},m={...r,items:p},A={...r,name:t.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:["Animals",t.jsx(n,{icon:i.STAR})]}),items:a.map(e=>({...e,name:t.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:[e.name,t.jsx(n,{icon:i.STAR})]})}))};a.map(e=>({...e,actions:[{childComponent:t.jsx(d,{menu:{trigger:c.COMPONENT,component:t.jsx(n,{icon:i.MENU}),placement:"bottom-end",sections:[{type:l.OPTION,label:"Item",onClick:()=>{}},{type:l.OPTION,label:"Item",onClick:()=>{}}]}})}]}));const C={items:a.map(e=>({...e,actions:[{label:"More",subActions:[{label:"Move Up",icon:"up",onClick:()=>{}},{label:"Move Down",icon:"down",onClick:()=>{}}]}]}))},k={items:a.map((e,s)=>({...e,label:{value:String(s+1),color:"var(--color-text-info)"}}))},j={items:a.map(e=>({...e,label:{value:t.jsx(t.Fragment,{children:" "}),color:"var(--color-text-info)",small:!0}}))},T={...m,items:m.items.map((e,s)=>({...e,label:{value:String(s+1),color:"var(--color-text-info)"}}))},f={items:a.map(e=>({...e,actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}))},y={items:a.map((e,s)=>({...e,details:"Description goes here",metadata:"2019-05-03 09:03:51",testId:`story-list-item-${s}`}))},S={items:a.map(e=>({...e,content:t.jsx("div",{children:"Example content element (for show/hide)."})}))},N={items:g},E={items:[...a,{id:4,name:"Dodo",invalid:!0}]},O={items:a.map(e=>({...e,icon:{icon:"success",color:"var(--color-text-success)",tooltip:{text:t.jsx(t.Fragment,{children:"Tooltip goes here"})}}}))},D={items:a.map(e=>({...e,metaCount:3}))},w={name:"Animals",items:[...Array(50)].map((e,s)=>({id:s,name:`Aardvark #${s+1}`}))};export{f as a,C as b,y as c,S as d,r as e,k as f,j as g,N as h,E as i,A as j,O as k,h as l,D as m,w as n,T as o};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{r as N}from"./index-f80c8c95.js";import{a as l}from"./common-types-2c81813f.js";import{L as g}from"./loader-87ec8334.js";import{P as M}from"./progress-bar-40b8dbf0.js";import{S as x}from"./spinner-a81ebe38.js";import{S as m}from"./spacer-54db0620.js";import{B as L}from"./button-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{r as N}from"./index-f80c8c95.js";import{a as l}from"./common-types-2c81813f.js";import{L as g}from"./loader-87ec8334.js";import{P as M}from"./progress-bar-40b8dbf0.js";import{S as x}from"./spinner-a81ebe38.js";import{S as m}from"./spacer-54db0620.js";import{B as L}from"./button-74c97e4a.js";import{C as q}from"./card-3847c251.js";import"./index-a80ed1cf.js";import"./disabled-context-d654f6ff.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";const le={title:"Progress/Loader",component:g,argTypes:{theme:{control:{type:"inline-radio"},options:["white","light","dark"]}},args:{theme:"white",text:"Loading...",width:"100%",height:"100%",fullViewPortSize:!1},decorators:[r=>e.jsx("div",{style:{height:"200px",position:"relative"},children:r()})],parameters:{docs:{source:{excludeDecorators:!0}}}},S=r=>{const{theme:t}=r;return e.jsx(g,{...r,children:e.jsx(x,{dark:t!=="dark"})})},h=r=>{const{theme:t}=r;return e.jsx(g,{...r,children:e.jsx(M,{width:"300px",inverted:t==="dark",percentage:40})})},a=S.bind({});a.args={testId:"story-default-spinner"};const u=h.bind({}),s=S.bind({});s.args={theme:l.LIGHT};const o=S.bind({});o.args={theme:l.DARK,fullViewPortSize:!0};const i=h.bind({});i.args={theme:l.DARK,fullViewPortSize:!0};const n=h.bind({});n.args={details:"Some extra info"};const d=h.bind({});d.args={text:"",details:e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{opacity:.5},children:"Step 1: Lorem ipsum...DONE"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx("div",{children:"Step 2: Dolor est"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx("div",{style:{opacity:.5},children:"Step 3: Compendum"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx(L,{label:"Cancel",onClick:()=>{}})]})};const c=()=>{const[r,t]=N.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.jsx(m,{}),e.jsx(q,{children:e.jsxs("div",{style:{position:"relative"},children:[r&&e.jsx(g,{cover:!0,theme:l.WHITE,children:e.jsx(x,{dark:!0})}),"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)]})})]})};c.parameters={docs:{story:{inline:!1,iframeHeight:400}}};const p=()=>{const[r,t]=N.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.jsx(m,{}),e.jsx(q,{children:e.jsx("div",{style:{position:"relative"},children:r?e.jsx(g,{theme:l.WHITE,height:"200px",children:e.jsx(x,{dark:!0})}):e.jsx("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)})})})]})};p.parameters={docs:{story:{inline:!1,iframeHeight:400}}};var j,v,k;a.parameters={...a.parameters,docs:{...(j=a.parameters)==null?void 0:j.docs,source:{originalSource:`(args: ILoaderProps) => {
|
|
2
2
|
const {
|
|
3
3
|
theme
|
|
4
4
|
} = args;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as s}from"./jsx-runtime-f961835c.js";import{r as cr}from"./index-f80c8c95.js";import{T as W,I as pr}from"./common-types-2c81813f.js";import{M as A}from"./actions-
|
|
1
|
+
import{j as s}from"./jsx-runtime-f961835c.js";import{r as cr}from"./index-f80c8c95.js";import{T as W,I as pr}from"./common-types-2c81813f.js";import{M as A}from"./actions-2d4e1c8e.js";import{B as R}from"./button-74c97e4a.js";import{F as dr}from"./flex-1d14d86c.js";import{m as r,a as mr,b as lr,c as gr,d as ur,e as xr,f as br,g as Sr,h as jr,i as Mr}from"./menu.stories-data-28e27478.js";import"./index-a80ed1cf.js";import"./lodash-75c70a11.js";import"./disabled-context-d654f6ff.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./types-cc224262.js";import"./types-332ceaf3.js";import"./badge-20e7ee0b.js";import"./spinner-a81ebe38.js";const vr={title:"Basic/Menu",component:A,args:{menu:r}},e=a=>s.jsx(A,{...a}),I=e.bind({}),n=e.bind({});n.args={menu:{...r,colored:!0}};const o=e.bind({});o.args={menu:{...r,label:"Delete",colored:"danger"}};const t=e.bind({});t.args={menu:{...r,trigger:W.TEXT}};const i=e.bind({});i.args={menu:{...r,trigger:W.COMPONENT,component:s.jsx(R,{small:!0,colored:!0,round:!0,icon:pr.SETTINGS})}};const c=e.bind({});c.args={menu:mr};const p=e.bind({});p.args={menu:lr};const d=e.bind({});d.args={menu:gr};const m=e.bind({});m.args={menu:ur};const l=e.bind({});l.args={disabled:!0};const g=e.bind({});g.args={tooltip:"Tooltip goes here"};const u=e.bind({});u.args={error:"Error goes here"};const x=e.bind({});x.args={warning:"Warning goes here"};const b=e.bind({});b.args={loading:!0,disabled:!0};const S=e.bind({});S.args={badgeTitle:"3"};const j=e.bind({});j.args={badgeDot:!0};const M=e.bind({});M.args={menu:xr};const T=e.bind({});T.args={menu:br};const C=e.bind({});C.args={closeOnOptionClick:!1};const O=e.bind({});O.args={contextMenu:!0,menu:{...r,trigger:W.TEXT,label:"Right-click me"}};const h=e.bind({});h.args={width:"100%"};const f=e.bind({});f.args={menu:{...r,small:!0}};const D=e.bind({});D.args={menu:Sr};const E=e.bind({});E.args={menu:{...r,sections:s.jsx("div",{children:"Testing"})}};const F=e.bind({});F.args={menu:jr};const k=e.bind({});k.args={menu:Mr};const y=()=>{const[a,B]=cr.useState(!1);return s.jsxs(dr,{gap:!0,children:[s.jsx(A,{menu:r,open:a,setOpen:B}),s.jsx(R,{label:"Open",onClick:()=>B(!0),disabled:a}),s.jsx(R,{label:"Close",onClick:()=>B(!1),disabled:!a})]})};var X,w,J;I.parameters={...I.parameters,docs:{...(X=I.parameters)==null?void 0:X.docs,source:{originalSource:`args => <Menu
|
|
2
2
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
3
3
|
{...args} />`,...(J=(w=I.parameters)==null?void 0:w.docs)==null?void 0:J.source}}};var L,P,v;n.parameters={...n.parameters,docs:{...(L=n.parameters)==null?void 0:L.docs,source:{originalSource:`args => <Menu
|
|
4
4
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{r as S}from"./index-f80c8c95.js";import{c as l}from"./index-a80ed1cf.js";import{I as r}from"./common-types-2c81813f.js";import{I as c}from"./icon-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{r as S}from"./index-f80c8c95.js";import{c as l}from"./index-a80ed1cf.js";import{I as r}from"./common-types-2c81813f.js";import{I as c}from"./icon-e9cbb4d7.js";const E="_inputInTable_s49vk_1",b="_inputHover_s49vk_13",j="_inputFocus_s49vk_18",R="_inputError_s49vk_25",T="_inputWarning_s49vk_26",C="_inputDisabled_s49vk_61",y="_hideScrollbars_s49vk_67",D="_container_s49vk_83",O="_block_s49vk_101",G="_info_s49vk_104",w="_success_s49vk_108",A="_warning_s49vk_112",F="_error_s49vk_116",L="_content_s49vk_120",W="_heading_s49vk_124",V="_icon_s49vk_131",z="_dismiss_s49vk_139",H="_absolute_s49vk_143",U="_legendToggle_s49vk_155",q="_detailsText_s49vk_165",M="_footer_s49vk_169",n={inputInTable:E,inputHover:b,inputFocus:j,inputError:R,inputWarning:T,inputDisabled:C,hideScrollbars:y,container:D,block:O,info:G,success:w,warning:A,error:F,content:L,heading:W,icon:V,dismiss:z,absolute:H,legendToggle:U,detailsText:q,footer:M};var i=(s=>(s.INFO="Info",s.SUCCESS="Success",s.WARNING="Warning",s.ERROR="Error",s))(i||{}),d=(s=>(s.TOGGLE_DETAILS="TOGGLE_DETAILS",s))(d||{});const a=({type:s,onClose:t,isInToast:o})=>e.jsx("div",{className:l(n.dismiss,o?n.absolute:"",s===i.INFO?n.info:s===i.SUCCESS?n.success:s===i.WARNING?n.warning:s===i.ERROR?n.error:null),children:e.jsx(c,{icon:r.CLOSE,onClick:t})});try{a.displayName="Dismiss",a.__docgenInfo={description:"",displayName:"Dismiss",props:{type:{defaultValue:null,description:"",name:"type",required:!0,type:{name:"string"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"TFunction"}},isInToast:{defaultValue:null,description:"",name:"isInToast",required:!1,type:{name:"boolean"}}}}}catch{}const B={detailsVisible:!1},J=(s,t)=>{switch(t.type){case d.TOGGLE_DETAILS:return{...s,detailsVisible:!s.detailsVisible};default:return s}},K=({details:s,visible:t,dispatch:o})=>e.jsxs("div",{children:[e.jsx("div",{className:l(n.legendToggle),onClick:o,children:t?"Hide details":"Show details"}),t?e.jsx("div",{className:n.detailsText,children:s}):null]}),P=({type:s})=>{switch(s){case i.SUCCESS:return e.jsx(c,{icon:r.SUCCESS,size:16});case i.WARNING:return e.jsx(c,{icon:r.WARNING,size:16});case i.ERROR:return e.jsx(c,{icon:r.ERROR,size:16});default:return e.jsx(c,{icon:r.INFO,size:16})}},v=({message:s})=>{const{visible:t,type:o=i.INFO,icon:g,heading:_,content:h,details:u,footer:p,withDismiss:x,onClose:f,width:m,maxHeight:k}=s,[I,N]=S.useReducer(J,B);return e.jsx(e.Fragment,{children:t?e.jsxs("div",{className:l(n.container,m?n.block:null,o===i.SUCCESS?n.success:o===i.WARNING?n.warning:o===i.ERROR?n.error:n.info),style:{width:m,maxHeight:k},children:[e.jsx("div",{children:g?e.jsx("div",{className:n.icon,children:e.jsx(P,{type:o})}):null}),e.jsxs("div",{className:n.content,children:[_?e.jsx("div",{className:n.heading,children:_}):null,e.jsx("div",{children:h}),u?e.jsx(K,{details:u,visible:I.detailsVisible,dispatch:()=>N({type:d.TOGGLE_DETAILS})}):null,!!p&&e.jsx("div",{className:n.footer,children:p})]}),x?e.jsx(a,{type:o,onClose:f}):null]}):null})};try{v.displayName="Message",v.__docgenInfo={description:"",displayName:"Message",props:{message:{defaultValue:null,description:"",name:"message",required:!0,type:{name:"IMessage"}}}}}catch{}export{a as D,i as M,v as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{a,M as n}from"./message-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{a,M as n}from"./message-7e627e60.js";import{B as y}from"./button-74c97e4a.js";import{G as P}from"./grid-3b729f81.js";import"./index-f80c8c95.js";import"./index-a80ed1cf.js";import"./common-types-2c81813f.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./spinner-a81ebe38.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./styled-components.browser.esm-416d73e5.js";const{useArgs:Y}=__STORYBOOK_MODULE_ADDONS__,k={visible:!0,heading:void 0,content:"Here is some info",withDismiss:!1,icon:!1,details:void 0,maxHeight:void 0,type:n.INFO},pe={title:"Basic/Message",component:a,args:{...k},argTypes:{heading:{control:{type:"text"}},details:{control:{type:"text"}}}},s=m=>{const[z,C]=Y(),c=()=>{C({visible:!1}),setTimeout(()=>{C({visible:!0})},1e3)};return e.jsxs(P,{gap:!0,children:[e.jsx(a,{message:{...m,onClose:c,type:n.INFO}}),e.jsx(a,{message:{...m,onClose:c,type:n.ERROR}}),e.jsx(a,{message:{...m,onClose:c,type:n.WARNING}}),e.jsx(a,{message:{...m,onClose:c,type:n.SUCCESS}})]})},u=s.bind({}),o=s.bind({});o.args={heading:"Message Heading"};const r=s.bind({});r.args={icon:!0};const t=s.bind({});t.args={details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mi ac quam condimentum blandit at sit amet lectus. Nullam volutpat erat maximus, venenatis nisl sed, aliquam libero."};const g=s.bind({});g.args={type:n.ERROR,icon:!0,content:"Unable to sync because connection settings are not set.",footer:e.jsxs(e.Fragment,{children:[e.jsx(y,{small:!0,label:"Edit connection settings",colored:"primary"},"edit-settings"),e.jsx(y,{small:!0,label:"Cancel sync"},"cancel-sync"),","]})};const l=s.bind({});l.args={width:"100%"};const i=s.bind({});i.args={width:"300px"};const p=s.bind({});p.args={maxHeight:"100px",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)};const d=s.bind({});d.args={withDismiss:!0,onClose:()=>{}};var M,h,T;u.parameters={...u.parameters,docs:{...(M=u.parameters)==null?void 0:M.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
const handleClose = () => {
|
|
4
4
|
updateArgs({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{r as G}from"./index-f80c8c95.js";import{T as Y}from"./common-types-2c81813f.js";import{M,D as R}from"./dialog-
|
|
1
|
+
import{j as e}from"./jsx-runtime-f961835c.js";import{r as G}from"./index-f80c8c95.js";import{T as Y}from"./common-types-2c81813f.js";import{M,D as R}from"./dialog-cd58dd09.js";import{B as o}from"./button-74c97e4a.js";import{P as q}from"./popover-06e375a5.js";import{I as U}from"./input-d68625a5.js";import{I as z}from"./input-group-20c3add3.js";import{F as v}from"./field-a094cd72.js";import{M as J}from"./actions-2d4e1c8e.js";import{S as Q}from"./select-205cd538.js";import{S as X}from"./spacer-54db0620.js";import{T as Z}from"./tooltip-23e84186.js";import{M as x}from"./types-cc224262.js";import"./index-a80ed1cf.js";import"./portal-03fe4689.js";import"./index-3d476d02.js";import"./lodash-75c70a11.js";import"./heading-d29eb744.js";import"./help-icon-d4189b1b.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./spinner-a81ebe38.js";import"./types-332ceaf3.js";import"./label-13d490a3.js";import"./badge-20e7ee0b.js";import"./assertThisInitialized-081f9914.js";import"./memoize-one.esm-52518564.js";import"./text-ad1f5f1d.js";import"./select.input-88b6ebab.js";const{useArgs:$}=__STORYBOOK_MODULE_ADDONS__,_e={title:"Modals/Modal",component:M,args:{visible:!0,centered:!0,width:"300px",heading:"Are you sure?",content:e.jsx(e.Fragment,{children:"This will complete the transaction"}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Okay",colored:!0,onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),onClose:()=>{}},parameters:{docs:{story:{inline:!1,iframeHeight:400}}}},n=()=>{const[{visible:g,centered:p,...b},l]=$(),r=()=>{l({visible:!g})};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:g,centered:p,children:e.jsx(R,{dialog:{...b,onClose:r}})}),e.jsx(o,{label:"Open Modal",onClick:r})]})},m=n.bind({}),s=n.bind({});s.args={centered:!0};const a=n.bind({});a.args={content:["This is a","new line!"]};const t=n.bind({});t.args={scroll:!0,content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const i=n.bind({});i.args={width:"100%",content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const d=n.bind({});d.args={contentPadding:0};const c=n.bind({});c.args={content:e.jsxs(e.Fragment,{children:[e.jsx(Z,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(X,{}),e.jsx(v,{label:"Custom Select",helpText:"Select an animal",children:e.jsx(Q,{name:"example",options:["Aardvarks","Kangaroos","Monkeys","Possums","Gorilla","Puma","Patagonian Mara","Tarsier","Koala","Panda","Red Panda","Impala","Tiger","Crocodile","Bat"],onChange:()=>{},value:"Monkeys",error:"Bad value"})}),e.jsx(v,{label:"Nested Menu",children:e.jsx(J,{maxHeight:"240px",menu:{label:"Menu",trigger:Y.DROP_DOWN_BUTTON,sections:[{type:x.MENU,menu:{trigger:"Text",label:"Children",sections:[...Array(100).keys()].map(()=>({type:"Option",label:Math.random().toString(36).substring(7),onClick:()=>{}}))}},...[...Array(100).keys()].map(()=>({type:x.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.jsx(q,{content:e.jsxs(z,{small:!0,children:[e.jsx(U,{value:"Value",width:"150px",error:"Bad value"}),e.jsx(o,{colored:!0,label:"Save",onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),children:e.jsx(o,{colored:!0,label:"Toggle me",onClick:()=>{}})})]})};const u=()=>{const[g,p]=G.useState(!1),b=()=>{p(!0)},l=()=>{p(!1)},r=()=>{console.log("Submit action"),l()};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:g,onEnter:()=>{console.log("Enter"),r()},onEscape:()=>{console.log("Escape"),l()},children:e.jsx(R,{dialog:{heading:"Test key handling",content:e.jsx(U,{}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Done",colored:"red",onClick:r}),e.jsx(o,{label:"Cancel",onClick:l})]}),onClose:l}})}),e.jsx(o,{label:"Open Modal",onClick:b})]})};var C,h,j;m.parameters={...m.parameters,docs:{...(C=m.parameters)==null?void 0:C.docs,source:{originalSource:`() => {
|
|
2
2
|
const [{
|
|
3
3
|
visible,
|
|
4
4
|
centered,
|
|
@@ -170,4 +170,4 @@ import{j as e}from"./jsx-runtime-f961835c.js";import{r as G}from"./index-f80c8c9
|
|
|
170
170
|
</Modal>
|
|
171
171
|
<Button label="Open Modal" onClick={openModal} />
|
|
172
172
|
</>;
|
|
173
|
-
}`,...(W=(V=u.parameters)==null?void 0:V.docs)==null?void 0:W.source}}};const
|
|
173
|
+
}`,...(W=(V=u.parameters)==null?void 0:V.docs)==null?void 0:W.source}}};const Fe=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers","KeyHandle"];export{s as Centered,m as Default,i as FullWidth,u as KeyHandle,a as LineBreak,d as NoContentPadding,t as Scroll,c as WithPopoverLayers,Fe as __namedExportsOrder,_e as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as F}from"./jsx-runtime-f961835c.js";import{r as m}from"./index-f80c8c95.js";import{d as g}from"./index-57d7693e.js";import{l as H}from"./lodash-75c70a11.js";import{I as L}from"./input-
|
|
1
|
+
import{j as F}from"./jsx-runtime-f961835c.js";import{r as m}from"./index-f80c8c95.js";import{d as g}from"./index-57d7693e.js";import{l as H}from"./lodash-75c70a11.js";import{I as L}from"./input-d68625a5.js";const M=e=>e?typeof e=="string"?e:H.isArray(e)?e[0]:e.fieldName:"",y=({name:e,placeholder:v="",disabled:V=!1,error:f=!1,left:b=!1,small:q=!1,width:E="100%",value:r="",onChange:I=()=>{},onFocus:N=()=>{},tabIndex:h=0,testId:x,tooltip:S=null,warning:_=!1,validationCallback:n=()=>{},allowEmpty:w=!1,isInTable:T,groupOrder:C})=>{const[O,d]=m.useState(r),[R,u]=m.useState(null),t=M(e),c=l=>{let a=g.validateNumber(l);return w&&l===""||a.valid?{...a,valid:!0,errors:void 0}:a};m.useEffect(()=>{const{valid:l,errors:a}=c(r);if(d(r),l)u(null),n(t,null);else{const i=a&&a.length?a[0]:null;u(i),n(t,i)}},[r,f]);const j=l=>{const a=l.target,{value:i}=a,s=g.cleanNumStr(i.replaceAll(" ","").replaceAll("|","")),{valid:A,errors:p}=c(s);if(A){const o={...l,target:{...l.target,value:s,name:t}};I(o),d(s),u(null),n(t,null)}else{d(s);const o=p&&p.length?p[0]:null;u(o),n(t,o)}};return F.jsx(L,{type:"text",name:t,testId:x,disabled:V,placeholder:v,value:O,onChange:j,onFocus:N,error:f||R,warning:_,right:!b,small:q,width:E,isInTable:T,groupOrder:C,tabIndex:h,tooltip:S},t)};try{y.displayName="NumberInput",y.__docgenInfo={description:"",displayName:"NumberInput",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string | { fieldName: string; }"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},error:{defaultValue:{value:"false"},description:"",name:"error",required:!1,type:{name:"string | boolean"}},left:{defaultValue:{value:"false"},description:"",name:"left",required:!1,type:{name:"boolean"}},small:{defaultValue:{value:"false"},description:"",name:"small",required:!1,type:{name:"boolean"}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},value:{defaultValue:{value:""},description:"",name:"value",required:!1,type:{name:"TStringOrNumber"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"((evt: ChangeEvent<HTMLInputElement>) => void)"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"((evt: FocusEvent<HTMLInputElement, Element>) => void)"}},tabIndex:{defaultValue:{value:"0"},description:"",name:"tabIndex",required:!1,type:{name:"number"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}},tooltip:{defaultValue:{value:"null"},description:"",name:"tooltip",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},warning:{defaultValue:{value:"false"},description:"",name:"warning",required:!1,type:{name:"string | boolean"}},validationCallback:{defaultValue:{value:"() => {}"},description:"",name:"validationCallback",required:!1,type:{name:"((name: string | { fieldName: string; }, error: string | null) => void)"}},allowEmpty:{defaultValue:{value:"false"},description:"",name:"allowEmpty",required:!1,type:{name:"boolean"}},isInTable:{defaultValue:null,description:"",name:"isInTable",required:!1,type:{name:"boolean"}},groupOrder:{defaultValue:null,description:"",name:"groupOrder",required:!1,type:{name:"any"}}}}}catch{}export{y as N};
|
package/dist/storybook/assets/{number-input.stories-8137782e.js → number-input.stories-02528124.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as r}from"./jsx-runtime-f961835c.js";import{N as c}from"./number-input-
|
|
1
|
+
import{j as r}from"./jsx-runtime-f961835c.js";import{N as c}from"./number-input-7d49b0b3.js";import{I as J}from"./input-group-20c3add3.js";import{I as P}from"./input-group-addon-f8f6683a.js";import{S as Q}from"./select-205cd538.js";import"./index-f80c8c95.js";import"./index-57d7693e.js";import"./index-54f0d271.js";import"./lodash-75c70a11.js";import"./input-d68625a5.js";import"./index-a80ed1cf.js";import"./disabled-context-d654f6ff.js";import"./types-332ceaf3.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./common-types-2c81813f.js";import"./index-c89a1915.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./text-ad1f5f1d.js";import"./actions-2d4e1c8e.js";import"./button-74c97e4a.js";import"./spinner-a81ebe38.js";import"./icon-e9cbb4d7.js";import"./tslib.es6-dfef685f.js";import"./badge-20e7ee0b.js";import"./select.input-88b6ebab.js";const{useArgs:V}=__STORYBOOK_MODULE_ADDONS__,fe={title:"Forms/NumberInput",component:c,parameters:{canvas:{page:null}},args:{label:"Label"}},e=Y=>{const[X,k]=V(),q=z=>{k({value:z.target.value})};return r.jsx(c,{onChange:q,value:123,...Y})},l=e.bind({}),a=e.bind({});a.args={small:!0};const n=e.bind({});n.args={width:"150px"};const t=e.bind({});t.args={left:!0};const s=e.bind({});s.args={disabled:!0};const u=e.bind({});u.args={allowEmpty:!0,value:""};const o=e.bind({});o.args={warning:"This input number is almost 100!",value:"99"};const p=e.bind({});p.args={error:"This is a error message"};const g=e.bind({});g.args={value:"123test"};const m=()=>r.jsxs(J,{small:!0,children:[r.jsx(c,{value:123}),r.jsx(P,{children:"to"}),r.jsx(c,{value:123}),r.jsx(Q,{options:[{value:"units",label:"units"}],width:"auto",value:"units"})]});var d,i,v;l.parameters={...l.parameters,docs:{...(d=l.parameters)==null?void 0:d.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
4
4
|
updateArgs({
|
|
@@ -78,4 +78,4 @@ import{j as r}from"./jsx-runtime-f961835c.js";import{N as c}from"./number-input-
|
|
|
78
78
|
value: 'units',
|
|
79
79
|
label: 'units'
|
|
80
80
|
}]} width="auto" value="units" />
|
|
81
|
-
</InputGroup>`,...(U=(K=m.parameters)==null?void 0:K.docs)==null?void 0:U.source}}};const
|
|
81
|
+
</InputGroup>`,...(U=(K=m.parameters)==null?void 0:K.docs)==null?void 0:U.source}}};const xe=["Default","Small","Width","Left","Disabled","AllowEmpty","Warning","Error","BadInput","TestInputGroup"];export{u as AllowEmpty,g as BadInput,l as Default,s as Disabled,p as Error,t as Left,a as Small,m as TestInputGroup,o as Warning,n as Width,xe as __namedExportsOrder,fe as default};
|