@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Select/components/SelectOptions.js

@@ -0,0 +1,219 @@
+import { jsx as s, jsxs as O, Fragment as P } from "react/jsx-runtime";
+import { getValueAsEvent as E } from "../../../helpers/form/getValueAsEvent.js";
+import { useCallback as F, useRef as $, useId as D, useEffect as T } from "react";
+import { IressSelectSearch as z } from "../SelectSearch/SelectSearch.js";
+import { toArray as B } from "../../../helpers/formatting/toArray.js";
+import { IressSelectMenu as C } from "../SelectMenu/SelectMenu.js";
+import { IressAlert as G } from "../../Alert/Alert.js";
+import "../../Alert/Alert.styles.js";
+import { IressSelectSearchInput as H } from "../SelectSearchInput/SelectSearchInput.js";
+import { IressSelectHeading as J } from "../SelectHeading/SelectHeading.js";
+import "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Menu/MenuItem/MenuItem.styles.js";
+import "../../Menu/MenuGroup/MenuGroup.styles.js";
+import { IressMenuDivider as K } from "../../Menu/MenuDivider/MenuDivider.js";
+import "../../Menu/MenuGroup/MenuGroup.js";
+import "../../Menu/MenuItem/MenuItem.js";
+import "../../Menu/MenuText/MenuText.js";
+const W = ({
+  minSearchLength: e,
+  multiSelect: r,
+  onChange: i,
+  query: I,
+  results: o,
+  shouldShowInstructions: d,
+  shouldShowNoResults: c,
+  value: t
+}) => /* @__PURE__ */ s(
+  C,
+  {
+    heading: r ? "Search results" : void 0,
+    items: o,
+    multiSelect: r,
+    noResults: (() => {
+      if (I) {
+        if (d)
+          return `Type at least ${e} character${e === 1 ? "" : "s"} to search`;
+        if (c)
+          return "No results found";
+      }
+    })(),
+    onChange: i,
+    selected: t,
+    hideSelectedItems: r
+  }
+);
+W.displayName = "SelectAsyncResults";
+const j = ({ error: e }) => e ? /* @__PURE__ */ s(G, { status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ O(P, { children: [
+  "An unknown error occurred.",
+  /* @__PURE__ */ s("br", {}),
+  " Please contact support if the error persists."
+] }) }) : null;
+j.displayName = "SelectAsyncError";
+const k = ({
+  autoHighlight: e,
+  error: r,
+  loading: i,
+  minSearchLength: I,
+  multiSelect: o,
+  onChange: d,
+  onClear: c,
+  query: t,
+  results: p,
+  setQuery: f,
+  show: A,
+  value: l,
+  shouldShowInstructions: x,
+  shouldShowNoResults: S
+}) => {
+  const n = B(l).map(
+    (a) => {
+      const { formattedLabel: g, ...R } = a;
+      return R;
+    }
+  ), m = !r && (!!p?.length || t && !i), u = !!n.length && o, b = m && u, h = $(null), y = D();
+  T(() => {
+    A || f?.("");
+  }, [A, f]);
+  const v = u ? n.length + 1 : 0;
+  return /* @__PURE__ */ O(
+    z,
+    {
+      activator: /* @__PURE__ */ s(
+        H,
+        {
+          "aria-label": "Search",
+          loading: i,
+          onChange: (a) => f?.(a.target.value),
+          ref: h,
+          placeholder: "Search and select",
+          value: t
+        }
+      ),
+      autoHighlight: e,
+      focusStartIndex: e ? t && m ? v : u ? 1 : 0 : void 0,
+      children: [
+        u && /* @__PURE__ */ s(
+          C,
+          {
+            "aria-labelledby": y,
+            heading: /* @__PURE__ */ s(
+              J,
+              {
+                clearAll: !0,
+                onClearAll: (a) => {
+                  c?.(a), h.current?.focus();
+                },
+                children: /* @__PURE__ */ O("h2", { id: y, children: [
+                  "Selected (",
+                  n.length,
+                  ")"
+                ] })
+              }
+            ),
+            items: n,
+            multiSelect: o,
+            onChange: d,
+            selected: l
+          }
+        ),
+        b && /* @__PURE__ */ s(K, {}),
+        m && /* @__PURE__ */ s(
+          W,
+          {
+            minSearchLength: I,
+            multiSelect: o,
+            onChange: d,
+            query: t,
+            results: p,
+            value: l,
+            shouldShowInstructions: x,
+            shouldShowNoResults: S
+          }
+        ),
+        /* @__PURE__ */ s(j, { error: r })
+      ]
+    }
+  );
+};
+k.displayName = "SelectAsyncOptions";
+const L = ({
+  autoHighlight: e,
+  debouncedQuery: r,
+  error: i,
+  initialOptions: I,
+  loading: o,
+  minSearchLength: d,
+  multiSelect: c,
+  onChange: t,
+  options: p,
+  query: f,
+  renderOptions: A,
+  results: l,
+  setQuery: x,
+  setShow: S,
+  setValue: n,
+  show: m,
+  shouldShowInstructions: u,
+  shouldShowNoResults: b,
+  value: h
+}) => {
+  const y = typeof p == "function", v = I ?? (y ? [] : p), M = l.length ? l : v, N = F(
+    (g) => {
+      n(g), t?.(E(g), g), c || S(!1);
+    },
+    [S, n, t, c]
+  ), a = F(
+    (g) => {
+      g.stopPropagation();
+      const R = [];
+      n(R), t?.(E([]), R);
+    },
+    [n, t]
+  );
+  return A ? A({
+    close: () => S(!1),
+    debouncedQuery: r,
+    error: i,
+    handleClear: a,
+    handleMenuChange: N,
+    loading: o,
+    query: f,
+    results: M,
+    setValue: n,
+    setQuery: x,
+    show: m,
+    value: h
+  }) : y ? /* @__PURE__ */ s(
+    k,
+    {
+      autoHighlight: e,
+      error: i,
+      loading: o,
+      minSearchLength: d,
+      multiSelect: c,
+      onChange: N,
+      onClear: a,
+      query: f,
+      results: l,
+      setQuery: x,
+      show: m,
+      value: h,
+      shouldShowInstructions: u,
+      shouldShowNoResults: b
+    }
+  ) : /* @__PURE__ */ s(
+    C,
+    {
+      items: M,
+      multiSelect: c,
+      onChange: N,
+      selected: h
+    }
+  );
+};
+L.displayName = "SelectOptions";
+export {
+  L as SelectOptions
+};

