@dotss/ui 0.0.10 → 0.0.11

package/Select/Select.es.js

@@ -1,12 +1,12 @@
-import { jsxs as k, jsx as u } from "@emotion/react/jsx-runtime";
-import { forwardRef as J, useId as N, useRef as y, useState as I, useEffect as j, Children as $, isValidElement as z, cloneElement as Q } from "react";
+import { jsxs as I, jsx as b } from "@emotion/react/jsx-runtime";
+import { forwardRef as J, useId as N, useRef as y, useState as E, useEffect as z, Children as v, isValidElement as D, cloneElement as Q } from "react";
 import Y from "../Backdrop/Backdrop.es.js";
 import Z from "../Box/Box.es.js";
 import _ from "../Flexbox/Flexbox.es.js";
 import ee from "../Icon/Icon.es.js";
-import x from "@emotion/styled";
-import D from "../utils/getSibling/getSibling.es.js";
-const te = x.div`
+import h from "@emotion/styled";
+import H from "../utils/getSibling/getSibling.es.js";
+const te = h.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -79,7 +79,7 @@ const te = x.div`
   }
   return i;
 }}
-`, oe = x.div`
+`, ne = h.div`
   display: flex;
   width: calc(100% - 24px - 8px);
   gap: ${({ theme: e }) => `${e.spacing.content(2)}px`};
@@ -111,17 +111,17 @@ const te = x.div`
     color: i[50]
   };
 }}
-`, ne = x.div`
+`, oe = h.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`, ie = x.div`
+`, ie = h.div`
   display: flex;
   align-items: center;
   justify-content: center;
   transform: ${({ isFocused: e }) => e ? "rotate(180deg)" : "rotate(0deg)"};
   transition: transform 200ms linear;
-`, re = x.ul`
+`, re = h.ul`
   position: fixed;
   max-height: 476px;
   overflow-y: auto;
