@j2-health/design-system 0.6.0 → 0.6.2

package/dist/src/utils/useRender.js

@@ -0,0 +1,73 @@
+import { cloneElement, createElement, isValidElement, useCallback, version } from "react";
+import cx from "classnames";
+//#region src/utils/useRender.ts
+/** Sets one ref. Returns a callback ref's cleanup, if it gave one. */
+var setRef = (ref, value) => {
+	if (typeof ref === "function") return ref(value);
+	if (ref) ref.current = value;
+};
+/**
+* One callback ref that feeds every ref given to it. When a callback ref
+* returns a cleanup (React 19), detaching runs it instead of passing null.
+*/
+var composeRefs = (...refs) => (value) => {
+	const cleanups = refs.map((ref) => setRef(ref, value));
+	if (!cleanups.some((cleanup) => typeof cleanup === "function")) return;
+	return () => cleanups.forEach((cleanup, index) => typeof cleanup === "function" ? cleanup() : setRef(refs[index], null));
+};
+/** `composeRefs`, kept stable while the refs are. */
+var useMergedRefs = (...refs) => useCallback((value) => composeRefs(...refs)(value), refs);
+/**
+* Merges prop objects left to right. Later props win, except that event
+* handlers all run (last first), classNames join, styles combine and refs
+* all receive the element. An `undefined` handler or ref leaves an earlier
+* one in place. The merged ref is a new function on every call, so React
+* reattaches it on each render, as with any inline callback ref.
+*/
+var mergeProps = (...sources) => {
+	const merged = {};
+	for (const source of sources) {
+		if (!source) continue;
+		for (const [key, value] of Object.entries(source)) {
+			const existing = merged[key];
+			if ((key === "ref" || /^on[A-Z]/.test(key)) && value === void 0) continue;
+			else if (key === "ref" && existing) merged.ref = composeRefs(existing, value);
+			else if (/^on[A-Z]/.test(key) && typeof existing === "function" && typeof value === "function") merged[key] = (...args) => {
+				value(...args);
+				existing(...args);
+			};
+			else if (key === "className") merged.className = cx(existing, value);
+			else if (key === "style") merged.style = {
+				...existing,
+				...value
+			};
+			else merged[key] = value;
+		}
+	}
+	return merged;
+};
+var isReact19 = Number(version.split(".")[0]) >= 19;
+/**
+* The ref an element was created with: a prop in React 19, a field in 18.
+* Reading the field in 19 logs a deprecation warning, so branch on version.
+*/
+var elementRef = (element) => isReact19 ? element.props.ref : element.ref;
+var useRender = ({ render, props, ref, state, defaultTagName = "div" }) => {
+	const element = isValidElement(render) ? render : void 0;
+	const mergedRef = useMergedRefs(ref, element && elementRef(element));
+	const rendered = typeof render === "function" ? render({
+		...props,
+		ref: mergedRef
+	}, state) : element ? cloneElement(element, {
+		...mergeProps(props, element.props),
+		ref: mergedRef
+	}) : createElement(defaultTagName, {
+		...props,
+		ref: mergedRef
+	});
+	return rendered.type === "button" && rendered.props.type === void 0 ? cloneElement(rendered, { type: "button" }) : rendered;
+};
+//#endregion
+export { mergeProps, useRender };
+
+//# sourceMappingURL=useRender.js.map

