@narmi/design_system 6.22.5 → 6.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/docs/classManifest.json +0 -75
  2. package/dist/index.js +25 -25
  3. package/dist/index.js.map +1 -1
  4. package/dist/style.css +1 -1
  5. package/dist/style.css.map +1 -1
  6. package/dist/tokens/css/rgbColors.css +13 -13
  7. package/dist/tokens/css/rgbColors.scss +13 -13
  8. package/dist/tokens/css/tokens.css +69 -69
  9. package/dist/tokens/css/tokens.scss +69 -69
  10. package/dist/tokens/js/colors.esm.js +69 -69
  11. package/dist/types/Button/index.d.ts +5 -2
  12. package/dist/types/Button/index.d.ts.map +1 -1
  13. package/dist/types/hooks/useDropdownLayer/index.d.ts +1 -1
  14. package/dist/types/hooks/useDropdownLayer/index.d.ts.map +1 -1
  15. package/dist/types/hooks/useDropdownLayer/useAnchorPolyfill.d.ts +14 -3
  16. package/dist/types/hooks/useDropdownLayer/useAnchorPolyfill.d.ts.map +1 -1
  17. package/package.json +1 -1
  18. package/dist/types/hooks/useDropdownLayer/useDropdownMaxHeight.d.ts +0 -19
  19. package/dist/types/hooks/useDropdownLayer/useDropdownMaxHeight.d.ts.map +0 -1
package/dist/tokens/js/colors.esm.js CHANGED
@@ -12,75 +12,75 @@ export const ColorGreyMediumGrey = "#6c6c6c";
12
12
  export const ColorGreyDarkGrey = "#4c4c4c";
13
13
  export const ColorGreyBlack = "#333333";
14
14
  export const ColorGreyWhite = "#ffffff";