package/dist/components/Select/hooks/useSelectState.d.ts

@@ -0,0 +1,17 @@
+import { ControlledStateHook, ControlledStateProps } from '../../../hooks/useControlledState';
+import { LabelValueMeta } from '../../../interfaces';
+export interface SelectStateHookReturn<T extends LabelValueMeta = LabelValueMeta, TMultiple extends boolean = false> extends ControlledStateHook<T, TMultiple> {
+    getLabelsArray: () => string[];
+    getLabelsString: (separator?: string) => string;
+    getValuesArray: () => string[];
+    getValuesString: () => string;
+}
+/**
+ * This is a wrapper around useControlledState that provides additional helper functions for working with rich select state.
+ * - getLabelsArray: Returns an array of the labels of the selected items, used to create tags.
+ * - getLabelsString: Returns a string of the labels of the selected items, separated by the provided separator. Used for displaying in inputs.
+ * - getValuesArray: Returns an array of the values of the selected items. Used to compare current and previous values.
+ * - getValuesString: Returns a string of the values of the selected items, separated by commas. Used for submitting form data.
+ *
+ */
+export declare const useSelectState: <T extends LabelValueMeta = LabelValueMeta, TMultiple extends boolean = false>(props: ControlledStateProps<T, TMultiple>) => SelectStateHookReturn<T, TMultiple>;

package/dist/components/Select/hooks/useSelectState.js

@@ -0,0 +1,18 @@
+import { toArray as a } from "../../../helpers/formatting/toArray.js";
+import { useControlledState as o } from "../../../hooks/useControlledState.js";
+import { getFormControlValueAsString as u } from "../../../helpers/form/getFormControlValueAsString.js";
+const g = (r) => {
+  const t = o(r);
+  return {
+    ...t,
+    getLabelsArray: () => a(t.value).map((e) => e.label),
+    getLabelsString: (e = ",") => a(t.value).map((l) => l.label).join(e),
+    getValuesArray: () => a(t.value).map(
+      (e) => u(e.value)
+    ),
+    getValuesString: () => a(t.value).map((e) => e.value).join(",")
+  };
+};
+export {
+  g as useSelectState
+};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,11 @@
+export * from './Select';
+export * from './SelectBody/SelectBody';
+export * from './SelectCreate/SelectCreate';
+export * from './SelectHeading/SelectHeading';
+export * from './SelectLabel/SelectLabel';
+export * from './SelectMenu/SelectMenu';
+export * from './SelectSearch/SelectSearch';
+export * from './SelectSearchInput/SelectSearchInput';
+export * from './SelectTags/SelectTags';
+export * from './Select.styles';
+export * from './components/NativeSelect.styles';

