orcs-design-system 3.5.13 → 3.5.15

package/es/components/ActionsMenu/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["as"],
+const _excluded = ["as", "Component", "fullWidth", "ariaLabel", "aria-label"],
   _excluded2 = ["theme", "onToggle", "toggleState", "direction", "menuWidth", "customTriggerComponent", "renderTrigger", "children", "ariaLabel", "onTriggerFocus", "closeMenu", "closeOnClick", "data-testid", "variant", "disabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -86,13 +86,23 @@ export const ActionsMenuItem = /*#__PURE__*/styled(props => {
     onItemClick,
     actionMenu
   } = useContext(ActionMenuContext);
+
+  // fullWidth and ariaLabel stripped so they are not forwarded to DOM (use aria-label)
   const {
-      as
+      as,
+      Component: CustomComponent,
+      fullWidth,
+      ariaLabel,
+      "aria-label": ariaLabelProp
     } = props,
     others = _objectWithoutProperties(props, _excluded);
+  void fullWidth;
+  const ariaLabelValue = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp;
   const Component = as ? as : others.href ? "a" : "button";
   const disabled = props.disabled;
-  let newProps = _objectSpread(_objectSpread({}, others), (actionMenu === null || actionMenu === void 0 || (_actionMenu$getItemPr = actionMenu.getItemProps) === null || _actionMenu$getItemPr === void 0 ? void 0 : _actionMenu$getItemPr.call(actionMenu)) || {});
+  let newProps = _objectSpread(_objectSpread(_objectSpread({}, others), ariaLabelValue != null ? {
+    "aria-label": ariaLabelValue
+  } : {}), (actionMenu === null || actionMenu === void 0 || (_actionMenu$getItemPr = actionMenu.getItemProps) === null || _actionMenu$getItemPr === void 0 ? void 0 : _actionMenu$getItemPr.call(actionMenu)) || {});
   const {
     onClick: originalOnClick
   } = newProps;
@@ -101,10 +111,18 @@ export const ActionsMenuItem = /*#__PURE__*/styled(props => {
     originalOnClick === null || originalOnClick === void 0 || originalOnClick(e);
   }, [originalOnClick, onItemClick]);
   if (props.to) {
-    const LinkedComponent = props.Component || Component;
+    if (CustomComponent) {
+      return /*#__PURE__*/_jsx(CustomComponent, _objectSpread(_objectSpread({
+        to: props.to
+      }, newProps), {}, {
+        $fullWidth: Boolean(props.fullWidth),
+        onClick: onClick,
+        disabled: disabled
+      }));
+    }
     return /*#__PURE__*/_jsx(StyledNavLink, {
       to: props.to,
-      children: /*#__PURE__*/_jsx(LinkedComponent, _objectSpread({}, newProps))
+      children: /*#__PURE__*/_jsx(Component, _objectSpread({}, newProps))
     });
   }
   if (Component === "button") {
@@ -113,7 +131,8 @@ export const ActionsMenuItem = /*#__PURE__*/styled(props => {
       ["data-action-menu-id"]: id
     });
   }
