@pingux/astro 2.210.6-alpha.0 → 2.212.0-alpha.0

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -204,7 +204,8 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     style: style,
     state: state,
     triggerRef: inputRef,
-    popoverRef: popoverRef
+    popoverRef: popoverRef,
+    offset: 5
   }, (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   }), (0, _react2.jsx)(_ScrollBox["default"], scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({

package/lib/cjs/components/LabelValuePairs/LabelValuePairs.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import PairLabel from './LabelValuePairsLabel';
+import Pair from './LabelValuePairsRow';
+import PairSubvalue from './LabelValuePairsSubvalue';
+import PairValue from './LabelValuePairsValue';
+declare const LabelValuePairs: React.ForwardRefExoticComponent<import("../../index").LabelValuePairsContainerProps & React.RefAttributes<HTMLElement>>;
+declare const LabelValuePairsWithSubcomponents: typeof LabelValuePairs & {
+    Row: typeof Pair;
+    Label: typeof PairLabel;
+    Value: typeof PairValue;
+    Subvalue: typeof PairSubvalue;
+};
+export default LabelValuePairsWithSubcomponents;
+export { Pair, PairLabel, PairSubvalue, PairValue, };

package/lib/cjs/components/LabelValuePairs/LabelValuePairs.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "Pair", {
+  enumerable: true,
+  get: function get() {
+    return _LabelValuePairsRow["default"];
+  }
+});
+_Object$defineProperty(exports, "PairLabel", {
+  enumerable: true,
+  get: function get() {
+    return _LabelValuePairsLabel["default"];
+  }
+});
+_Object$defineProperty(exports, "PairSubvalue", {
+  enumerable: true,
+  get: function get() {
+    return _LabelValuePairsSubvalue["default"];
+  }
+});
+_Object$defineProperty(exports, "PairValue", {
+  enumerable: true,
+  get: function get() {
+    return _LabelValuePairsValue["default"];
+  }
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../index");
+var _LabelValuePairsLabel = _interopRequireDefault(require("./LabelValuePairsLabel"));
+var _LabelValuePairsRow = _interopRequireDefault(require("./LabelValuePairsRow"));
+var _LabelValuePairsSubvalue = _interopRequireDefault(require("./LabelValuePairsSubvalue"));
+var _LabelValuePairsValue = _interopRequireDefault(require("./LabelValuePairsValue"));
+var _react2 = require("@emotion/react");
+var _excluded = ["children"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var displayName = 'LabelValuePairs';
+var LabelValuePairs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: ref,
+    variant: "labelValuePairs.container"
+  }, others), children);
+});
+LabelValuePairs.displayName = displayName;
+
+// The subcomponents are exported bare under a `Pair*` naming family (`Pair`, `PairLabel`,
+// `PairValue`, `PairSubvalue`) as the primary, terser usage — the short `Row`/`Label` names
+// can't be exported bare from the top-level barrel (`libs/astro/src/index.ts`) because they
+// already resolve to unrelated exports there: `Label` (a form-label component) and `Row`
+// (from react-stately). Prefixing sidesteps that collision. Static properties are also
+// attached so the namespaced `<LabelValuePairs.Row>` / `.Label` / `.Value` / `.Subvalue`
+// access keeps working; inside the namespace the short names are unambiguous.
+var LabelValuePairsWithSubcomponents = LabelValuePairs;
+LabelValuePairsWithSubcomponents.Row = _LabelValuePairsRow["default"];
+LabelValuePairsWithSubcomponents.Label = _LabelValuePairsLabel["default"];
+LabelValuePairsWithSubcomponents.Value = _LabelValuePairsValue["default"];
+LabelValuePairsWithSubcomponents.Subvalue = _LabelValuePairsSubvalue["default"];
+var _default = exports["default"] = LabelValuePairsWithSubcomponents;

