@nypl/design-system-react-components 4.1.4 → 4.1.5

package/dist/design-system-react-components.js

@@ -6811,7 +6811,9 @@ const { defineMultiStyleConfig: UD, definePartsStyle: ID } = U2([
       ...ch[r.size]
     };
     return {
-      ...a,
+      // Apply styles to the root element if a custom svg is not passed
+      ...r.hasChildSVG ? {} : a,
+      // Apply styles to a child svg element
       svg: {
         ...a
       }
@@ -7202,6 +7204,19 @@ const { defineMultiStyleConfig: UD, definePartsStyle: ID } = U2([
       select: CZ(r),
       "div[data-testid='ds-helperErrorText']": {
         marginLeft: !o && r === "inline" ? "0" : `${a}px`
+      },
+      /**
+       * Overriding Chakra default styles with styles that are RTL-aware to
+       * properly position the dropdown icon.
+       *
+       * To work properly, the `right` attribute needs to be unset before the
+       * `inset-inline-end` attribute is set. Additionally, `insetInlineEnd`
+       * which should map to `inset-inline-end` actually maps to `right`,
+       * which does not solve the problem. Maybe these are bugs in Chakra.
+       * */
+      ".chakra-select__icon-wrapper": {
+        right: "unset",
+        "inset-inline-end": "var(--nypl-space-2)"
       }
     })
   ),
@@ -10224,7 +10239,6 @@ const {
   utilitySearch: wL
 }, S3 = P1(
   u2((r, a) => {
-    var Z;
     const {
       align: o = "none",
       children: s,
@@ -10237,38 +10251,41 @@ const {
       title: V = `${y} icon`,
       variant: k = "default",
       ...S
-    } = r, _ = re("ReservoirIcon", {
+    } = r, _ = s && s.type === "svg", R = re("ReservoirIcon", {
       align: o,
       color: i,
+      hasChildSVG: _,
       iconRotation: C,
       size: L,
       variant: k
-    }), R = {
+    }), N = {
       "aria-hidden": p,
       id: v,
       role: "img",
       title: V,
       ...S
     };
-    let N = null;
-    if (y && s)
+    if (y && _)
       return console.warn(
         "NYPL Reservoir Icon: Pass in either a `name` prop or an `svg` element child. Do not pass both."
       ), null;
-    if (!y && !s)
+    if (s && !_)
+      return console.warn(
+        "NYPL Reservoir Icon: Only an `svg` element can be passed to the `Icon` component as its child."
+      ), null;
+    if (!y && !_)
       return console.warn(
         "NYPL Reservoir Icon: Pass an icon `name` prop or an SVG child to ensure an icon appears."
       ), null;
     if (y) {
       const z = dB[y];
-      return /* @__PURE__ */ x.jsx(gb, { as: z, ref: a, ...R, __css: _ });
+      return /* @__PURE__ */ x.jsx(gb, { as: z, ref: a, ...N, __css: R });
     }
-    return s.type === "svg" || ((Z = s.props) == null ? void 0 : Z.type) === "svg" ? N = r1.cloneElement(s, {
-      ...R,
+    const Z = r1.cloneElement(s, {
+      ...N,
       ref: a
-    }) : console.warn(
-      "NYPL Reservoir Icon: An `svg` element must be passed to the `Icon` component as its child."
-    ), /* @__PURE__ */ x.jsx(p1, { ref: a, __css: _, children: N });
+    });
+    return /* @__PURE__ */ x.jsx(p1, { ref: a, __css: R, children: Z });
   }),
   // Pass all custom props to Chakra and override, e.g. we want the
   // DS color value set and not color strings.

package/dist/src/theme/components/icon.d.ts

@@ -10,6 +10,7 @@ declare const iconRotation: Record<string, {
 interface IconBaseStyle extends StyleFunctionProps {
     align: keyof typeof align;
     color: string;
+    hasChildSVG: boolean;
     iconRotation: keyof typeof iconRotation;
     size: keyof typeof iconSizeStyles;
 }
@@ -24,13 +25,13 @@ declare const Icon: {
             marginStart?: string;
             display: string;
         };
-        height: string;
-        width: string;
-        transform: string;
-        fill: string;
+        height?: string;
+        width?: string;
+        transform?: string;
+        fill?: string;
         marginEnd?: string;
         marginStart?: string;
-        display: string;
+        display?: string;
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;

package/dist/src/theme/components/select.d.ts

@@ -108,6 +108,19 @@ declare const Select: {
         "div[data-testid='ds-helperErrorText']": {
             marginLeft: string;
         };
+        /**
+         * Overriding Chakra default styles with styles that are RTL-aware to
+         * properly position the dropdown icon.
+         *
+         * To work properly, the `right` attribute needs to be unset before the
+         * `inset-inline-end` attribute is set. Additionally, `insetInlineEnd`
+         * which should map to `inset-inline-end` actually maps to `right`,
+         * which does not solve the problem. Maybe these are bugs in Chakra.
+         * */
+        ".chakra-select__icon-wrapper": {
+            right: string;
+            "inset-inline-end": string;
+        };
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",