-  if (props.Component) return /*#__PURE__*/_jsx(props.Component, _objectSpread(_objectSpread({}, newProps), {}, {
+  if (CustomComponent) return /*#__PURE__*/_jsx(CustomComponent, _objectSpread(_objectSpread({}, newProps), {}, {
+    $fullWidth: Boolean(props.fullWidth),
     onClick: onClick,
     disabled: disabled
   }));

package/es/components/Grid/index.js

@@ -12,7 +12,7 @@ import PropTypes from "prop-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridStyles = compose(space, layout, grid, flex, color);
 const GridWrapper = /*#__PURE__*/styled("div").withConfig({
-  shouldForwardProp,
+  shouldForwardProp: prop => prop !== "loading" && shouldForwardProp(prop),
   displayName: "GridWrapper",
   componentId: "sc-1rlajun-0"
 }).attrs(props => ({

package/es/components/Select/index.js

@@ -31,9 +31,12 @@ const Label = /*#__PURE__*/styled("label").withConfig({
   shouldForwardProp,
   displayName: "Label",
   componentId: "sc-bfi43f-1"
-}).attrs(props => ({
-  for: props.id
-}))(props => css({
+}).attrs(props => {
+  var _props$htmlFor;
+  return {
+    htmlFor: (_props$htmlFor = props.htmlFor) !== null && _props$htmlFor !== void 0 ? _props$htmlFor : props.id
+  };
+})(props => css({
   display: "block",
   color: props.inverted ? themeGet("colors.white")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props),
   fontSize: themeGet("fontSizes.0")(props),
@@ -370,7 +373,8 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
     "data-testid": props["data-testid"],
     "data-select-wrapper": "true"
   }, SelectStyles), {}, {
-    children: [props.label && /*#__PURE__*/_jsxs(Label, {
+    children: [props.label && props.inputId && /*#__PURE__*/_jsxs(Label, {
+      id: "".concat(props.inputId, "-label"),
       inverted: props.inverted,
       bold: props.bold,
       htmlFor: props.inputId,
@@ -389,7 +393,8 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       isMulti: props.isMulti,
       classNamePrefix: props.classNamePrefix,
       onChange: props.onChange,
-      "aria-label": props.ariaLabel
+      "aria-label": props.ariaLabel,
+      "aria-labelledby": props.label && props.inputId ? "".concat(props.inputId, "-label") : undefined
     }, props), {}, {
       components: components
     }))]

package/es/components/StatusDot/index.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["icon", "children"];
+const _excluded = ["icon", "children", "data-testId"],
+  _excluded2 = ["data-testid"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from "react";
@@ -66,12 +67,21 @@ const StatusDotItem = /*#__PURE__*/styled("div").withConfig({
   }
 }), StatusDotStyles);
 export default function StatusDot(_ref) {
+  var _props$dataTestid;
   let {
       icon,
-      children
+      children,
+      "data-testId": dataTestIdCamel
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(StatusDotItem, _objectSpread(_objectSpread({}, props), {}, {
+  const dataTestid = (_props$dataTestid = props["data-testid"]) !== null && _props$dataTestid !== void 0 ? _props$dataTestid : dataTestIdCamel;
+  const {
+      "data-testid": stripDataTestid
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded2);
+  void stripDataTestid;
+  return /*#__PURE__*/_jsx(StatusDotItem, _objectSpread(_objectSpread({}, rest), {}, {
+    "data-testid": dataTestid,
     icon: icon,
     children: children
   }));
@@ -84,7 +94,10 @@ StatusDot.propTypes = {
   /** Can specify an Icon componet as a child item */
   children: PropTypes.node,
   /** Specifies the system design theme. */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** data-testid for testing (accepts data-testid or data-testId; only data-testid is forwarded to DOM) */
+  "data-testid": PropTypes.string,
+  "data-testId": PropTypes.string
 };
 StatusDot.__docgenInfo = {
   "description": "",
@@ -137,6 +150,20 @@ StatusDot.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "data-testid": {
+      "description": "data-testid for testing (accepts data-testid or data-testId; only data-testid is forwarded to DOM)",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "data-testId": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
     }
   }
 };

package/es/components/Tabs/index.js

@@ -26,14 +26,14 @@ const VisibleTabs = /*#__PURE__*/styled.div.withConfig({
 const activeTabStyle = /*#__PURE__*/css(["background-color:", ";color:", ";border-bottom:2px solid ", ";cursor:default;font-weight:", ";&:hover,&:focus{background-color:", ";color:", ";border-bottom:2px solid ", ";box-shadow:none;}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("fontWeights.3"), themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"));
 const TabStyles = /*#__PURE__*/css(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out,border-bottom 200ms ease-in-out;border-bottom:2px solid ", ";padding:0 ", ";height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover:not(.active){background-color:", ";color:", ";border-bottom:2px solid ", ";box-shadow:none;}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
   let {
-    fullWidth
+    $fullWidth
   } = _ref;
-  return fullWidth ? "100%" : "fit-content";
+  return $fullWidth ? "100%" : "fit-content";
 }, themeGet("colors.greyLighter"), themeGet("space.4"), themeGet("appScale.tabsHeight"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyDark"), _ref2 => {
   let {
-    tabInShowMore
+    $tabInShowMore
   } = _ref2;
-  return tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
+  return $tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
 }, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLight"), themeGet("colors.primaryLightest"), activeTabStyle);
 const NavTab = /*#__PURE__*/styled(NavLink).withConfig({
   displayName: "NavTab",
@@ -79,9 +79,9 @@ const getTabSharedProps = function (tab) {
     id: tab.id,
     "data-testid": tab["data-testid"]
   }, tabInShowMore && {
-    tabInShowMore
+    $tabInShowMore: true
   }), fullWidth && {
-    fullWidth
+    fullWidth: true
   }), {}, {
     role: "tab"
   });

package/es/components/TextInput/index.js

@@ -14,7 +14,12 @@ import { themeGet } from "@styled-system/theme-get";
 import useInputFocus from "../../hooks/useInputFocus";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InputStyles = compose(space, layout);
+
+// For Group (div): block styled-system props and input-specific props so they don't leak to DOM
 const shouldForwardProp = createShouldForwardProp([...props, "type", "placeholder", "defaultValue", "disabled", "maxLength", "pattern", "required", "autocomplete", "autofocus", "step", "readonly"]);
+
+// For Input/NumberInput: only block styled-system props + invalid/valid (so type, placeholder, value reach the DOM)
+const inputShouldForwardProp = prop => prop !== "invalid" && prop !== "valid" && createShouldForwardProp(props)(prop);
 const Group = /*#__PURE__*/styled("div").withConfig({
   shouldForwardProp,
   displayName: "Group",
@@ -38,13 +43,17 @@ const InputStyle = /*#__PURE__*/css(["display:block;cursor:text;-moz-appearance:
   let bottom = 6;
   return "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px");
 }, props => props.invalid ? themeGet("colors.danger")(props) : props.valid ? themeGet("colors.success")(props) : themeGet("colors.black30")(props), props => props.floating ? css(["&::placeholder{color:transparent;}&:not(:placeholder-shown){~ label{transform:translateY(-10px);font-size:", ";}}&:-ms-input-placeholder:not(:focus){~ label{transform:translateY(-10px);font-size:", ";}}&:not(:-ms-input-placeholder){~ label{transform:translateY(-10px);font-size:", ";}}"], themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props)) : css(["&::placeholder{color:", ";}"], themeGet("colors.grey")(props)), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.floating ? css(["&::placeholder{color:", ";}~ label{transform:translateY(-10px);font-size:", ";color:", ";}"], themeGet("colors.greyLight")(props), themeGet("fontSizes.0")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)) : css([""]));
-const Input = /*#__PURE__*/styled("input").attrs(props => ({
+const Input = /*#__PURE__*/styled("input").withConfig({
+  shouldForwardProp: inputShouldForwardProp
+}).attrs(props => ({
   "data-testid": props["data-testid"] ? props["data-testid"] : null
 })).withConfig({
   displayName: "Input",
   componentId: "sc-shde0o-2"
 })(["", ""], InputStyle);
-const NumberInput = /*#__PURE__*/styled(NumericFormat).attrs(props => ({
+const NumberInput = /*#__PURE__*/styled(NumericFormat).withConfig({
+  shouldForwardProp: inputShouldForwardProp
+}).attrs(props => ({
   "data-testid": props["data-testid"] ? props["data-testid"] : null
 })).withConfig({
   displayName: "NumberInput",
@@ -107,7 +116,10 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       getInputRef: getNumberInputRef,
       "data-testid": props["data-testid"],
       id: id,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      "aria-invalid": invalid !== null && invalid !== void 0 ? invalid : undefined,
+      invalid: invalid,
+      valid: valid
     }, rest), {}, {
       height: height
     }, numberProps)) : /*#__PURE__*/_jsx(Input, _objectSpread({
@@ -115,7 +127,10 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       height: height,
       ref: inputRef,
       id: id,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      "aria-invalid": invalid !== null && invalid !== void 0 ? invalid : undefined,
+      invalid: invalid,
+      valid: valid
     }, rest)), label && floating ? /*#__PURE__*/_jsx(Label, {
       floating: floating,
       invalid: invalid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.5.13",
+  "version": "3.5.15",
   "engines": {
     "node": ">=20.0.0"
   },
@@ -187,4 +187,4 @@
   "files": [
     "es"
   ]
-}
+}