package/dist/src/utils/useRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRender.js","names":[],"sources":["../../../src/utils/useRender.ts"],"sourcesContent":["// A port of Base UI's `render` prop: its `useRender` hook and `mergeProps`\n// utility (https://base-ui.com/react/utils/use-render), adapted without the\n// dependency and cut down to what this library uses. Base UI also maps state\n// to data-* attributes and takes arrays of refs; neither is needed here.\n//\n// A component keeps its own element and props, and lets the app swap the\n// element: pass an element to merge onto, or a function that receives the\n// props (and the component's state) and returns the element. Unlike Base UI,\n// a <button> that ends up with no `type` gets `type=\"button\"`, so swapping\n// an element in never makes a form submit button by accident.\n//\n// Base UI is distributed under the MIT License:\n//\n// Copyright (c) 2019 Material-UI SAS\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to\n// deal in the Software without restriction, including without limitation the\n// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n// sell copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS\n// IN THE SOFTWARE.\nimport {\n  cloneElement,\n  createElement,\n  isValidElement,\n  useCallback,\n  version,\n  type HTMLAttributes,\n  type JSX,\n  type ReactElement,\n  type Ref,\n  type RefCallback,\n} from 'react'\nimport cx from 'classnames'\n\nexport type RenderProps = HTMLAttributes<HTMLElement> & {\n  [key: string]: unknown\n}\n\n/**\n * Replaces a component's element. Pass an element to merge the component's\n * props onto, e.g. `<button />`, or a function that spreads them:\n * `(props, state) => <button {...props} onClick={…} />`.\n */\nexport type RenderProp<State> =\n  | ReactElement\n  | ((\n      props: RenderProps & { ref: RefCallback<HTMLElement> },\n      state: State\n    ) => ReactElement)\n\n/** Sets one ref. Returns a callback ref's cleanup, if it gave one. */\nconst setRef = <T>(ref: Ref<T> | undefined, value: T | null) => {\n  if (typeof ref === 'function') return ref(value)\n  if (ref) (ref as { current: T | null }).current = value\n}\n\n/**\n * One callback ref that feeds every ref given to it. When a callback ref\n * returns a cleanup (React 19), detaching runs it instead of passing null.\n */\nconst composeRefs =\n  <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n  (value: T | null) => {\n    const cleanups = refs.map((ref) => setRef(ref, value))\n    if (!cleanups.some((cleanup) => typeof cleanup === 'function')) return\n    return () =>\n      cleanups.forEach((cleanup, index) =>\n        typeof cleanup === 'function' ? cleanup() : setRef(refs[index], null)\n      )\n  }\n\n/** `composeRefs`, kept stable while the refs are. */\nconst useMergedRefs = <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n  useCallback((value: T | null) => composeRefs(...refs)(value), refs)\n\n/**\n * Merges prop objects left to right. Later props win, except that event\n * handlers all run (last first), classNames join, styles combine and refs\n * all receive the element. An `undefined` handler or ref leaves an earlier\n * one in place. The merged ref is a new function on every call, so React\n * reattaches it on each render, as with any inline callback ref.\n */\nexport const mergeProps = (\n  ...sources: (RenderProps | undefined)[]\n): RenderProps => {\n  const merged: RenderProps = {}\n  for (const source of sources) {\n    if (!source) continue\n    for (const [key, value] of Object.entries(source)) {\n      const existing = merged[key]\n      if ((key === 'ref' || /^on[A-Z]/.test(key)) && value === undefined) {\n        continue\n      } else if (key === 'ref' && existing) {\n        merged.ref = composeRefs(\n          existing as Ref<unknown>,\n          value as Ref<unknown>\n        )\n      } else if (\n        /^on[A-Z]/.test(key) &&\n        typeof existing === 'function' &&\n        typeof value === 'function'\n      ) {\n        merged[key] = (...args: unknown[]) => {\n          value(...args)\n          existing(...args)\n        }\n      } else if (key === 'className') {\n        merged.className = cx(existing as string, value as string)\n      } else if (key === 'style') {\n        merged.style = { ...(existing as object), ...(value as object) }\n      } else {\n        merged[key] = value\n      }\n    }\n  }\n  return merged\n}\n\nconst isReact19 = Number(version.split('.')[0]) >= 19\n\n/**\n * The ref an element was created with: a prop in React 19, a field in 18.\n * Reading the field in 19 logs a deprecation warning, so branch on version.\n */\nconst elementRef = (element: ReactElement): Ref<HTMLElement> | undefined =>\n  isReact19\n    ? (element.props as { ref?: Ref<HTMLElement> }).ref\n    : (element as unknown as { ref?: Ref<HTMLElement> }).ref\n\nexport const useRender = <State>({\n  render,\n  props,\n  ref,\n  state,\n  defaultTagName = 'div',\n}: {\n  render?: RenderProp<State>\n  /** The component's own props, already merged with what it was given. */\n  props: RenderProps\n  ref?: Ref<HTMLElement>\n  /** Passed to a `render` function as its second argument. */\n  state: State\n  defaultTagName?: keyof JSX.IntrinsicElements\n}): ReactElement => {\n  const element = isValidElement(render) ? render : undefined\n  const mergedRef = useMergedRefs(ref, element && elementRef(element))\n\n  const rendered =\n    typeof render === 'function'\n      ? render({ ...props, ref: mergedRef }, state)\n      : element\n        ? cloneElement(element, {\n            ...mergeProps(props, element.props as RenderProps),\n            ref: mergedRef,\n          } as RenderProps)\n        : createElement(defaultTagName, { ...props, ref: mergedRef })\n  return rendered.type === 'button' &&\n    (rendered.props as RenderProps).type === undefined\n    ? cloneElement(rendered, { type: 'button' } as RenderProps)\n    : rendered\n}\n"],"mappings":";;;;AA+DA,IAAM,UAAa,KAAyB,UAAoB;CAC9D,IAAI,OAAO,QAAQ,YAAY,OAAO,IAAI,KAAK;CAC/C,IAAI,KAAK,IAA+B,UAAU;AACpD;;;;;AAMA,IAAM,eACA,GAAG,UACN,UAAoB;CACnB,MAAM,WAAW,KAAK,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;CACrD,IAAI,CAAC,SAAS,MAAM,YAAY,OAAO,YAAY,UAAU,GAAG;CAChE,aACE,SAAS,SAAS,SAAS,UACzB,OAAO,YAAY,aAAa,QAAQ,IAAI,OAAO,KAAK,QAAQ,IAAI,CACtE;AACJ;;AAGF,IAAM,iBAAoB,GAAG,SAC3B,aAAa,UAAoB,YAAY,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG,IAAI;;;;;;;;AASpE,IAAa,cACX,GAAG,YACa;CAChB,MAAM,SAAsB,CAAC;CAC7B,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,CAAC,QAAQ;EACb,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,GAAG;GACjD,MAAM,WAAW,OAAO;GACxB,KAAK,QAAQ,SAAS,WAAW,KAAK,GAAG,MAAM,UAAU,KAAA,GACvD;QACK,IAAI,QAAQ,SAAS,UAC1B,OAAO,MAAM,YACX,UACA,KACF;QACK,IACL,WAAW,KAAK,GAAG,KACnB,OAAO,aAAa,cACpB,OAAO,UAAU,YAEjB,OAAO,QAAQ,GAAG,SAAoB;IACpC,MAAM,GAAG,IAAI;IACb,SAAS,GAAG,IAAI;GAClB;QACK,IAAI,QAAQ,aACjB,OAAO,YAAY,GAAG,UAAoB,KAAe;QACpD,IAAI,QAAQ,SACjB,OAAO,QAAQ;IAAE,GAAI;IAAqB,GAAI;GAAiB;QAE/D,OAAO,OAAO;EAElB;CACF;CACA,OAAO;AACT;AAEA,IAAM,YAAY,OAAO,QAAQ,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK;;;;;AAMnD,IAAM,cAAc,YAClB,YACK,QAAQ,MAAqC,MAC7C,QAAkD;AAEzD,IAAa,aAAoB,EAC/B,QACA,OACA,KACA,OACA,iBAAiB,YASC;CAClB,MAAM,UAAU,eAAe,MAAM,IAAI,SAAS,KAAA;CAClD,MAAM,YAAY,cAAc,KAAK,WAAW,WAAW,OAAO,CAAC;CAEnE,MAAM,WACJ,OAAO,WAAW,aACd,OAAO;EAAE,GAAG;EAAO,KAAK;CAAU,GAAG,KAAK,IAC1C,UACE,aAAa,SAAS;EACpB,GAAG,WAAW,OAAO,QAAQ,KAAoB;EACjD,KAAK;CACP,CAAgB,IAChB,cAAc,gBAAgB;EAAE,GAAG;EAAO,KAAK;CAAU,CAAC;CAClE,OAAO,SAAS,SAAS,YACtB,SAAS,MAAsB,SAAS,KAAA,IACvC,aAAa,UAAU,EAAE,MAAM,SAAS,CAAgB,IACxD;AACN"}