15
- export const ColorNarmiMoss100 = "#002921";
16
- export const ColorNarmiMoss200 = "#0F3C32";
17
- export const ColorNarmiMoss300 = "#005242";
18
- export const ColorNarmiMoss400 = "#006553";
19
- export const ColorNarmiMoss500 = "#3E8373";
20
- export const ColorNarmiMoss600 = "#6EA193";
21
- export const ColorNarmiMoss700 = "#9DC0B6";
22
- export const ColorNarmiMoss800 = "#CDDED9";
23
- export const ColorNarmiMoss = "#006553";
24
- export const ColorNarmiPine100 = "#041A14";
25
- export const ColorNarmiPine200 = "#062821";
26
- export const ColorNarmiPine300 = "#16362C";
27
- export const ColorNarmiPine400 = "#1A4338";
28
- export const ColorNarmiPine500 = "#44655B";
29
- export const ColorNarmiPine600 = "#708981";
30
- export const ColorNarmiPine700 = "#708981";
31
- export const ColorNarmiPine800 = "#CDD6D3";
32
- export const ColorNarmiPine = "#1A4338";
33
- export const ColorNarmiCove100 = "#002547";
34
- export const ColorNarmiCove200 = "#00376A";
35
- export const ColorNarmiCove300 = "#094895";
36
- export const ColorNarmiCove400 = "#005CB2";
37
- export const ColorNarmiCove500 = "#237CC3";
38
- export const ColorNarmiCove600 = "#66A2D6";
39
- export const ColorNarmiCove700 = "#A6CFF0";
40
- export const ColorNarmiCove800 = "#D4EDFF";
41
- export const ColorNarmiCove = "#005CB2";
42
- export const ColorNarmiAzul100 = "#001340";
43
- export const ColorNarmiAzul200 = "#00205E";
44
- export const ColorNarmiAzul300 = "#002C82";
45
- export const ColorNarmiAzul400 = "#003EA0";
46
- export const ColorNarmiAzul500 = "#3664B5";
47
- export const ColorNarmiAzul600 = "#6B89C7";
48
- export const ColorNarmiAzul700 = "#9CB1DE";
49
- export const ColorNarmiAzul800 = "#C9D8F2";
50
- export const ColorNarmiAzul = "#003EA0";
51
- export const ColorNarmiPistachio100 = "#485E3D";
52
- export const ColorNarmiPistachio200 = "#6B8C5A";
53
- export const ColorNarmiPistachio300 = "#90BB78";
54
- export const ColorNarmiPistachio400 = "#B5E995";
55
- export const ColorNarmiPistachio500 = "#CCF0B4";
56
- export const ColorNarmiPistachio600 = "#DAF4C8";
57
- export const ColorNarmiPistachio700 = "#E9F8DE";
58
- export const ColorNarmiPistachio800 = "#F7FCF3";
59
- export const ColorNarmiPistachio = "#B5E995";
60
- export const ColorNarmiCactus100 = "#324C23";
61
- export const ColorNarmiCactus200 = "#4B7137";
62
- export const ColorNarmiCactus300 = "#63964B";
63
- export const ColorNarmiCactus400 = "#7FBC5B";
64
- export const ColorNarmiCactus500 = "#99CA7A";
65
- export const ColorNarmiCactus600 = "#B3D79A";
66
- export const ColorNarmiCactus700 = "#CCE4BA";
67
- export const ColorNarmiCactus800 = "#E5F1DC";
68
- export const ColorNarmiCactus = "#7FBC5B";
69
- export const ColorNarmiSand100 = "#423329";
70
- export const ColorNarmiSand200 = "#684D41";
71
- export const ColorNarmiSand300 = "#947564";
72
- export const ColorNarmiSand400 = "#C4A08A";
73
- export const ColorNarmiSand500 = "#DCC1A3";
74
- export const ColorNarmiSand600 = "#EED6C3";
75
- export const ColorNarmiSand700 = "#F4E3D6";
76
- export const ColorNarmiSand800 = "#FCF0E9";
77
- export const ColorNarmiSand = "#DCC1A3";
78
- export const ColorNarmiAmethyst = "#5514B8";
79
- export const ColorNarmiBlack = "#333333";
80
- export const ColorNarmiGrey = "#6c6c6c";
81
- export const ColorNarmiMediumGrey = "#6c6c6c";
82
- export const ColorNarmiLightGrey = "#d9d9d9";
83
- export const ColorNarmiWhite = "#ffffff";
15
+ export const ColorNarmiMoss100 = "#002921"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
16
+ export const ColorNarmiMoss200 = "#0F3C32"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
17
+ export const ColorNarmiMoss300 = "#005242"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
18
+ export const ColorNarmiMoss400 = "#006553"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
19
+ export const ColorNarmiMoss500 = "#3E8373"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
20
+ export const ColorNarmiMoss600 = "#6EA193"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
21
+ export const ColorNarmiMoss700 = "#9DC0B6"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
22
+ export const ColorNarmiMoss800 = "#CDDED9"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
23
+ export const ColorNarmiMoss = "#006553"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
24
+ export const ColorNarmiPine100 = "#041A14"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
25
+ export const ColorNarmiPine200 = "#062821"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
26
+ export const ColorNarmiPine300 = "#16362C"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
27
+ export const ColorNarmiPine400 = "#1A4338"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
28
+ export const ColorNarmiPine500 = "#44655B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
29
+ export const ColorNarmiPine600 = "#708981"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
30
+ export const ColorNarmiPine700 = "#708981"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
31
+ export const ColorNarmiPine800 = "#CDD6D3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
32
+ export const ColorNarmiPine = "#1A4338"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
33
+ export const ColorNarmiCove100 = "#002547"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
34
+ export const ColorNarmiCove200 = "#00376A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
35
+ export const ColorNarmiCove300 = "#094895"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
36
+ export const ColorNarmiCove400 = "#005CB2"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
37
+ export const ColorNarmiCove500 = "#237CC3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
38
+ export const ColorNarmiCove600 = "#66A2D6"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
39
+ export const ColorNarmiCove700 = "#A6CFF0"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
40
+ export const ColorNarmiCove800 = "#D4EDFF"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
41
+ export const ColorNarmiCove = "#005CB2"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
42
+ export const ColorNarmiAzul100 = "#001340"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
43
+ export const ColorNarmiAzul200 = "#00205E"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
44
+ export const ColorNarmiAzul300 = "#002C82"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
45
+ export const ColorNarmiAzul400 = "#003EA0"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
46
+ export const ColorNarmiAzul500 = "#3664B5"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
47
+ export const ColorNarmiAzul600 = "#6B89C7"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
48
+ export const ColorNarmiAzul700 = "#9CB1DE"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
49
+ export const ColorNarmiAzul800 = "#C9D8F2"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
50
+ export const ColorNarmiAzul = "#003EA0"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
51
+ export const ColorNarmiPistachio100 = "#485E3D"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
52
+ export const ColorNarmiPistachio200 = "#6B8C5A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
53
+ export const ColorNarmiPistachio300 = "#90BB78"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
54
+ export const ColorNarmiPistachio400 = "#B5E995"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
55
+ export const ColorNarmiPistachio500 = "#CCF0B4"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
56
+ export const ColorNarmiPistachio600 = "#DAF4C8"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
57
+ export const ColorNarmiPistachio700 = "#E9F8DE"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
58
+ export const ColorNarmiPistachio800 = "#F7FCF3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
59
+ export const ColorNarmiPistachio = "#B5E995"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
60
+ export const ColorNarmiCactus100 = "#324C23"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
61
+ export const ColorNarmiCactus200 = "#4B7137"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
62
+ export const ColorNarmiCactus300 = "#63964B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
63
+ export const ColorNarmiCactus400 = "#7FBC5B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
64
+ export const ColorNarmiCactus500 = "#99CA7A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
65
+ export const ColorNarmiCactus600 = "#B3D79A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
66
+ export const ColorNarmiCactus700 = "#CCE4BA"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
67
+ export const ColorNarmiCactus800 = "#E5F1DC"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
68
+ export const ColorNarmiCactus = "#7FBC5B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
69
+ export const ColorNarmiSand100 = "#423329"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
70
+ export const ColorNarmiSand200 = "#684D41"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
71
+ export const ColorNarmiSand300 = "#947564"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
72
+ export const ColorNarmiSand400 = "#C4A08A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
73
+ export const ColorNarmiSand500 = "#DCC1A3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
74
+ export const ColorNarmiSand600 = "#EED6C3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
75
+ export const ColorNarmiSand700 = "#F4E3D6"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
76
+ export const ColorNarmiSand800 = "#FCF0E9"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
77
+ export const ColorNarmiSand = "#DCC1A3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
78
+ export const ColorNarmiAmethyst = "#5514B8"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
79
+ export const ColorNarmiBlack = "#333333"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
80
+ export const ColorNarmiGrey = "#6c6c6c"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
81
+ export const ColorNarmiMediumGrey = "#6c6c6c"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
82
+ export const ColorNarmiLightGrey = "#d9d9d9"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
83
+ export const ColorNarmiWhite = "#ffffff"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
84
84
  export const ColorSystemSuccessDark = "#027A48";