package/dist/components/Select/index.js

@@ -1,8 +1,24 @@
-import { select as o } from "./Select.styles.js";
-import { IressSelect as s } from "./Select.js";
-import { IressSelectOption as c } from "./SelectOption/SelectOption.js";
+import { I as t } from "../../Autocomplete-BRMDwwwT.js";
+import { IressSelectBody as s } from "./SelectBody/SelectBody.js";
+import { IressSelectCreate as l } from "./SelectCreate/SelectCreate.js";
+import { IressSelectHeading as S } from "./SelectHeading/SelectHeading.js";
+import { IressSelectLabel as m } from "./SelectLabel/SelectLabel.js";
+import { IressSelectMenu as I } from "./SelectMenu/SelectMenu.js";
+import { IressSelectSearch as n } from "./SelectSearch/SelectSearch.js";
+import { IressSelectSearchInput as g } from "./SelectSearchInput/SelectSearchInput.js";
+import { IressSelectTags as i } from "./SelectTags/SelectTags.js";
+import { select as b } from "./Select.styles.js";
+import { nativeSelect as y } from "./components/NativeSelect.styles.js";
 export {
-  s as IressSelect,
-  c as IressSelectOption,
-  o as select
+  t as IressSelect,
+  s as IressSelectBody,
+  l as IressSelectCreate,
+  S as IressSelectHeading,
+  m as IressSelectLabel,
+  I as IressSelectMenu,
+  n as IressSelectSearch,
+  g as IressSelectSearchInput,
+  i as IressSelectTags,
+  y as nativeSelect,
+  b as select
 };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,28 @@