package/dist/style.css

@@ -792,7 +792,7 @@
   color: white;
   font-weight: 700;
 }
-._hemisphericSelect_1jnt4_1 {
+._hemisphericSelect_3wupe_1 {
   border-radius: 9999px !important;
 
   .ant-select-placeholder {
@@ -800,7 +800,7 @@
   }
 }
 
-._summarizedSelect_1jnt4_9 {
+._summarizedSelect_3wupe_9 {
   .ant-select-suffix {
     color: var(--j2-color-primary);
   }
@@ -837,7 +837,7 @@
   }
 }
 
-._isActive_1jnt4_46 {
+._isActive_3wupe_46 {
   background: var(--j2-color-primary) !important;
 
   .ant-select-selection-item-content {
@@ -849,21 +849,21 @@
   }
 }
 
-._menuContainer_1jnt4_58 .ant-select-item-option-selected {
+._menuContainer_3wupe_58 .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_1jnt4_58
+._menuContainer_3wupe_58
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._menuContainerMultiple_1jnt4_68 .ant-select-item-option-selected {
+._menuContainerMultiple_3wupe_68 .ant-select-item-option-selected {
   background: var(--j2-color-primary-bg-hover) !important;
 }
 
-._menuContainerMultiple_1jnt4_68
+._menuContainerMultiple_3wupe_68
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: inherit;
@@ -874,14 +874,14 @@
  * The select root owns its border and background in Ant Design 6.
  */
 
-._headlinedSelect_1jnt4_83.ant-select.ant-select-single {
+._headlinedSelect_3wupe_83.ant-select.ant-select-single {
   font-size: var(--j2-font-size-heading-2);
   height: 40px;
   width: -moz-fit-content !important;
   width: fit-content !important;
 }
 
-._headlinedSelect_1jnt4_83.ant-select {
+._headlinedSelect_3wupe_83.ant-select {
   background: transparent;
   padding-left: 0;
   padding-right: 4px;
@@ -890,13 +890,13 @@
   border-radius: 0;
 }
 
-._headlinedSelect_1jnt4_83.ant-select .ant-select-suffix {
+._headlinedSelect_3wupe_83.ant-select .ant-select-suffix {
   height: 16px;
   width: 16px;
   right: 0;
 }
 
-._headlinedSelect_1jnt4_83.ant-select .ant-select-content {
+._headlinedSelect_3wupe_83.ant-select .ant-select-content {
   font-weight: 600;
   line-height: 1.3;
 }
@@ -906,43 +906,43 @@
    too, so every click boxed the headline. The underline below already marks
    focus. `!important` because antd's status variants of that rule reach
    (0,5,1) specificity. */
-._headlinedSelect_1jnt4_83.ant-select {
+._headlinedSelect_3wupe_83.ant-select {
   outline: none !important;
 }
 
 /* Hover state - show underline */
-._headlinedSelect_1jnt4_83.ant-select:hover {
+._headlinedSelect_3wupe_83.ant-select:hover {
   border-bottom-color: var(--j2-color-primary);
 }
 
 /* Open/focused state - keep underline and text color */
-._headlinedSelect_1jnt4_83.ant-select-open,
-._headlinedSelect_1jnt4_83.ant-select-focused {
+._headlinedSelect_3wupe_83.ant-select-open,
+._headlinedSelect_3wupe_83.ant-select-focused {
   border-bottom-color: var(--j2-color-primary);
 }
 
-._headlinedSelect_1jnt4_83.ant-select-open .ant-select-content,
-._headlinedSelect_1jnt4_83.ant-select-focused .ant-select-content {
+._headlinedSelect_3wupe_83.ant-select-open .ant-select-content,
+._headlinedSelect_3wupe_83.ant-select-focused .ant-select-content {
   color: inherit;
 }
 
 /* Headline dropdown styles - needs !important to override .menuContainer */
-._menuContainer_1jnt4_58._headlinedMenuContainer_1jnt4_135
+._menuContainer_3wupe_58._headlinedMenuContainer_3wupe_135
   .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_1jnt4_58._headlinedMenuContainer_1jnt4_135
+._menuContainer_3wupe_58._headlinedMenuContainer_3wupe_135
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._clearAllButton_1jnt4_146 {
+._clearAllButton_3wupe_146 {
   color: var(--j2-color-primary);
 }
 
-._clearAllButton_1jnt4_146:hover {
+._clearAllButton_3wupe_146:hover {
   background-color: var(--j2-color-primary-bg-hover);
 }
 
@@ -950,30 +950,26 @@
  * Dropdown trigger (`trigger="dropdown"`)
  * Reads as emphasized text with an affordance, not as a link: semibold
  * primary text, no underline, and a fade on hover instead of a color shift.
- * Weight sits in the `components` layer so a consumer utility such as
- * `font-normal` on `rootClassName` still wins: Tailwind 4 emits utilities in
- * a later native layer, and Tailwind 3's are unlayered, which beats any layer.
- * Color stays unlayered, with `.ant-typography`, to beat antd's link color.
+ * The semibold weight is a utility class added in the component, skipped when
+ * the consumer passes its own `font-*` weight. No cascade layers here: this
+ * file is compiled into dist/style.css, and Tailwind 3 refuses a stylesheet
+ * that declares a components layer without its own Tailwind directives.
+ * Color needs `.ant-typography` to beat antd's link color.
  */
-@layer components {
-  ._dropdownTrigger_1jnt4_164 {
-    font-weight: 600;
-  }
-}
 
-._dropdownTrigger_1jnt4_164.ant-typography,
-._dropdownTrigger_1jnt4_164.ant-typography:hover,
-._dropdownTrigger_1jnt4_164.ant-typography:focus {
+._dropdownTrigger_3wupe_165.ant-typography,
+._dropdownTrigger_3wupe_165.ant-typography:hover,
+._dropdownTrigger_3wupe_165.ant-typography:focus {
   color: var(--j2-color-primary);
   text-decoration: none;
 }
 
-._dropdownTrigger_1jnt4_164.ant-typography:hover {
+._dropdownTrigger_3wupe_165.ant-typography:hover {
   opacity: 0.7;
 }
 
-._dropdownTrigger_1jnt4_164.ant-typography-disabled,
-._dropdownTrigger_1jnt4_164.ant-typography-disabled:hover {
+._dropdownTrigger_3wupe_165.ant-typography-disabled,
+._dropdownTrigger_3wupe_165.ant-typography-disabled:hover {
   color: var(--j2-color-text-disabled);
   opacity: 1;
 }
@@ -982,7 +978,7 @@
  * Field variant (`variant="field"`)
  * A form field: full width, the field's own text color, a muted caret.
  */
-._fieldSelect_1jnt4_190 .ant-select-suffix {
+._fieldSelect_3wupe_186 .ant-select-suffix {
   color: var(--j2-color-text-secondary);
 }
 ._pill_16f8w_1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j2-health/design-system",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "type": "module",
   "description": "J2 Health shared React component library",
   "repository": {
@@ -71,7 +71,6 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^6.3.4",
-    "@chromatic-com/storybook": "^5.3.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -79,49 +78,49 @@
     "@eslint/js": "^10.0.1",
     "@highcharts/react": "^5.3.0",
     "@phosphor-icons/react": "^2.1.7",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/addon-links": "^10.6.0",
-    "@storybook/react-vite": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.1",
+    "@storybook/addon-links": "^10.6.1",
+    "@storybook/react-vite": "^10.6.1",
     "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/lodash": "^4.17.14",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
-    "@vitejs/plugin-react": "^6.1.1",
+    "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "^5.0.1",
     "antd": "^6.6.5",
     "autoprefixer": "^10.6.1",
     "classnames": "^2.5.1",
-    "eslint": "^10.11.0",
+    "eslint": "^10.12.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.7",
-    "eslint-plugin-storybook": "^10.6.0",
+    "eslint-plugin-storybook": "^10.6.1",
     "formik": "^2.4.6",
-    "globals": "^17.12.0",
+    "globals": "^17.13.0",
     "happy-dom": "^20.14.5",
     "highcharts": "^13.1.1",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.28",
+    "postcss": "^8.5.29",
     "prettier": "^3.9.9",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "semver": "^7.8.5",
-    "storybook": "^10.6.0",
+    "storybook": "^10.6.1",
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.71.0",
-    "vite": "^8.3.0",
-    "vite-plugin-dts": "^5.1.1",
+    "typescript-eslint": "^8.71.1",
+    "vite": "^8.3.3",
+    "vite-plugin-dts": "^5.1.2",
     "vite-plugin-svgr": "^5.2.0",
-    "vitest": "^5.0.2",
+    "vitest": "^5.0.3",
     "yup": "^1.4.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.63.5"
+    "@rollup/rollup-linux-x64-gnu": "^4.64.0"
   },
   "eslintConfig": {
     "extends": [