@dhasdk/simple-ui 1.0.55 → 1.0.56
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/README.md +4 -2
- package/index.js +1 -1
- package/index.mjs +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -53,6 +53,8 @@ Tooltip
|
|
|
53
53
|
|
|
54
54
|
## Changelog
|
|
55
55
|
|
|
56
|
+
1.0.56 - **`ProgressBar`** fix for z-level when **`showMarkers`** is false
|
|
57
|
+
|
|
56
58
|
1.0.55 - added **`classNameLabel`** to **GroupCheckBox** and **CheckBox**, added remaining **`className...`** props to **ChecKBoxGroup**, added **`customIcons`** prop to both **CheckBox** and **CheckBoxGroup** components.
|
|
57
59
|
|
|
58
60
|
1.0.54 - added **`showMarkers`** and **`classNameMarkerFalse`** to the **ProgressBar** component
|
|
@@ -1339,9 +1341,9 @@ Full list of props below
|
|
|
1339
1341
|
| classNameBorderColor | **`string`** | Yes | **`border-[#305B25]`** | Controls the color of the border around each completed step's circle. |
|
|
1340
1342
|
| classNameFillColor | **`string`** | Yes | **`bg-green-500`**, see notes for **showMarkers** below | Controls the fill color of each completed step's circle. |
|
|
1341
1343
|
| classNameGradient | **`string`** | Yes | **`from-[#305B25] to-[#5AAB46]`** | Controls the colors used in the gradient for the bars between each completed step. |
|
|
1342
|
-
| classNameMarkerFalse | **`string`** | Yes |
|
|
1344
|
+
| classNameMarkerFalse | **`string`** | Yes | **`z-0 -mx-[0.1em] w-full h-2 bg-gray-300 rounded-full`** | The classNames applied to the base div that provides the background (shape and color) to the progress bar. |
|
|
1343
1345
|
| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps ProgressBar for testing purposes |
|
|
1344
|
-
| showMarkers | boolean | Yes | true | Sets whether progress markers or checkboxes are displayed. If set to false, a single long bar w/o individual steps is presented, with the progress indicated by a 2nd bar overlaying the 1st. The overlaying progress bar styling can be changed via the **`classNameFillColor`** prop. Default values for **classNameFillColor** in this use case
|
|
1346
|
+
| showMarkers | boolean | Yes | true | Sets whether progress markers or checkboxes are displayed. If set to false, a single long bar w/o individual steps is presented, with the progress indicated by a 2nd bar overlaying the 1st. The overlaying progress bar styling can be changed via the **`classNameFillColor`** prop. Default values for **classNameFillColor** in this use case is **`z-10 -mx-[0.1em] h-2 bg-blue-300 rounded-full`** |
|
|
1345
1347
|
|
|
1346
1348
|
1. Base CSS Classes
|
|
1347
1349
|
|
package/index.js
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
16.141 11.5718 16.2845 11.7155C16.4282 11.859 16.5 12.0372 16.5 12.25C16.5 12.4628 16.4282 12.641 16.2845
|
|
12
12
|
12.7845C16.141 12.9282 15.9628 13 15.75 13Z`,fill:"#939194"})})]})})}),!b&&t.jsx("div",{className:f("relative -z-10 -mx-[0.1em] flex-1 h-1 bg-gray-300",`${v&&`bg-linear-to-r ${c} from-50%`}`),children:j<s&&j>s-2&&t.jsx("div",{className:"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2",children:t.jsx("svg",{viewBox:"0 0 23 18",className:"size-8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsxs("g",{id:"Arrow",children:[t.jsx("rect",{width:"22.48",height:"18"}),t.jsx("path",{id:"Polygon 1",className:n,d:`M13.452 9.79161C13.9706 9.39128 13.9706 8.60871 13.452
|
|
13
13
|
8.20839L9.61096 5.24354C8.95357 4.73611 7.99993 5.2047 7.99993 6.03514L7.99993
|
|
14
|
-
11.9649C7.99993 12.7953 8.95357 13.2639 9.61096 12.7565L13.452 9.79161Z`})]})})})})]})}):t.jsx("div",{className:f("
|
|
14
|
+
11.9649C7.99993 12.7953 8.95357 13.2639 9.61096 12.7565L13.452 9.79161Z`})]})})})})]})}):t.jsx("div",{className:f("z-0 -mx-[0.1em] w-full h-2 bg-gray-300 rounded-full",w),children:t.jsx("div",{className:f("z-10 -mx-[0.1em] h-2 bg-blue-300 rounded-full",r),style:{width:p}})})})};function m0({className:e}){return console.log("RadioIcon: className = "+e),t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",className:e,children:t.jsx("circle",{cx:"50",cy:"50",r:"35",fill:"currentColor"})})}const f0=({title:e,classNameLabel:s,classNameInput:n,classNameContainer:r,options:d,dataTestId:c})=>{const[a,m]=o.useState(""),i=g=>{m(g)},w=a;return t.jsxs("fieldset",{role:"radiogroup",className:r,"data-testid":c,children:[t.jsx("p",{className:"mb-2",children:e}),d.map(({label:g,value:p,id:L,disabled:j})=>t.jsxs("label",{className:f(`flex mb-2 items-center gap-1 cursor-pointer ${j?"opacity-50 cursor-not-allowed":""}`,s),children:[t.jsx("span",{className:"rounded-full size-4 border border-black flex items-center justify-center",children:p===a&&t.jsx(m0,{className:""})}),t.jsx("input",{id:L,className:"hidden",type:"radio",value:p,disabled:j,checked:w===p,onChange:()=>i(p)})," ",g]},p))]})},g0="data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='arrow_circle_up'%3e%3cmask%20id='mask0_3137_24196'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='24'%20height='24'%3e%3crect%20id='Bounding%20box'%20width='24'%20height='24'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_3137_24196)'%3e%3cpath%20id='search'%20d='M21.7157%2023.6094L13.7733%2015.6788C13.1806%2016.1505%2012.4879%2016.5212%2011.6953%2016.7911C10.9026%2017.0612%2010.0503%2017.1962%209.13843%2017.1962C6.86716%2017.1962%204.94299%2016.4071%203.36592%2014.8288C1.78864%2013.2505%201%2011.3403%201%209.09825C1%206.85598%201.78914%204.94571%203.36743%203.36743C4.94571%201.78914%206.85931%201%209.10822%201C11.3571%201%2013.2673%201.78914%2014.8387%203.36743C16.4104%204.94571%2017.1962%206.85699%2017.1962%209.10127C17.1962%209.99463%2017.0647%2010.8322%2016.8017%2011.614C16.5387%2012.3958%2016.1576%2013.1147%2015.6586%2013.7709L23.6266%2021.7042L21.7157%2023.6094ZM9.12211%2014.5333C10.6341%2014.5333%2011.9141%2014.0044%2012.9619%2012.9465C14.0095%2011.8884%2014.5333%2010.6056%2014.5333%209.09825C14.5333%207.59065%2014.0089%206.30791%2012.9601%205.25001C11.9113%204.19191%2010.6319%203.66286%209.12211%203.66286C7.60123%203.66286%206.31113%204.19191%205.25182%205.25001C4.19252%206.30791%203.66286%207.59065%203.66286%209.09825C3.66286%2010.6056%204.19191%2011.8884%205.25001%2012.9465C6.30831%2014.0044%207.59901%2014.5333%209.12211%2014.5333Z'%20fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",rt="data:image/svg+xml,%3csvg%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='search'%3e%3cmask%20id='mask0_3137_24325'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='30'%20height='30'%3e%3crect%20id='Bounding%20box'%20x='0.5'%20y='0.5'%20width='29'%20height='29'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_3137_24325)'%3e%3cpath%20id='search_2'%20d='M24.4022%2026.3907L16.4598%2018.4601C15.8671%2018.9317%2015.1745%2019.3025%2014.3818%2019.5724C13.5891%2019.8424%2012.7369%2019.9774%2011.825%2019.9774C9.5537%2019.9774%207.62953%2019.1883%206.05246%2017.61C4.47518%2016.0317%203.68654%2014.1216%203.68654%2011.8795C3.68654%209.63723%204.47568%207.72696%206.05397%206.14868C7.63225%204.57039%209.54585%203.78125%2011.7948%203.78125C14.0437%203.78125%2015.9538%204.57039%2017.5253%206.14868C19.0969%207.72696%2019.8827%209.63824%2019.8827%2011.8825C19.8827%2012.7759%2019.7512%2013.6135%2019.4882%2014.3952C19.2252%2015.177%2018.8442%2015.896%2018.3451%2016.5521L26.3132%2024.4854L24.4022%2026.3907ZM11.8087%2017.3146C13.3207%2017.3146%2014.6006%2016.7856%2015.6484%2015.7277C16.6961%2014.6696%2017.2199%2013.3869%2017.2199%2011.8795C17.2199%2010.3719%2016.6955%209.08916%2015.6466%208.03126C14.5978%206.97316%2013.3185%206.44411%2011.8087%206.44411C10.2878%206.44411%208.99767%206.97316%207.93836%208.03126C6.87906%209.08916%206.3494%2010.3719%206.3494%2011.8795C6.3494%2013.3869%206.87845%2014.6696%207.93655%2015.7277C8.99485%2016.7856%2010.2855%2017.3146%2011.8087%2017.3146Z'%20fill='%236A686B'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",h0="data:image/svg+xml,%3csvg%20width='25'%20height='24'%20viewBox='0%200%2025%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='arrow_circle_up'%3e%3cmask%20id='mask0_3137_24331'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='25'%20height='24'%3e%3crect%20id='Bounding%20box'%20x='0.5'%20width='24'%20height='24'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_3137_24331)'%3e%3cpath%20id='close'%20d='M12.4999%2013.5165L7.19154%2018.8249C6.99293%2019.0235%206.74015%2019.1228%206.4332%2019.1228C6.12626%2019.1228%205.87348%2019.0235%205.67487%2018.8249C5.47626%2018.6263%205.37695%2018.3735%205.37695%2018.0665C5.37695%2017.7596%205.47626%2017.5068%205.67487%2017.3082L10.9832%2011.9999L5.67487%206.69154C5.47626%206.49293%205.37695%206.24015%205.37695%205.9332C5.37695%205.62626%205.47626%205.37348%205.67487%205.17487C5.87348%204.97626%206.12626%204.87695%206.4332%204.87695C6.74015%204.87695%206.99293%204.97626%207.19154%205.17487L12.4999%2010.4832L17.8082%205.17487C18.0068%204.97626%2018.2596%204.87695%2018.5665%204.87695C18.8735%204.87695%2019.1263%204.97626%2019.3249%205.17487C19.5235%205.37348%2019.6228%205.62626%2019.6228%205.9332C19.6228%206.24015%2019.5235%206.49293%2019.3249%206.69154L14.0165%2011.9999L19.3249%2017.3082C19.5235%2017.5068%2019.6228%2017.7596%2019.6228%2018.0665C19.6228%2018.3735%2019.5235%2018.6263%2019.3249%2018.8249C19.1263%2019.0235%2018.8735%2019.1228%2018.5665%2019.1228C18.2596%2019.1228%2018.0068%2019.0235%2017.8082%2018.8249L12.4999%2013.5165Z'%20fill='%236A686B'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",jt=o.forwardRef(({className:e,classNameContainer:s,classNameInputContainer:n,classNameListOutput:r,ariaLabel:d="Search",iconLink:c=!1,iconLinkHandler:a,searchableData:m,setSearchResults:i,mobileOnly:w=!1,variant:g,dataTestIdInput:p,dataTestIdResults:L,...j},x)=>{const v=o.useRef(null),b=o.useRef(null),[y,D]=o.useState(""),[S,h]=o.useState(),[V,$]=o.useState(c),[z,N]=o.useState(!1),T=100,O=8,[R,F]=o.useState(`${T}px`);o.useLayoutEffect(()=>{let _=0;const E=()=>{if(!b.current)return;const U=b.current.getBoundingClientRect(),Y=window.visualViewport,Z=Y?.height??window.innerHeight,W=Y?.offsetTop??0,J=Math.max(T,Z+W-U.top-O);F(`${J}px`)},H=()=>{cancelAnimationFrame(_),_=requestAnimationFrame(E)};return H(),window.addEventListener("scroll",H,{passive:!0}),window.addEventListener("resize",H),window.visualViewport?.addEventListener("resize",H),window.visualViewport?.addEventListener("scroll",H),()=>{window.removeEventListener("scroll",H),window.removeEventListener("resize",H),window.visualViewport?.removeEventListener("resize",H),window.visualViewport?.removeEventListener("scroll",H),cancelAnimationFrame(_)}},[]),o.useEffect(()=>{g==="rounded"&&N(!0)},[g]),o.useEffect(()=>{if(!b.current)return;const _=requestAnimationFrame(()=>{const E=new Event("resize");window.dispatchEvent(E)});return()=>cancelAnimationFrame(_)},[S]);const B=_=>{_.key==="Enter"&&(i?M():S&&S.pages[0].path&&(window.location.href=S.pages[0].path))},C=()=>{D(""),h(void 0)};o.useEffect(()=>{$(c)},[c]);function u(_){const E=_.toLowerCase(),H=[];return m.forEach((U,Y)=>{const Z=[];let W=U.content.toLowerCase().indexOf(E);for(;W!==-1;){const J=U.content.substring(W+E.length,W+E.length+15);Z.push({characters:J,index:Y}),W=U.content.toLowerCase().indexOf(E,W+1)}Z.length&&H.push({title:U.title,path:U.path,results:Z})}),{input:_,pages:H}}const k=_=>{const E=_.target.value;if(D(E),!E){h(void 0);return}const H=u(E);h(H)},M=()=>{const _=v.current?.value??"";if(i)if(_.length>0){const E=u(_);i?.(E)}else i({input:"",pages:[{results:[]}]})},l=()=>{a&&a(),$(!1)};return V?t.jsx("span",{className:`w-[52px] h-[50px] p-2 rounded-sm border border-[#6a686b]
|
|
15
15
|
inline-flex flex-col justify-center items-center bg-white`,children:t.jsx("button",{className:"appearance-none p-0 m-0 border-0 flex items-center justify-center align-middle",onClick:()=>l(),"aria-label":"open search bar",children:t.jsx("img",{className:"",src:rt,alt:"search icon"})})}):t.jsxs("span",{className:f(`h-12 md:h-[50px] lg:h-14 flex items-center max-w-full
|
|
16
16
|
relative ${V&&"hidden"}`,s),children:[t.jsxs("span",{className:f(`
|
|
17
17
|
border-[#6a686b] w-[309px] md:w-[334px] lg:w-[350px]
|
package/index.mjs
CHANGED
|
@@ -4938,14 +4938,14 @@ const l0 = ({
|
|
|
4938
4938
|
"div",
|
|
4939
4939
|
{
|
|
4940
4940
|
className: m(
|
|
4941
|
-
"
|
|
4941
|
+
"z-0 -mx-[0.1em] w-full h-2 bg-gray-300 rounded-full",
|
|
4942
4942
|
x
|
|
4943
4943
|
),
|
|
4944
4944
|
children: /* @__PURE__ */ s(
|
|
4945
4945
|
"div",
|
|
4946
4946
|
{
|
|
4947
4947
|
className: m(
|
|
4948
|
-
"z-
|
|
4948
|
+
"z-10 -mx-[0.1em] h-2 bg-blue-300 rounded-full",
|
|
4949
4949
|
r
|
|
4950
4950
|
),
|
|
4951
4951
|
style: { width: h }
|