@@ -135,143 +135,152 @@ const te = x.div`
   box-shadow: ${({ theme: { elevation: e } }) => e[4]};
   transition: opacity 200ms linear;
   opacity: ${({ isFocused: e }) => e ? 1 : 0};
-`, me = J(function({
+`, be = J(function({
   value: i,
   onChange: m,
   open: r,
-  onOpen: v,
-  onClose: S,
-  variant: H = "outlined",
+  onOpen: S,
+  onClose: C,
+  variant: V = "outlined",
   size: B = "large",
   startAdornment: R,
   placeholder: L = "TEXT",
-  disabled: C = !1,
+  disabled: k = !1,
   fullWidth: A,
-  children: b,
+  children: g,
   inlineCSS: F,
-  ...h
-}, V) {
-  const q = N(), p = y(null), K = y(null), f = y(""), [l, a] = I(r || !1), [c, s] = I(""), [w, E] = I({ top: 0, bottom: 0, left: 0, width: 0 }), d = (h == null ? void 0 : h.id) || q, P = () => {
-    r === void 0 ? a((t) => !t) : r === !1 && v && typeof v == "function" && v();
+  ...w
+}, q) {
+  const K = N(), f = y(null), x = y(null), u = y(""), [c, a] = E(r || !1), [d, l] = E(""), [$, O] = E({ top: 0, bottom: 0, left: 0, width: 0 }), p = (w == null ? void 0 : w.id) || K, P = () => {
+    r === void 0 ? a((t) => !t) : r === !1 && S && typeof S == "function" && S();
   }, W = (t) => () => {
-    m(t.toString()), O();
-  }, O = () => {
-    r === void 0 ? (a(!1), s("")) : r === !0 && S && typeof S == "function" && S();
+    m(t.toString()), j();
+  }, j = () => {
+    r === void 0 ? (a(!1), l("")) : r === !0 && C && typeof C == "function" && C();
   }, T = (t) => {
     if (t.preventDefault(), t.code === "Escape" && a(!1), t.code === "Space" || t.code === "Enter")
-      if (f.current ? s(f.current) : c || s(`${d}-0`), l) {
-        if (c) {
-          const o = document.querySelector(
-            `#${CSS.escape(c)}`
+      if (u.current ? l(u.current) : d || l(`${p}-0`), c) {
+        if (d) {
+          const n = document.querySelector(
+            `#${CSS.escape(d)}`
           );
-          o && o.hasAttribute("value") && (f.current = o == null ? void 0 : o.id, W(o.value)());
+          n && n.hasAttribute("value") && (u.current = n == null ? void 0 : n.id, W(n.value)());
         }
         a(!1);
       } else
         a(!0);
     if (t.code === "ArrowDown" || t.code === "ArrowUp") {
-      if (l || a(!0), f.current ? s(f.current) : s(`${d}-0`), !c)
-        return;
-      const o = document.querySelector(
-        `#${CSS.escape(c)}`
+      if (c || a(!0), u.current ? l(u.current) : l(`${p}-0`), !x.current || !d) return;
+      const n = x.current.querySelector(
+        `#${CSS.escape(d)}`
       );
-      if (!o)
-        return;
+      if (!n) return;
       if (t.code === "ArrowDown") {
-        const n = D(o, "next", { skipDisabled: !0 });
-        n && n.id ? (s(n.id), n.scrollIntoView({ block: "end" })) : s(c);
+        const o = H(n, "next", { skipDisabled: !0 });
+        if (o && o.id)
+          l(o.id), o.scrollIntoView({ block: "end" });
+        else {
+          const s = x.current.firstElementChild;
+          s && (l(s.id), s.scrollIntoView({ block: "start" }));
+        }
       }
       if (t.code === "ArrowUp") {
-        const n = D(o, "prev", { skipDisabled: !0 });
-        n && n.id && (s(n.id), n.scrollIntoView({ block: "end" }));
+        const o = H(n, "prev", { skipDisabled: !0 });
+        if (o && o.id)
+          l(o.id), o.scrollIntoView({ block: "end" });
+        else {
+          const s = x.current.lastElementChild;
+          s && (l(s.id), s.scrollIntoView({ block: "end" }));
+        }
       }
     }
-    if (t.code === "Home" && s(`${d}-0`), t.code === "End") {
-      const o = $.count(b);
-      s(`${d}-${o - 1}`);
+    if (t.code === "Home" && l(`${p}-0`), t.code === "End") {
+      const n = v.count(g);
+      l(`${p}-${n - 1}`);
     }
   }, U = (t) => {
-    const o = $.map(t, (n) => z(n) && n && n.props.value === i ? n.props.children : null);
-    return o && o.length ? o[0] : "";
+    const n = v.map(t, (o) => D(o) && o && o.props.value === i ? o.props.children : null);
+    return n && n.length ? n[0] : "";
   };
-  return j(() => {
+  return z(() => {
     const t = () => {
-      if (p.current) {
-        const o = p.current.getBoundingClientRect(), n = $.count(b), g = 40, M = 24, X = g * n > 476 ? 476 : g * n, G = p.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
-        E(G ? {
+      if (f.current) {
+        const n = f.current.getBoundingClientRect(), o = v.count(g), s = 40, M = 24, X = s * o > 476 ? 476 : s * o, G = f.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
+        O(G ? {
           bottom: 24,
-          left: o.left,
-          width: p.current.offsetWidth
+          left: n.left,
+          width: f.current.offsetWidth
         } : {
-          top: o.top + o.height,
-          left: o.left,
-          width: p.current.offsetWidth
+          top: n.top + n.height,
+          left: n.left,
+          width: f.current.offsetWidth
         });
       }
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [b]), j(() => {
+  }, [g]), z(() => {
     r !== void 0 && a(r);
-  }, [r]), /* @__PURE__ */ k(Z, { ref: V, inlineCSS: { position: "relative" }, children: [
-    /* @__PURE__ */ k(
+  }, [r]), /* @__PURE__ */ I(Z, { ref: q, inlineCSS: { position: "relative" }, children: [
+    /* @__PURE__ */ I(
       te,
       {
         role: "combobox",
-        ref: p,
+        ref: f,
         tabIndex: 0,
-        variant: H,
+        variant: V,
         size: B,
-        disabled: C,
+        disabled: k,
         fullWidth: A,
-        isFocused: l,
+        isFocused: c,
         onClick: P,
         onKeyDown: T,
-        "aria-controls": d,
-        "aria-expanded": l,
+        "aria-controls": p,
+        "aria-expanded": c,
         "aria-haspopup": "listbox",
-        "aria-activedescendant": c,
-        ...h,
+        "aria-activedescendant": d,
+        ...w,
         css: F,
         children: [
-          /* @__PURE__ */ k(oe, { value: i === "0" || !!i, disabled: C, children: [
-            R && /* @__PURE__ */ u(_, { justifyContent: "center", alignItems: "center", children: R }),
-            /* @__PURE__ */ u(ne, { children: U(b) || L })
+          /* @__PURE__ */ I(ne, { value: i === "0" || !!i, disabled: k, children: [
+            R && /* @__PURE__ */ b(_, { justifyContent: "center", alignItems: "center", children: R }),
+            /* @__PURE__ */ b(oe, { children: U(g) || L })
           ] }),
-          /* @__PURE__ */ u(ie, { isFocused: l, children: /* @__PURE__ */ u(ee, { name: "ChevronDownLine", size: "small", color: C ? "grey.30" : "grey.100" }) })
+          /* @__PURE__ */ b(ie, { isFocused: c, children: /* @__PURE__ */ b(ee, { name: "ChevronDownLine", size: "small", color: k ? "grey.30" : "grey.100" }) })
         ]
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ b(
       Y,
       {
-        open: l,
-        onClose: O,
+        open: c,
+        onClose: j,
         inlineCSS: { backgroundColor: "transparent" },
-        children: /* @__PURE__ */ u(
+        children: /* @__PURE__ */ b(
           re,
           {
-            id: d,
+            id: p,
             role: "listbox",
-            ref: K,
+            ref: x,
             tabIndex: -1,
-            isFocused: l,
+            isFocused: c,
             style: {
-              top: w.top,
-              bottom: w.bottom,
-              left: w.left,
-              width: w.width
+              top: $.top,
+              bottom: $.bottom,
+              left: $.left,
+              width: $.width
             },
-            children: $.map(b, (t, o) => {
-              if (!z(t) || !t.props.value)
+            children: v.map(g, (t, n) => {
+              if (!D(t) || !t.props.value)
                 return null;
-              const n = `${d}-${o}`, g = i === t.props.value;
-              return g && (f.current = n), Q(t, {
-                id: n,
-                selected: g,
-                focused: n === c,
-                onClick: W(t.props.value)
+              const o = `${p}-${n}`, s = i === t.props.value;
+              return s && (u.current = o), Q(t, {
+                id: o,
+                selected: s,
+                focused: o === d,
+                onClick: W(t.props.value),
+                ...t.props
               });
             })
           }
@@ -281,5 +290,5 @@ const te = x.div`
   ] });
 });
 export {
-  me as default
+  be as default
 };

package/Slider/Slider.cjs

@@ -1,40 +1,55 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),i=require("react"),E=require("../Flexbox/Flexbox.cjs"),I=require("@emotion/styled"),O=e=>e&&e.__esModule?e:{default:e},u=O(I),B=u.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),u=require("react"),H=require("../Flexbox/Flexbox.cjs"),W=require("@emotion/styled"),z=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),B=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),G=n=>n&&n.__esModule?n:{default:n},h=G(W),J=h.default.div`
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
   height: 12px;
-  margin: ${({theme:{spacing:e}})=>`${e.content(2)}px 0px`};
+  margin: ${({theme:{spacing:n}})=>`${n.content(2)}px 0px`};
   cursor: pointer;
   border-radius: 20px;
-`,F=u.default.div`
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({theme:n})=>n.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({focusWithin:n,theme:o})=>n?{outline:`${o.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
+  }
+`,Q=h.default.div`
   position: absolute;
   width: 100%;
   height: 100%;
-  background: ${({theme:{palette:e}})=>e.grey[10]};
+  background: ${({theme:{palette:n}})=>n.grey[10]};
   border-radius: inherit;
-`,G=u.default.div`
+`,Y=h.default.div`
   position: absolute;
   height: 100%;
-  background: ${({theme:{palette:e}})=>e.brand.primary.main};
+  background: ${({theme:{palette:n}})=>n.brand.primary.main};
   border-radius: inherit;
-`,U=u.default.div`
+`,Z=h.default.div`
   position: absolute;
   display: flex;
   width: 24px;
   height: 24px;
   justify-content: space-between;
   align-items: center;
-  padding: ${({theme:{spacing:e}})=>`${e.content(2)}px ${e.content(3)}px`};
-  background: ${({theme:{palette:e}})=>e.grey[90]};
+  padding: ${({theme:{spacing:n}})=>`${n.content(2)}px ${n.content(3)}px`};
+  background: ${({theme:{palette:n}})=>n.grey[90]};
   transform: translateX(-50%);
   border-radius: 50%;
-`,W=u.default.div`
+
+  &:focus {
+    outline-offset: 2px;
+  }
+`,V=h.default.div`
   position: absolute;
   width: 4px;
   height: 4px;
   transform: translateX(-50%);
   border-radius: 50%;
 
-  ${({theme:{palette:e},marked:l,disabled:d,hasMarks:r})=>d||!r?{background:"transparent",opacity:0}:l?{background:e.grey.white}:{background:e.grey[30]}}
-`,j=10,z=i.forwardRef(function({value:l,onChange:d,step:r=1,min:s=0,max:c=100,hasMarks:T=!0,disabledValues:N=[],railProps:f,trackProps:h,thumbProps:g,inlineCSS:_,...D},p){const o=i.useRef(null),b=i.useRef(null),q=i.useRef(null),[C,M]=i.useState(!1),m=100/((c-s)/r),k=t=>{if(o.current){const n=t-o.current.getBoundingClientRect().left,S=Array.from(o.current.querySelectorAll('[class^="slider-mark-"]:not([disabled])')),x=S.reduce((v,R)=>Math.abs(R.offsetLeft-n)<Math.abs(v.offsetLeft-n)?R:v,S[0]).getAttribute("data-value");return x!==null?Number(x):null}return null},$=t=>{M(!0);const n=k(t);n!==null&&d(n)},w=t=>{if(!C)return;const n=k(t);n!==null&&d(n)},y=()=>M(!1),X=t=>$(t.clientX),A=t=>$(t.touches[0].clientX),L=t=>w(t.clientX),V=t=>w(t.touches[0].clientX);return i.useEffect(()=>{if(o.current){const t=o.current.querySelector(`[data-value="${l}"]`);if(b.current&&t){const{offsetLeft:n,offsetWidth:S}=t;b.current.style.width=`${n+S+j*2}px`}}},[l,s,c,r]),a.jsxs(B,{ref:p,...D,className:"slider",onMouseDown:X,onMouseMove:L,onMouseUp:y,onMouseLeave:y,onTouchStart:A,onTouchMove:V,onTouchEnd:y,onTouchCancel:y,css:_,children:[a.jsx(F,{ref:q,...f,css:f==null?void 0:f.inlineCSS,className:"slider-rail"}),a.jsx(G,{ref:b,...h,css:h==null?void 0:h.inlineCSS,className:"slider-track"}),a.jsxs(E.default,{className:"slider-mark-wrapper",alignItems:"center",ref:o,inlineCSS:{margin:`0 ${j+2}px`,width:"100%",height:"24px",position:"relative"},children:[c>0&&s<c&&r>0&&Array.from({length:(c-s)/r+1},(t,n)=>a.jsx(W,{className:`slider-mark-${n} slider-mark`,marked:n<=(l-s)/r,hasMarks:T,disabled:N.includes(s+r*n),"data-value":s+r*n,style:{left:`${m*n}%`}},`slider-mark-${l}:${s+r*n}`)),a.jsx(U,{...g,className:"slider-thumb",css:g==null?void 0:g.inlineCSS,style:{left:`${m*(l-s)/r}%`}})]})]})});exports.default=z;
+  ${({theme:{palette:n},marked:o,disabled:c,hasMarks:s})=>c||!s?{background:"transparent",opacity:0}:o?{background:n.grey.white}:{background:n.grey[30]}}
+`,q=10,P=u.forwardRef(function({value:o,onChange:c,step:s=1,min:i=0,max:l=100,hasMarks:N=!0,disabledValues:a=[],readValue:S,railProps:y,trackProps:g,thumbProps:b,inlineCSS:_,...I},M){const $=u.useRef(null),{isKeyboardMode:v}=z.default(),{hasFocus:X}=B.default({ref:M||$}),f=u.useRef(null),w=u.useRef(null),C=u.useRef(null),[L,x]=u.useState(!1),R=100/((l-i)/s),p=t=>{if(f.current){const e=t-f.current.getBoundingClientRect().left,r=Array.from(f.current.querySelectorAll('[class^="slider-mark-"]:not([disabled])')),j=r.reduce((A,T)=>Math.abs(T.offsetLeft-e)<Math.abs(A.offsetLeft-e)?T:A,r[0]).getAttribute("data-value");return j!==null?Number(j):null}return null},E=t=>{let e=o;if(t.key==="ArrowRight"||t.key==="ArrowUp"){if(o===l)return;e=o+s}else if(t.key==="ArrowLeft"||t.key==="ArrowDown"){if(o===i)return;e=o-s}else if(t.key==="PageUp"){if(o===l)return;e=Math.min(o+s*5,l)}else if(t.key==="PageDown"){if(o===i)return;e=Math.max(o-s*5,i)}else if(t.key==="Home"){for(let r=i;r<=l;r+=s)if(!a.includes(r)){e=r;break}}else if(t.key==="End"){for(let r=l;r>=i;r-=s)if(!a.includes(r)){e=r;break}}if(a.includes(e)){if(e>o){for(let r=e;r<=l;r+=s)if(!a.includes(r)){c(r);return}}else if(e<o){for(let r=e;r>=i;r-=s)if(!a.includes(r)){c(r);return}}return}c(e)},D=t=>{x(!0);const e=p(t);e!==null&&c(e)},m=t=>{if(!L)return;const e=p(t);e!==null&&c(e)},k=()=>x(!1),K=t=>D(t.clientX),F=t=>D(t.touches[0].clientX),O=t=>m(t.clientX),U=t=>m(t.touches[0].clientX);return u.useEffect(()=>{if(f.current){const t=f.current.querySelector(`[data-value="${o}"]`);if(w.current&&t){const{offsetLeft:e,offsetWidth:r}=t;w.current.style.width=`${e+r+q*2}px`}}},[o,i,l,s]),d.jsxs(J,{ref:M||$,...I,className:"slider",onMouseDown:K,onMouseMove:O,onMouseUp:k,onMouseLeave:k,onTouchStart:F,onTouchMove:U,onTouchEnd:k,onTouchCancel:k,css:_,focusWithin:v&&X,children:[d.jsx(Q,{ref:C,...y,css:y==null?void 0:y.inlineCSS,className:"slider-rail",tabIndex:-1,"aria-hidden":!0}),d.jsx(Y,{ref:w,...g,css:g==null?void 0:g.inlineCSS,className:"slider-track",tabIndex:-1,"aria-hidden":!0}),d.jsxs(H.default,{className:"slider-mark-wrapper",alignItems:"center",ref:f,tabIndex:-1,inlineCSS:{margin:`0 ${q+2}px`,width:"100%",height:"24px",position:"relative"},children:[l>0&&i<l&&s>0&&Array.from({length:(l-i)/s+1},(t,e)=>d.jsx(V,{className:`slider-mark-${e} slider-mark`,marked:e<=(o-i)/s,hasMarks:N,disabled:a.includes(i+s*e),"data-value":i+s*e,style:{left:`${R*e}%`},"aria-hidden":!0},`slider-mark-${o}:${i+s*e}`)),d.jsx(Z,{...b,className:"slider-thumb",css:b==null?void 0:b.inlineCSS,onKeyDown:E,role:"slider","aria-orientation":"horizontal",tabIndex:0,"aria-valuemin":i,"aria-valuemax":l,"aria-valuenow":o,"aria-valuetext":S&&typeof S=="function"?S(o):o.toString(),style:{left:`${R*(o-i)/s}%`}})]})]})});exports.default=P;

package/Slider/Slider.d.ts

@@ -10,6 +10,7 @@ export interface SliderProps extends GeneralComponentProps<Omit<HTMLAttributes<H
     hasMarks?: boolean;
     defaultValue?: number;
     disabledValues?: number[];
+    readValue?: (value: number) => string;
     railProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
     trackProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
     thumbProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;