85
85
  export const ColorSystemSuccessLight = "#ECFDF3";
86
86
  export const ColorSystemWarnDark = "#B54708";
package/dist/types/Button/index.d.ts CHANGED
@@ -23,6 +23,8 @@ export interface ButtonProps {
23
23
  type?: "submit" | "button" | "reset";
24
24
  /** size variant of button */
25
25
  size?: "xs" | "s" | "m";
26
+ /** horizontal alignment of button label content */
27
+ labelAlign?: "start" | "center" | "end";
26
28
  /** Name of Narmi icon to place at the start of the label */
27
29
  startIcon?: IconName | null;
28
30
  /** Name of Narmi icon to place at the end of the label */
@@ -40,7 +42,8 @@ export interface ButtonProps {
40
42
  children?: React.ReactNode | string | undefined;
41
43
  /**
42
44
  * Will take up full width of its parent container when `true`.
43
- * The label will align start with flex grow.
45
+ * Full-width buttons align label content to `start` by default; use `labelAlign`
46
+ * to override that alignment.
44
47
  */
45
48
  isFullWidth?: boolean;
46
49
  [x: string]: unknown;
@@ -54,6 +57,6 @@ export interface ButtonProps {
54
57
  * This component supports rest props; any additional props on button will be
55
58
  * passed through to the root node of `Button`.
56
59
  */
57
- declare const Button: ({ isLoading, disabled, kind, type, size, startIcon, endIcon, testId, children, label, onClick, as, ariaLabel, isFullWidth, ...otherProps }: ButtonProps) => React.JSX.Element;
60
+ declare const Button: ({ isLoading, disabled, kind, type, size, labelAlign, startIcon, endIcon, testId, children, label, onClick, as, ariaLabel, isFullWidth, ...otherProps }: ButtonProps) => React.JSX.Element;
58
61
  export default Button;
59
62
  //# sourceMappingURL=index.d.ts.map
package/dist/types/Button/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,UAAU,GACV,OAAO,GACP,IAAI,CAAC;AAET,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;IACxB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,MAAM,GAAI,4IAgBb,WAAW,sBAyEb,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,UAAU,GACV,OAAO,GACP,IAAI,CAAC;AAET,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,MAAM,GAAI,wJAiBb,WAAW,sBAkFb,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/dist/types/hooks/useDropdownLayer/index.d.ts CHANGED
@@ -64,6 +64,6 @@ export interface UseDropdownLayerOptions {
64
64
  * Uses CSS anchor positioning if supported, otherwise falls back to
65
65
  * a JS-supported fixed positioning strategy.
66
66
  */
67
- declare const useDropdownLayer: ({ isOpen, setIsOpen, matchWidth, isPortalled, ariaPopupType, placement, alignment, polyfillScrollBug, }: UseDropdownLayerOptions) => UseDropdownLayerResult;
67
+ declare const useDropdownLayer: ({ isOpen, matchWidth, isPortalled, ariaPopupType, placement, alignment, polyfillScrollBug, }: UseDropdownLayerOptions) => UseDropdownLayerResult;
68
68
  export default useDropdownLayer;
69
69
  //# sourceMappingURL=index.d.ts.map
package/dist/types/hooks/useDropdownLayer/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDropdownLayer/index.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,sBAAsB,GAAG;IACnC,sDAAsD;IACtD,WAAW,EAAE;QACX,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAC5B,KAAK,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,qDAAqD;IACrD,UAAU,EAAE;QACV,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAC5B,KAAK,EACD;YACE,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;SAC/B,GACD,KAAK,CAAC,aAAa,CAAC;KACzB,CAAC;IACF,iEAAiE;IACjE,yBAAyB,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEnD,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA6BD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,GAAI,yGASvB,uBAAuB,KAAG,sBA+F5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDropdownLayer/index.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,sBAAsB,GAAG;IACnC,sDAAsD;IACtD,WAAW,EAAE;QACX,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAC5B,KAAK,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,qDAAqD;IACrD,UAAU,EAAE;QACV,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAC5B,KAAK,EACD;YACE,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;SAC/B,GACD,KAAK,CAAC,aAAa,CAAC;KACzB,CAAC;IACF,iEAAiE;IACjE,yBAAyB,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEnD,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAiDD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,GAAI,8FAevB,uBAAuB,KAAG,sBAgG5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/dist/types/hooks/useDropdownLayer/useAnchorPolyfill.d.ts CHANGED
@@ -7,8 +7,6 @@ interface UseAnchorPolyfillParams {
7
7
  matchWidth?: boolean;
8
8
  /** Whether the dropdown is currently open */
9
9
  isOpen: boolean;
10
- /** Function to close the dropdown */
11
- setIsOpen: (isOpen: boolean) => void;
12
10
  /**
13
11
  * When true, forces the polyfill path if the browser has the Safari
14
12
  * scroll-container bug (anchor-size/position-try-fallbacks fail inside
@@ -19,6 +17,19 @@ interface UseAnchorPolyfillParams {
19
17
  /**
20
18
  * Calculates and applies CSS custom properties for dropdown positioning.
21
19
  * Exported for unit testing.
20
+ *
21
+ * All measurements are in layout-viewport coordinates (`window.innerHeight`
22
+ * compared against `getBoundingClientRect()`). This avoids the visual-vs-
23
+ * layout viewport mixup that caused off-screen placement on Android when
24
+ * the soft keyboard was open at the time `calculatePosition` ran.
25
+ *
26
+ * Also writes `--js-dropdown-max-height` as a direction-aware CSS calc
27
+ * string:
28
+ * - Below-anchor placement uses `100dvh` so the layer clips inside the
29
+ * visible area above the virtual keyboard (dvh shrinks with the
30
+ * keyboard on Chromium/Android).
31
+ * - Above-anchor placement uses `100vh` because keyboards open from the
32
+ * bottom and don't affect the space above the anchor.
22
33
  */
23
34
  export declare const calculatePosition: (anchorEl: HTMLElement, layerEl: HTMLElement, matchWidth: boolean) => void;
24
35
  /**
@@ -30,7 +41,7 @@ export declare const computeRootMargin: (rect: DOMRect) => string;
30
41
  * Polyfill for CSS anchor positioning: `position-area: bottom` with
31
42
  * `positionTryFallbacks: "--nds-dropdown-above, flip-inline"`.
32
43
  */
33
- declare const useAnchorPolyfill: ({ anchorRef, layerRef, matchWidth, isOpen, setIsOpen, polyfillScrollBug, }: UseAnchorPolyfillParams) => {
44
+ declare const useAnchorPolyfill: ({ anchorRef, layerRef, matchWidth, isOpen, polyfillScrollBug, }: UseAnchorPolyfillParams) => {
34
45
  isAnchorPositionSupported: boolean;
35
46
  polyFillLayerStyles: {};
36
47
  };
package/dist/types/hooks/useDropdownLayer/useAnchorPolyfill.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useAnchorPolyfill.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDropdownLayer/useAnchorPolyfill.ts"],"names":[],"mappings":"AAKA,UAAU,uBAAuB;IAC/B,uEAAuE;IACvE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,wEAAwE;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,qCAAqC;IACrC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,WAAW,EACrB,SAAS,WAAW,EACpB,YAAY,OAAO,KAClB,IA2CF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,KAAG,MAgBjD,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,iBAAiB,GAAI,4EAOxB,uBAAuB;;;CA4GzB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"useAnchorPolyfill.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDropdownLayer/useAnchorPolyfill.ts"],"names":[],"mappings":"AAIA,UAAU,uBAAuB;IAC/B,uEAAuE;IACvE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,wEAAwE;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAeD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,WAAW,EACrB,SAAS,WAAW,EACpB,YAAY,OAAO,KAClB,IAkDF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,KAAG,MAgBjD,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,iBAAiB,GAAI,iEAMxB,uBAAuB;;;CAqFzB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@narmi/design_system",
3
- "version": "6.22.5",
3
+ "version": "6.23.0",
4
4
  "description": "⚡ A consistent look-and-feel and extensible interface for Narmi experiences 🔥",
5
5
  "main": "dist/index.js",
6
6
  "style": "dist/style.css",
package/dist/types/hooks/useDropdownLayer/useDropdownMaxHeight.d.ts DELETED
@@ -1,19 +0,0 @@
1
- interface UseDropdownMaxHeightParams {
2
- anchorRef: React.RefObject<HTMLElement>;
3
- layerRef: React.RefObject<HTMLElement>;
4
- isOpen: boolean;
5
- }
6
- /**
7
- * Resolves a CSS custom property (e.g. `--space-xs`) to a pixel number.
8
- * Falls back to `fallback` if the property is not set or cannot be parsed.
9
- */
10
- export declare const resolveSpaceToken: (property: string, fallback: number) => number;
11
- /**
12
- * Measures available space above and below the anchor element and writes
13
- * `--js-dropdown-max-height` to the layer element as a pixel value.
14
- *
15
- * Re-runs on `visualViewport` resize to handle virtual keyboard changes.
16
- */
17
- declare const useDropdownMaxHeight: ({ anchorRef, layerRef, isOpen, }: UseDropdownMaxHeightParams) => void;
18
- export default useDropdownMaxHeight;
19
- //# sourceMappingURL=useDropdownMaxHeight.d.ts.map
package/dist/types/hooks/useDropdownLayer/useDropdownMaxHeight.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDropdownMaxHeight.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDropdownLayer/useDropdownMaxHeight.ts"],"names":[],"mappings":"AAEA,UAAU,0BAA0B;IAClC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,MAOF,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,oBAAoB,GAAI,kCAI3B,0BAA0B,KAAG,IAqC/B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}