@popmenu/common-ui 0.172.1 → 0.172.3

package/build/esm/components/Icon/IconStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconStyles.js","sources":["../../../../src/components/Icon/IconStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { IconProps } from './IconProps'\n\ntype StyleProps = Pick<IconProps, 'color' | 'size'>\n\nexport const useIconStyles = makeStyles<Theme, StyleProps>(({ spacing, palette }) => {\n  const getFontSize = ({ size }: StyleProps) => {\n    return (\n      {\n        inherit: 'inherit',\n        small: spacing(1.5),\n        medium: spacing(2),\n        large: spacing(2.5),\n        'extra-large': spacing(3),\n      }[size] ?? 'inherit'\n    )\n  }\n\n  const getColor = (props: StyleProps) => {\n    const semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error']\n    let value = 'inherit'\n    if (props.color) {\n      if (semanticColors.includes(props.color.split('.')[0])) {\n        const [color, variant = 'main'] = props.color.split('.')\n        // @ts-expect-error - todo.\n        value = palette[color][variant]\n      } else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {\n        value = props.color\n      }\n    }\n    return value\n  }\n\n  return {\n    root: {\n      color: getColor,\n      fontSize: getFontSize,\n      width: '1em',\n      height: '1em',\n      strokeWidth: '1.3px',\n    },\n  }\n})\n"],"names":[],"mappings":";;AAKO,MAAM,aAAa,GAAG,UAAU,CAAoB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAI;AAClF,IAAA,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAc,KAAI;AAC3C,QAAA,QACE;AACE,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC;AACnB,YAAA,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAClB,YAAA,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC;AACnB,YAAA,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;AAC1B,SAAA,CAAC,IAAI,CAAC,IAAI,SAAS;AAExB,KAAC;AAED,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAiB,KAAI;AACrC,QAAA,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;QACtF,IAAI,KAAK,GAAG,SAAS;AACrB,QAAA,IAAI,KAAK,CAAC,KAAK,EAAE;AACf,YAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;AACtD,gBAAA,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;gBAExD,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;;AAC1B,iBAAA,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE;AACrD,gBAAA,KAAK,GAAG,KAAK,CAAC,KAAK;;;AAGvB,QAAA,OAAO,KAAK;AACd,KAAC;IAED,OAAO;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,QAAQ,EAAE,WAAW;AACrB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,WAAW,EAAE,OAAO;AACrB,SAAA;KACF;AACH,CAAC;;;;"}
+{"version":3,"file":"IconStyles.js","sources":["../../../../src/components/Icon/IconStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { IconProps } from './IconProps'\n\ntype StyleProps = Pick<IconProps, 'color' | 'size'>\n\nexport const useIconStyles = makeStyles<Theme, StyleProps>(({ spacing, palette }) => {\n  const getFontSize = ({ size }: StyleProps) => {\n    switch (size) {\n      case 'small':\n        return spacing(1.5)\n      case 'medium':\n        return spacing(2)\n      case 'large':\n        return spacing(2.5)\n      case 'extra-large':\n        return spacing(3)\n      default:\n        return 'inherit'\n    }\n  }\n\n  const getColor = (props: StyleProps) => {\n    const semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error']\n    let value = 'inherit'\n    if (props.color) {\n      if (semanticColors.includes(props.color.split('.')[0])) {\n        const [color, variant = 'main'] = props.color.split('.')\n        // @ts-expect-error - todo.\n        value = palette[color][variant]\n      } else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {\n        value = props.color\n      }\n    }\n    return value\n  }\n\n  return {\n    root: {\n      color: getColor,\n      fontSize: getFontSize,\n      width: '1em',\n      height: '1em',\n      strokeWidth: '1.3px',\n    },\n  }\n})\n"],"names":[],"mappings":";;AAKO,MAAM,aAAa,GAAG,UAAU,CAAoB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAI;AAClF,IAAA,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAc,KAAI;QAC3C,QAAQ,IAAI;AACV,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,OAAO,CAAC,GAAG,CAAC;AACrB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,OAAO,CAAC,CAAC,CAAC;AACnB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,OAAO,CAAC,GAAG,CAAC;AACrB,YAAA,KAAK,aAAa;AAChB,gBAAA,OAAO,OAAO,CAAC,CAAC,CAAC;AACnB,YAAA;AACE,gBAAA,OAAO,SAAS;;AAEtB,KAAC;AAED,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAiB,KAAI;AACrC,QAAA,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;QACtF,IAAI,KAAK,GAAG,SAAS;AACrB,QAAA,IAAI,KAAK,CAAC,KAAK,EAAE;AACf,YAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;AACtD,gBAAA,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;gBAExD,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;;AAC1B,iBAAA,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE;AACrD,gBAAA,KAAK,GAAG,KAAK,CAAC,KAAK;;;AAGvB,QAAA,OAAO,KAAK;AACd,KAAC;IAED,OAAO;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,QAAQ,EAAE,WAAW;AACrB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,WAAW,EAAE,OAAO;AACrB,SAAA;KACF;AACH,CAAC;;;;"}

package/build/esm/util/selectDisplay.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/**
+ * Replaces Material UI's display computation for a single-value select, so an empty one
+ * renders no zero-width space. Pass the same children given to the select, and set
+ * `displayEmpty`, otherwise Material UI skips `renderValue` while the value is empty.
+ * Values are compared as strings, the way Material UI compares its own non-object values.
+ */
+export declare const renderSelectValue: (children: ReactNode) => (selected: unknown) => ReactNode;

package/build/esm/util/selectDisplay.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+// Material UI renders <span>&#8203;</span> whenever a select has nothing to display, and a
+// screen reader announces that zero-width space as part of the combobox value. Returning
+// null or an empty string from renderValue brings that placeholder back, so an empty select
+// renders an empty span instead. The field keeps its height either way, from the min-height
+// Material UI sets on the display element.
+const emptySelectDisplay = React.createElement("span", { "aria-hidden": "true" });
+const isOption = (child) => React.isValidElement(child);
+/**
+ * Replaces Material UI's display computation for a single-value select, so an empty one
+ * renders no zero-width space. Pass the same children given to the select, and set
+ * `displayEmpty`, otherwise Material UI skips `renderValue` while the value is empty.
+ * Values are compared as strings, the way Material UI compares its own non-object values.
+ */
+const renderSelectValue = (children) => (selected) => React.Children.toArray(children)
+    .filter(isOption)
+    .find((option) => String(option.props.value) === String(selected))?.props.children ?? emptySelectDisplay;
+
+export { renderSelectValue };
+//# sourceMappingURL=selectDisplay.js.map

package/build/esm/util/selectDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectDisplay.js","sources":["../../../src/util/selectDisplay.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\n\n// Material UI renders <span>&#8203;</span> whenever a select has nothing to display, and a\n// screen reader announces that zero-width space as part of the combobox value. Returning\n// null or an empty string from renderValue brings that placeholder back, so an empty select\n// renders an empty span instead. The field keeps its height either way, from the min-height\n// Material UI sets on the display element.\nconst emptySelectDisplay = <span aria-hidden=\"true\" />\n\ntype Option = ReactElement<{ children?: ReactNode; value?: unknown }>\n\nconst isOption = (child: ReactNode): child is Option => React.isValidElement(child)\n\n/**\n * Replaces Material UI's display computation for a single-value select, so an empty one\n * renders no zero-width space. Pass the same children given to the select, and set\n * `displayEmpty`, otherwise Material UI skips `renderValue` while the value is empty.\n * Values are compared as strings, the way Material UI compares its own non-object values.\n */\nexport const renderSelectValue =\n  (children: ReactNode) =>\n  (selected: unknown): ReactNode =>\n    React.Children.toArray(children)\n      .filter(isOption)\n      .find((option) => String(option.props.value) === String(selected))?.props.children ?? emptySelectDisplay\n"],"names":[],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,KAAkB,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,MAAM,GAAG;AAItD,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAsB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;AAEnF;;;;;AAKG;MACU,iBAAiB,GAC5B,CAAC,QAAmB,KACpB,CAAC,QAAiB,KAChB,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ;KAC5B,MAAM,CAAC,QAAQ;KACf,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,IAAI;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popmenu/common-ui",
-  "version": "0.172.1",
+  "version": "0.172.3",
   "license": "MIT",
   "author": "Popmenu Design System Team",
   "description": "React components for all Popmenu apps on the web.",
@@ -31,5 +31,5 @@
     "react": "18.x || 19.x"
   },
   "sideEffects": false,
-  "gitHead": "b0c3500e2ec768ddf4856c1983c6787fc540b0f0"
+  "gitHead": "b7adfd39a80e94956a2df92c3c95ba7500d57d17"
 }