package/lib/cjs/components/LabelValuePairs/LabelValuePairs.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as LabelValuePairsStories from './LabelValuePairs.stories';
+
+<Meta of={LabelValuePairsStories} isTemplate />
+
+# LabelValuePairs
+
+LabelValuePairs renders a vertical list of labelled key/value rows. It is intended for read-only detail views such as slide-over panels, summary tabs, and profile pages.
+
+Pairs are composed from child components. Each pair supports four value display modes, an optional help hint tooltip, a secondary sub-label, and an optional inline label icon or action element. Pairs with a falsy value are suppressed unless the pair is in a loading state.
+
+```jsx
+import { Icon, LabelValuePairs, Pair, PairLabel, PairValue, PairSubvalue } from '@pingux/astro';
+
+<LabelValuePairs>
+  <Pair>
+    <PairLabel helpHint="...">
+      Username
+      <Icon aria-hidden="true" title={{ name: '' }} icon={InformationIcon} />
+    </PairLabel>
+    <PairSubvalue>Optional secondary text</PairSubvalue>
+    <PairValue valueType={ValueTypes.COPYABLE}>jsmith</PairValue>
+  </Pair>
+</LabelValuePairs>
+```
+
+### Required Components
+
+`LabelValuePairs` is a public composition API, not a standalone data-driven component. Each pair must be composed from these building blocks, available both as named exports (`Pair`, `PairLabel`, `PairValue`, `PairSubvalue`) and, equivalently, as static properties on the parent (`LabelValuePairs.Row`, `.Label`, `.Value`, `.Subvalue`):
+
+- **`Pair`** — wraps one labelled entry. Expects a `PairLabel`, optionally a `PairSubvalue`, and a `PairValue` as children. Suppresses itself (renders nothing) when its `PairValue` child's content is falsy and not loading.
+- **`PairLabel`** — the pair's heading text, rendered as an `<h5>`. Accepts an optional `helpHint` prop. Its first child is the label text; an optional second child renders alongside it as an icon or action element (e.g. an `Icon` or `IconButton`).
+- **`PairValue`** — the pair's value content. Accepts `valueType` (see Value Types below) and `isLoading`.
+- **`PairSubvalue`** — optional secondary text rendered beneath the label.
+
+### Value Types
+
+Use the exported `ValueTypes` constant to select the display mode for a `PairValue`'s content.
+
+| `valueType` | Behavior |
+| ---- | --------- |
+| _(omitted)_ | Renders the value as plain `Text`. |
+| `ValueTypes.COPYABLE` | Wraps the value in `CopyText`, adding a copy-to-clipboard button. |
+| `ValueTypes.MASKED` | Displays bullet characters by default. An eye toggle reveals or hides the real value. |
+| `ValueTypes.ELEMENT` | Renders `Value`'s children directly as a React node — use for custom content. |
+
+### Loading State
+
+Set `isLoading` on `PairValue` to replace the value area with a skeleton placeholder. The pair still renders its label normally, and it renders even when `PairValue` has no children — useful when data is being fetched.
+
+### Accessibility
+
+This component adheres to standard heading and landmark semantics.
+
+#### Keyboard Navigation
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus through interactive elements: copy buttons, masked value toggles, and help hint triggers. |
+| Space or Enter | Activates the focused button (copy, show/hide, or help hint). |
+| Escape | Closes an open help hint popover. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- Each label heading is rendered as an **`<h5>`** element, preserving document outline semantics.
+- The `helpHint` trigger button uses **`aria-label`** derived from the row label (e.g. `"Client ID help hint"`).
+- The masked value toggle uses **`aria-label="Show content"`** or **`"Hide content"`** to reflect the current state.
+- Loading rows use **`role="alert"`** and **`aria-live="assertive"`** on the skeleton container so screen readers announce when content becomes available.