+import { IressStyledProps } from '../../types';
+import { IressCSSProps } from '../../interfaces';
+type SkeletonMode = 'rect' | 'circle' | 'text';
+export interface IressSkeletonProps<TMode extends SkeletonMode = 'text'> extends Omit<IressStyledProps, 'width' | 'height'> {
+    /**
+     * Sets the height of the skeleton bones. If no unit is specified it will default to pixels.
+     * Not allowed when in `text` mode.
+     */
+    height?: TMode extends 'text' ? never : string;
+    /**
+     * Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+     * @default text
+     */
+    mode?: TMode;
+    /**
+     * Use `textStyle` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+     */
+    textStyle?: IressCSSProps['textStyle'];
+    /**
+     * Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+     */
+    width?: string;
+}
+export declare const IressSkeleton: {
+    <TMode extends SkeletonMode = "text">({ className, height, width, mode: modeProp, style, "data-testid": dataTestId, ...restProps }: IressSkeletonProps<TMode>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -1,13 +1,13 @@
 import { jsx as s, Fragment as p } from "react/jsx-runtime";
 import { toCSSLengthValue as i } from "../../helpers/formatting/toCSSLengthValue.js";
-import { IressText as x } from "../Text/Text.js";
-import { skeleton as S } from "./Skeleton.styles.js";
+import { IressText as S } from "../Text/Text.js";
+import { skeleton as x } from "./Skeleton.styles.js";
 import { c as f } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as h } from "../../enums.js";
-const T = ({
+const k = ({
   className: m,
-  height: t,
-  width: e,
+  height: e,
+  width: t,
   mode: n,
   style: a,
   "data-testid": l,
@@ -15,14 +15,14 @@ const T = ({
 }) => {
   const o = n ?? "text", r = o === "text", c = {
     ...a,
-    width: e && i(e),
-    height: r ? void 0 : t && i(t)
+    width: t && i(t),
+    height: r ? void 0 : e && i(e)
   };
   return /* @__PURE__ */ s(
-    x,
+    S,
     {
       ...d,
-      className: f(m, S({ mode: o }), h.Skeleton),
+      className: f(m, x({ mode: o }), h.Skeleton),
       style: c,
       "aria-hidden": "true",
       "data-testid": l,
@@ -30,6 +30,7 @@ const T = ({
     }
   );
 };
+k.displayName = "IressSkeleton";
 export {
-  T as IressSkeleton
+  k as IressSkeleton
 };

package/dist/components/Skeleton/Skeleton.styles.js

@@ -1,8 +1,8 @@
-import { c as t } from "../../cva-JiDXAa83.js";
+import { c as t } from "../../cva-3iuaj0TL.js";
 const o = t({
   base: {
     backgroundColor: "colour.neutral.30",
-    borderRadius: "radius.025",
+    borderRadius: "radius.1",
     _motionReduce: {
       animation: "none"
     },

package/dist/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,19 @@
+import { ElementType, ReactElement, ReactNode } from 'react';
+import { ButtonRef, IressButtonProps } from '../Button';
+export type IressSkipLinkProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressButtonProps<C, THref> & {
+    /**
+     * Description of where the skip link jumps to.
+     * @default 'Skip to content'
+     */
+    children?: ReactNode;
+    /**
+     * Contains a URL or a URL fragment that the skip link points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href?: THref;
+};
+export declare const IressSkipLink: (<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressSkipLinkProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement) & {
+    displayName: "IressSkipLink";
+};

package/dist/components/SkipLink/SkipLink.js

@@ -1,23 +1,24 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { I as p } from "../../Button-mmhMLwp9.js";
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { I as m } from "../../Button-C0p8bEXn.js";
 import "../Button/CloseButton/CloseButton.js";
 import { c as k } from "../../cx-DN21T1EH.js";
 import { skipLink as n } from "./SkipLink.styles.js";
 import { GlobalCSSClass as a } from "../../enums.js";
-const f = n(), c = ({
+const e = n(), f = ({
   children: o = "Skip to content",
   className: i,
-  ...r
-}, s) => /* @__PURE__ */ t(
-  p,
+  ...s
+}, r) => /* @__PURE__ */ p(
+  m,
   {
-    ...r,
-    className: k(i, f, a.SkipLink),
-    ref: s,
+    ...s,
+    className: k(i, e, a.SkipLink),
+    ref: r,
     children: o
   }
-), b = m(c);
+), c = t(f);
+c.displayName = "IressSkipLink";
 export {
-  b as IressSkipLink
+  c as IressSkipLink
 };

package/dist/components/SkipLink/SkipLink.styles.js

@@ -1,4 +1,4 @@
-import { c as t } from "../../cva-JiDXAa83.js";
+import { c as t } from "../../cva-3iuaj0TL.js";
 const s = t({
   base: {
     position: "absolute",

package/dist/components/Slideout/Slideout.d.ts

@@ -0,0 +1,85 @@
+import { ReactElement, ReactNode, MutableRefObject } from 'react';
+import { OpenChangeReason } from '@floating-ui/react';
+import { FloatingUIContainer, IressStyledProps } from '../../types';
+export interface IressSlideoutProps extends IressStyledProps {
+    /**
+     * Content to be displayed within the slideout.
+     */
+    children?: ReactNode;
+    /**
+     * Screenreader text for close button.
+     * @default 'Close'
+     */
+    closeText?: string;
+    /**
+     * The container element to render the slideout into.
+     * By default, the slideout will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * When set to `true` the slideout will be visible.
+     * Use for uncontrolled slideouts.
+     */
+    defaultShow?: boolean;
+    /**
+     * The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference.
+     * Will be ignored if `mode` is not set to `push` or if element does not exist.
+     */
+    eleToPush?: string | HTMLElement | MutableRefObject<HTMLElement | null>;
+    /**
+     * Panel to place slideout controls.
+     */
+    footer?: ReactNode;
+    /**
+     * Sets the heading for the slideout.
+     * If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+     */
+    heading?: ReactElement | string;
+    /**
+     * Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+     */
+    id?: string;
+    /**
+     * Sets how the Slideout interacts with the content of the page.
+     * `overlay` overlays the page content, obscuring the content below.
+     * `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+     * @default 'overlay'
+     */
+    mode?: 'overlay' | 'push';
+    /**
+     * Emitted when the slideout has opened or closed internally.
+     * Use for controlled slideouts.
+     */
+    onShowChange?: (show: boolean, reason?: OpenChangeReason) => void;
+    /**
+     * Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+     */
+    onStatus?: (status: 'unmounted' | 'initial' | 'open' | 'close') => void;
+    /**
+     * Emitted when the slideout has opened.
+     */
+    onEntered?: () => void;
+    /**
+     * Emitted when the slideout has closed.
+     */
+    onExited?: () => void;
+    /**
+     * Position of the slideout relative to the page. `left` or `right`.
+     * @default 'right'
+     */
+    position?: 'right' | 'left';
+    /**
+     * When set to `true` the slideout will be visible.
+     * Use for controlled slideouts.
+     */
+    show?: boolean;
+    /**
+     * Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+     * @default 'sm'
+     */
+    size?: 'sm' | 'md';
+}
+export declare const IressSlideout: {
+    ({ children, className, closeText, container, "data-testid": dataTestid, defaultShow, eleToPush, footer, heading: headingProp, mode, onEntered, onExited, onShowChange, onStatus, onTransitionEnd, position, show, size, style, ...restProps }: IressSlideoutProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};