package/lib/cjs/components/LabelValuePairs/LabelValuePairs.stories.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithSubLabel = exports.WithMaskedValue = exports.WithLoadingState = exports.WithLabelIcon = exports.WithHelpHint = exports.WithCopyableValues = exports.Default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _LabelValuePairs = _interopRequireDefault(require("./LabelValuePairs.mdx"));
+var _labelValuePairsAttributes = require("./labelValuePairsAttributes");
+var _react2 = require("@emotion/react");
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _default = exports["default"] = {
+  title: 'Components/LabelValuePairs',
+  component: _.LabelValuePairs,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_LabelValuePairs["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: _objectSpread({}, _labelValuePairsAttributes.labelValuePairsArgTypes)
+};
+var Default = exports.Default = function Default(args) {
+  return (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Username"), (0, _react2.jsx)(_.PairValue, null, "jsmith")), (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Email"), (0, _react2.jsx)(_.PairValue, null, "jsmith@example.com")), (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Role"), (0, _react2.jsx)(_.PairValue, null, "Administrator")));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.labelValuePairs["default"]
+  }
+};
+var WithCopyableValues = exports.WithCopyableValues = function WithCopyableValues(args) {
+  return (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "API Key"), (0, _react2.jsx)(_.PairValue, {
+    valueType: _.ValueTypes.COPYABLE
+  }, "abc123def456ghi789")), (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Client Secret"), (0, _react2.jsx)(_.PairValue, {
+    valueType: _.ValueTypes.COPYABLE
+  }, "supersecretvalue")));
+};
+var WithMaskedValue = exports.WithMaskedValue = function WithMaskedValue(args) {
+  return (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Password"), (0, _react2.jsx)(_.PairValue, {
+    valueType: _.ValueTypes.MASKED
+  }, "mypassword123")));
+};
+var WithHelpHint = exports.WithHelpHint = function WithHelpHint(args) {
+  return (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, {
+    helpHint: "This is the unique identifier for your OAuth application."
+  }, "Client ID"), (0, _react2.jsx)(_.PairValue, null, "client-abc-123")));
+};
+var WithSubLabel = exports.WithSubLabel = function WithSubLabel(args) {
+  return (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Domain"), (0, _react2.jsx)(_.PairSubvalue, null, "The primary domain for your environment."), (0, _react2.jsx)(_.PairValue, null, "example.com")));
+};
+var WithLabelIcon = exports.WithLabelIcon = function WithLabelIcon(args) {
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
+  var icon = isOnyx ? (0, _react2.jsx)(_.IconWrapper, {
+    icon: _CheckIcon["default"],
+    color: "green",
+    size: "xs",
+    isCircle: true,
+    title: {
+      name: 'Verified'
+    },
+    iconProps: {
+      size: 'sm'
+    }
+  }) : (0, _react2.jsx)(_.NoticeIcon, {
+    color: "green",
+    status: _statuses["default"].SUCCESS,
+    "aria-label": "".concat(_statuses["default"].SUCCESS, "-icon"),
+    size: "xs"
+  });
+  return (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Status", (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    gap: "xs",
+    alignItems: "center"
+  }, icon, (0, _react2.jsx)(_.Text, {
+    variant: "listSubtitle",
+    color: isOnyx ? 'darkgreen' : 'green'
+  }, "Verified"))), (0, _react2.jsx)(_.PairValue, null, "Active")));
+};
+var WithLoadingState = exports.WithLoadingState = function WithLoadingState(args) {
+  return (0, _react2.jsx)(_.Box, {
+    width: "200px"
+  }, (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Username"), (0, _react2.jsx)(_.PairValue, {
+    isLoading: true
+  })), (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Email"), (0, _react2.jsx)(_.PairValue, {
+    isLoading: true
+  })), (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Role"), (0, _react2.jsx)(_.PairValue, {
+    isLoading: true
+  }))));
+};

package/lib/cjs/components/LabelValuePairs/LabelValuePairs.styles.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    container: {
+        gap: string;
+    };
+    fieldItem: {
+        gap: string;
+    };
+    value: {
+        fontWeight: number;
+        color: string;
+    };
+    subLabel: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+    };
+};
+export default _default;

package/lib/cjs/components/LabelValuePairs/LabelValuePairs.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var container = {
+  gap: 'md'
+};
+var fieldItem = {
+  gap: 'xs'
+};
+var value = {
+  fontWeight: 0,
+  color: 'secondary'
+};
+var subLabel = {
+  fontSize: 'sm',
+  fontWeight: 0,
+  color: 'secondary'
+};
+var _default = exports["default"] = {
+  container: container,
+  fieldItem: fieldItem,
+  value: value,
+  subLabel: subLabel
+};