@oracle/oraclejet-preact 15.1.3 → 15.1.5

package/es/Button-6dd5fcbb.js

@@ -0,0 +1,19 @@
+/* @oracle/oraclejet-preact: 15.1.5 */
+import { jsx } from 'preact/jsx-runtime';
+import './UNSAFE_BaseButton.js';
+import './UNSAFE_ButtonLayout.js';
+import { forwardRef } from 'preact/compat';
+import { B as ButtonLayout } from './ButtonLayout-d77f4c52.js';
+import { B as BaseButton } from './BaseButton-f4a900bd.js';
+
+/**
+ * A button is a pressable element that invokes an action.
+ */
+const Button = forwardRef(({ variant = 'outlined', isDisabled = false, isRepeat = false, size = 'md', display = 'all', endIcon, startIcon, autofocus, edge, onAction, label = '', 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart }, ref) => {
+    const labelOnly = (!startIcon && !endIcon) || display === 'label';
+    const content = labelOnly ? (label) : (jsx(ButtonLayout, { display: display, startIcon: startIcon, endIcon: endIcon, size: size, children: label }));
+    return (jsx(BaseButton, { ref: ref, isDisabled: isDisabled, isRepeat: isRepeat, size: size, width: width, autofocus: autofocus, edge: edge, variant: variant, styling: [labelOnly ? 'default' : 'min'], onAction: onAction, "aria-label": accessibleLabel ?? label, "aria-describedby": ariaDescribedBy, onBlur: onBlur, onFocus: onFocus, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart, children: content }));
+});
+
+export { Button as B };
+//# sourceMappingURL=Button-6dd5fcbb.js.map

package/es/Button-6dd5fcbb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-6dd5fcbb.js","sources":["../../src/UNSAFE_Button/Button.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps, Ref } from 'preact';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLayout } from '../UNSAFE_ButtonLayout';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { forwardRef } from 'preact/compat';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<\n  HTMLAttributesSignalExcluded<HTMLElement>,\n  | 'autofocus'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onMouseEnter'\n  | 'onMouseLeave'\n  | 'onTouchEnd'\n  | 'onTouchStart'\n>;\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\ntype Props = IntrinsicProps &\n  WidthProps & {\n    /**\n     * The startIcon is the button's start icon.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if repeated events are dispatched for key or pointer held down\n     */\n    isRepeat?: boolean;\n\n    /**\n     * label - button label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * aria-label - override label for accessibility\n     */\n    'aria-label'?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"ghost\": \"Ghost buttons are the least prominent variation. Ghost buttons are\n     * useful for performing low-priority tasks, such as manipulating the UI.\",\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\"\n     */\n    variant?: ComponentProps<typeof BaseButton>['variant'];\n\n    /**\n     * The size indicates how large the button is rendered.\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Edge can be used to specify that the button is intended to go at the bottom of\n     * a region, stretching from left to right.\n     */\n    edge?: ComponentProps<typeof BaseButton>['edge'];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void | null;\n\n    /**\n     * Display indicates whether only the label or all elements should be rendered by the button.\n     */\n    display?: 'label' | 'all';\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n  };\n/**\n * A button is a pressable element that invokes an action.\n */\nexport const Button = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      display = 'all',\n      endIcon,\n      startIcon,\n      autofocus,\n      edge,\n      onAction,\n      label = '',\n      'aria-label': accessibleLabel,\n      'aria-describedby': ariaDescribedBy,\n      width,\n      onBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart\n    }: Props,\n    ref?: Ref<HTMLButtonElement>\n  ) => {\n    const labelOnly = (!startIcon && !endIcon) || display === 'label';\n    const content = labelOnly ? (\n      label\n    ) : (\n      <ButtonLayout display={display} startIcon={startIcon} endIcon={endIcon} size={size}>\n        {label}\n      </ButtonLayout>\n    );\n    return (\n      <BaseButton\n        ref={ref as Ref<HTMLButtonElement> & Ref<HTMLAnchorElement> & Ref<HTMLSpanElement>}\n        isDisabled={isDisabled}\n        isRepeat={isRepeat}\n        size={size}\n        width={width}\n        autofocus={autofocus}\n        edge={edge}\n        variant={variant}\n        styling={[labelOnly ? 'default' : 'min']}\n        onAction={onAction}\n        aria-label={accessibleLabel ?? label}\n        aria-describedby={ariaDescribedBy}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onTouchEnd={onTouchEnd}\n        onTouchStart={onTouchStart}>\n        {content}\n      </BaseButton>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;AAuGA;;AAEG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,OAAO,GAAG,UAAU,EACpB,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,OAAO,EACP,SAAS,EACT,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACN,EACR,GAA4B,KAC1B;AACF,IAAA,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,IAAI,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,SAAS,IACvB,KAAK,KAELA,GAAA,CAAC,YAAY,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAA,QAAA,EAC/E,KAAK,EAAA,CACO,CAChB,CAAC;AACF,IAAA,QACEA,GAAC,CAAA,UAAU,IACT,GAAG,EAAE,GAA6E,EAClF,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,EACxC,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,eAAe,IAAI,KAAK,sBAClB,eAAe,EACjC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,YACzB,OAAO,EAAA,CACG,EACb;AACJ,CAAC;;;;"}

package/es/ButtonLayout-d77f4c52.js

@@ -0,0 +1,65 @@
+/* @oracle/oraclejet-preact: 15.1.5 */
+import { jsxs, jsx } from 'preact/jsx-runtime';
+
+import './utils/UNSAFE_classNames.js';
+import './UNSAFE_Text.js';
+import { c as classNames } from './classNames-6df97f98.js';
+import { T as Text } from './Text-5d60dbd2.js';
+
+const compStyles = {
+  text: "j1g06y",
+  suffix: "zctsmc",
+  icon: "_1fcmayi",
+  startText: "_1lewpdq",
+  endText: "rk3fti",
+  startIcon: "_104fatz",
+  startIconWhenBothIconsOnly: "kqik4d",
+  endIcon: "_1wdo27t",
+  label: "_1t99p7n"
+};
+const isNullOrUndefined = value => {
+  return value === null || value === undefined;
+};
+function ButtonLayout({
+  size = 'md',
+  display = 'all',
+  styling = 'default',
+  ...props
+}) {
+  const showIcons = display === 'all' || display === 'icons';
+  const showText = display === 'all' || display === 'label';
+  const labelClass = compStyles.label;
+  const isOnlyIcon = props.startIcon && (display === 'icons' || !props.children) && !props.endIcon;
+  const isEmbedded = styling === 'embedded';
+  const textStartIcon = !isNullOrUndefined(props.startIcon) && display === 'all';
+  const textEndIcon = !isNullOrUndefined(props.endIcon) && display === 'all';
+  const isTwoIcons = !isNullOrUndefined(props.startIcon) && !isNullOrUndefined(props.endIcon);
+  const isTwoIconsOnly = isTwoIcons && display === 'icons';
+  const endIconClass = `${compStyles.icon} oj-c-button-layout-${size} ${compStyles.endIcon}`;
+  const startIconStyles = classNames([compStyles.icon, isEmbedded ? `oj-c-button-layout-embedded-${size}` : `oj-c-button-layout-${size}`, !isOnlyIcon && compStyles.startIcon, isTwoIconsOnly && compStyles.startIconWhenBothIconsOnly]);
+  const textStyles = classNames([compStyles.text, textStartIcon && !props.suffix && !isTwoIcons && compStyles.endText, textEndIcon && !isTwoIcons && compStyles.startText]);
+  const suffixStyles = classNames([compStyles.suffix, textStartIcon && !isTwoIcons && compStyles.endText]);
+  return jsxs("span", {
+    class: labelClass,
+    children: [showIcons && props.startIcon && jsx("span", {
+      class: startIconStyles,
+      children: props.startIcon
+    }), showText && props.children && jsxs("span", {
+      class: textStyles,
+      children: [" ", props.children, " "]
+    }), showText && props.suffix && jsx("span", {
+      class: suffixStyles,
+      children: jsx(Text, {
+        truncation: 'ellipsis',
+        weight: 'inherit',
+        children: props.suffix
+      })
+    }), showIcons && props.endIcon && jsx("span", {
+      class: endIconClass,
+      children: props.endIcon
+    })]
+  });
+}
+
+export { ButtonLayout as B };
+//# sourceMappingURL=ButtonLayout-d77f4c52.js.map

package/es/ButtonLayout-d77f4c52.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLayout-d77f4c52.js","sources":["../../src/UNSAFE_ButtonLayout/ButtonLayout.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { Text } from '../UNSAFE_Text';\n\nexport type ButtonDisplay = 'icons' | 'label' | 'all';\n\nexport type Props = {\n  /**\n   *The default slot is the button's text label. The oj-c-button element accepts plain text or DOM nodes as children for the default slot.\"\n   */\n  children?: ComponentChildren;\n\n  /**\n   *The suffix is appended to the text label, used for menu buttons.\n   */\n  suffix?: string;\n\n  /**\n   * The startIcon is the button's start icon.\n   */\n  startIcon?: ComponentChildren;\n\n  /**\n   * The endIcon is the button's end icon.\n   */\n  endIcon?: ComponentChildren;\n\n  /**\n   * Styling can be used for customizing icon layout by limiting padding (\"embedded\")\n   */\n  styling?: 'default' | 'embedded';\n\n  /**\n   * The size indicates how large the button is rendered.\n   */\n  size?: ComponentProps<typeof BaseButton>['size'];\n\n  /**\n   * Display indicates whether the label, the icons, or all elements should be rendered by the button.\n   */\n  display?: ButtonDisplay;\n};\n\nexport const compStyles = {\n  text: cssProps`\n    ${{\n      overflowX: 'hidden',\n      overflowY: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      display: 'inline-block'\n    }}\n  `,\n  suffix: cssProps`\n    ${{\n      fontWeight: '300',\n      overflowX: 'hidden',\n      overflowY: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x)',\n      display: 'inline-flex'\n    }}\n  `,\n\n  icon: cssProps`\n    ${{\n      display: 'inline-flex',\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-size)',\n      fontWeight: 'normal',\n      marginTop: 0,\n      marginBottom: 0\n    }}\n  `,\n\n  startText: cssProps`\n    ${{\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  endText: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  startIcon: cssProps`\n  ${{\n    marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n  }}\n`,\n\n  startIconWhenBothIconsOnly: cssProps`\n  ${{\n    marginInlineEnd: 0,\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n  }}\n  `,\n\n  endIcon: cssProps`\n  ${{\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n    marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n  }}\n`,\n\n  label: cssProps`\n    ${{\n      cursor: 'inherit',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '100%',\n      height: '100%'\n    }}\n  `\n};\n\nconst isNullOrUndefined = (\n  value: ComponentChildren | null | undefined\n): value is null | undefined => {\n  return value === null || value === undefined;\n};\n\nexport function ButtonLayout({\n  size = 'md',\n  display = 'all',\n  styling = 'default',\n  ...props\n}: Props) {\n  const showIcons = display === 'all' || display === 'icons';\n  const showText = display === 'all' || display === 'label';\n  const labelClass = compStyles.label;\n  const isOnlyIcon = props.startIcon && (display === 'icons' || !props.children) && !props.endIcon;\n  const isEmbedded = styling === 'embedded';\n  const textStartIcon = !isNullOrUndefined(props.startIcon) && display === 'all';\n  const textEndIcon = !isNullOrUndefined(props.endIcon) && display === 'all';\n  const isTwoIcons = !isNullOrUndefined(props.startIcon) && !isNullOrUndefined(props.endIcon);\n  const isTwoIconsOnly = isTwoIcons && display === 'icons';\n\n  const endIconClass = `${compStyles.icon} oj-c-button-layout-${size} ${compStyles.endIcon}`;\n  const startIconStyles = classNames([\n    compStyles.icon,\n    isEmbedded ? `oj-c-button-layout-embedded-${size}` : `oj-c-button-layout-${size}`,\n    !isOnlyIcon && compStyles.startIcon,\n    isTwoIconsOnly && compStyles.startIconWhenBothIconsOnly\n  ]);\n  const textStyles = classNames([\n    compStyles.text,\n    textStartIcon && !props.suffix && !isTwoIcons && compStyles.endText,\n    textEndIcon && !isTwoIcons && compStyles.startText\n  ]);\n  const suffixStyles = classNames([\n    compStyles.suffix,\n    textStartIcon && !isTwoIcons && compStyles.endText\n  ]);\n\n  return (\n    <span class={labelClass}>\n      {showIcons && props.startIcon && <span class={startIconStyles}>{props.startIcon}</span>}\n      {showText && props.children && <span class={textStyles}> {props.children} </span>}\n      {showText && props.suffix && (\n        <span class={suffixStyles}>\n          <Text truncation={'ellipsis'} weight={'inherit'}>\n            {props.suffix}\n          </Text>\n        </span>\n      )}\n      {showIcons && props.endIcon && <span class={endIconClass}>{props.endIcon}</span>}\n    </span>\n  );\n}\n"],"names":["compStyles","isNullOrUndefined","value","undefined","ButtonLayout","size","display","styling","props","labelClass","label","isEmbedded","textStartIcon","startIcon","textEndIcon","endIcon","isTwoIcons","isTwoIconsOnly","endIconClass","icon","isOnlyIcon","text","startText","suffix","endText","_jsxs","class","children","showIcons","_jsx","startIconStyles","showText","textStyles","suffixStyles","Text","truncation","weight"],"mappings":";;;;;;;;AAoDA,MAAAA,UAAA,GAAA;QASG,QAAA;UAWA,QAAA;QAUA,UAAA;aAMA,UAAA;WAMA,QAAA;aAOF,UAAA;8BAOE,QAAA;WAOF,UAAA;;;AAcD,MAAAC,iBAAA,GAAAC,KAAA,IAAA;AAGE,EAAA,OAAAA,KAAA,KAAA,IAAA,IAAAA,KAAA,KAAAC,SAAA,CAAA;AACF,CAAA,CAAA;AAEA,SAAAC,YAAAA,CAAA;AAAAC,EAAAA,IAAA,GAAA,IAAA;AAAAC,EAAAA,OAAA,GAAA,KAAA;AAAAC,EAAAA,OAAA,GAAA,SAAA;EAAA,GAAAC,KAAAA;AAAA,CAAA,EAAA;;;AAQE,EAAA,MAAAC,UAAA,GAAAT,UAAA,CAAAU,KAAA,CAAA;;AAEA,EAAA,MAAAC,UAAA,GAAAJ,OAAA,KAAA,UAAA,CAAA;AACA,EAAA,MAAAK,aAAA,GAAA,CAAAX,iBAAA,CAAAO,KAAA,CAAAK,SAAA,CAAA,IAAAP,OAAA,KAAA,KAAA,CAAA;AACA,EAAA,MAAAQ,WAAA,GAAA,CAAAb,iBAAA,CAAAO,KAAA,CAAAO,OAAA,CAAA,IAAAT,OAAA,KAAA,KAAA,CAAA;AACA,EAAA,MAAAU,UAAA,GAAA,CAAAf,iBAAA,CAAAO,KAAA,CAAAK,SAAA,CAAA,IAAA,CAAAZ,iBAAA,CAAAO,KAAA,CAAAO,OAAA,CAAA,CAAA;AACA,EAAA,MAAAE,cAAA,GAAAD,UAAA,IAAAV,OAAA,KAAA,OAAA,CAAA;AAEA,EAAA,MAAAY,YAAA,GAAA,CAAAlB,EAAAA,UAAA,CAAAmB,IAAA,CAAAd,oBAAAA,EAAAA,IAAA,CAAAL,CAAAA,EAAAA,UAAA,CAAAe,OAAA,CAAA,CAAA,CAAA;sCAEEf,UAAA,CAAAmB,IAAA,qFAEA,CAAAC,UAAA,IAAApB,UAAA,CAAAa,SAAA,0DAED,CAAA,CAAA;iCAECb,UAAA,CAAAqB,IAAA,uEAEAP,WAAA,IAAA,CAAAE,UAAA,IAAAhB,UAAA,CAAAsB,SAAA,CACD,CAAA,CAAA;mCAECtB,UAAA,CAAAuB,MAAA,EACAX,aAAA,IAAA,CAAAI,UAAA,IAAAhB,UAAA,CAAAwB,OAAA,CACD,CAAA,CAAA;EAED,OAAAC,IAAA,CAAA,MAAA,EAAA;AAAAC,IAAAA,KAAA,EAAAjB,UAAA;IAAAkB,QAAA,EAAA,CAAAC,SAAA,IAAApB,KAAA,CAAAK,SAAA,IAAAgB,GAAA,CAAA,MAAA,EAAA;AAAAH,MAAAA,KAAA,EAAAI,eAAA;MAAAH,QAAA,EAAAnB,KAAA,CAAAK,SAAAA;KAAA,CAAA,EAAAkB,QAAA,IAAAvB,KAAA,CAAAmB,QAAA,IAAAF,IAAA,CAAA,MAAA,EAAA;AAAAC,MAAAA,KAAA,EAAAM,UAAA;MAAAL,QAAA,EAAA,CAAA,GAAA,EAAAnB,KAAA,CAAAmB,QAAA,EAAA,GAAA,CAAA;KAAA,CAAA,EAAAI,QAAA,IAAAvB,KAAA,CAAAe,MAAA,IAAAM,GAAA,CAAA,MAAA,EAAA;AAAAH,MAAAA,KAAA,EAAAO,YAAA;AAAAN,MAAAA,QAAA,EAAAE,GAAA,CAAAK,IAAA,EAAA;AAAAC,QAAAA,UAAA,EAAA,UAAA;AAAAC,QAAAA,MAAA,EAAA,SAAA;QAAAT,QAAA,EAAAnB,KAAA,CAAAe,MAAAA;OAAA,CAAA;KAAA,CAAA,EAAAK,SAAA,IAAApB,KAAA,CAAAO,OAAA,IAAAc,GAAA,CAAA,MAAA,EAAA;AAAAH,MAAAA,KAAA,EAAAR,YAAA;MAAAS,QAAA,EAAAnB,KAAA,CAAAO,OAAAA;AAAA,KAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAcF;;;;"}

package/es/CardGrid-2494cfe2.js

@@ -0,0 +1,428 @@
+/* @oracle/oraclejet-preact: 15.1.5 */
+import { jsx } from 'preact/jsx-runtime';
+import { useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback } from 'preact/hooks';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import { isKeyDefined, containsKey } from './utils/UNSAFE_keys.js';
+import { keyExtractor, getPrevNextKeyByCount, getFirstVisibleKey, findElementByKey, handleSelectionRange, getViewportConfig } from './utils/PRIVATE_collectionUtils.js';
+import { useId } from './hooks/UNSAFE_useId.js';
+import { useCurrentKey } from './hooks/PRIVATE_useCurrentKey.js';
+import { useCollectionFocusRing } from './hooks/PRIVATE_useCollectionFocusRing.js';
+import { useTabbableModeSet } from './hooks/PRIVATE_useTabbableModeSet.js';
+import { useSelection } from './hooks/PRIVATE_useSelection.js';
+import { Grid } from './UNSAFE_Grid.js';
+import { Selector } from './UNSAFE_Selector.js';
+import './UNSAFE_Skeleton.js';
+import { S as SkeletonContainer } from './SkeletonContainer-ff118096.js';
+import './PRIVATE_LoadMoreCollection.js';
+import { memo } from 'preact/compat';
+import './utils/UNSAFE_classNames.js';
+import { mergeRefs } from './utils/PRIVATE_refUtils.js';
+import './hooks/UNSAFE_useAnimation.js';
+import { TabbableModeContext } from './hooks/UNSAFE_useTabbableMode.js';
+import './UNSAFE_FocusTrap.js';
+import { multiVariantStyles, styles } from './UNSAFE_CardGrid/themes/CardGridStyles.css.js';
+import { c as classNames } from './classNames-6df97f98.js';
+import { u as useAnimation } from './useAnimation-6ccd68bf.js';
+import { F as FocusTrap } from './FocusTrap-46648548.js';
+import { L as LoadMoreCollection, a as LOADMORE_STYLE_CLASS } from './LoadMoreCollection-0ebb60c1.js';
+import { S as Skeleton } from './Skeleton-f735e119.js';
+
+const ITEM_STYLE_CLASS = 'oj-cardgrid-item';
+const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;
+/**
+ * The internal component used to render a single item in CardGrid.
+ */
+function CardGridItem({ children, itemKey, itemIndex, isTabbable, isFocused, isFocusRingVisible, isSelected, selectionMode, initialAnimation, setCardDimension }) {
+    const rootRef = useRef(null);
+    const variantClasses = multiVariantStyles({
+        itemFocused: isFocused && isFocusRingVisible ? 'isItemFocused' : 'isNotItemFocused',
+        itemInitialOpacity: initialAnimation ? 'isTransparent' : 'isNotTransparent'
+    });
+    const classes = classNames([ITEM_STYLE_CLASS, styles.itemStyle, variantClasses]);
+    // don't bubble Arrow Up/Down/Left/Right events to parent when in isTabbable mode
+    // this bubbling causes the outer CollectionFocus ring to change index while in the isTabbable mode.
+    const handleKeyDown = (event) => {
+        if (isTabbable &&
+            (event.key === 'ArrowDown' ||
+                event.key === 'ArrowUp' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight')) {
+            event.stopPropagation();
+        }
+    };
+    useLayoutEffect(() => {
+        const firstCard = rootRef.current?.firstElementChild;
+        if (setCardDimension && firstCard) {
+            setCardDimension({ width: firstCard.offsetWidth, height: firstCard.offsetHeight });
+        }
+    }, []);
+    // todo: issue track in JET-57681, we currently have two useAnimation() because the opacity and
+    // slide up/down have different durations, and the current API couldn't handle this case, we will
+    // update this once the API is updated
+    // animation for slide up/down
+    const { nodeRef: nodeRefSlide } = useAnimation(initialAnimation || 'none', animationConfigSlide(itemIndex));
+    // animation for opacity change
+    const { nodeRef: nodeRefOpacity } = useAnimation((initialAnimation && 'opacity') || 'none', animationConfigOpacity(itemIndex));
+    const itemRefs = useMemo(() => mergeRefs(rootRef, nodeRefSlide, nodeRefOpacity), 
+    // spot an issue when we click the cards during animation is processing, the cards would not finish
+    // the current animations and stay as what it is, e.g. leave itself as half transparent.
+    // add initialAnimation to the dependency to prevent this issue.
+    [rootRef, nodeRefSlide, nodeRefOpacity, initialAnimation]);
+    return (jsx("div", { id: useId(), ref: itemRefs, class: classes, role: "gridcell", "data-oj-key": itemKey, onKeyDown: handleKeyDown, "aria-selected": selectionMode === 'none' ? undefined : isSelected, ...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' }), children: jsx(TabbableModeContext.Provider, { value: { isTabbable }, children: jsx(FocusTrap, { isDisabled: !isTabbable, restoreFocusRef: false, children: children }) }) }));
+}
+const animationConfigSlide = (index) => {
+    return {
+        animationStates: {
+            slideUp: {
+                from: {
+                    translateY: '50px'
+                },
+                to: {
+                    translateY: '0px'
+                },
+                options: {
+                    duration: 300,
+                    delay: index * 50,
+                    easing: [0, 0, 0.2, 1]
+                }
+            },
+            slideDown: {
+                from: {
+                    translateY: '-50px'
+                },
+                to: {
+                    translateY: '0'
+                },
+                options: {
+                    duration: 300,
+                    delay: index * 50,
+                    easing: [0, 0, 0.2, 1]
+                }
+            }
+        },
+        isAnimatedOnMount: true
+    };
+};
+const animationConfigOpacity = (index) => {
+    return {
+        animationStates: {
+            opacity: {
+                from: {
+                    opacity: 0
+                },
+                to: {
+                    opacity: 1
+                },
+                options: {
+                    duration: 150,
+                    delay: index * 50,
+                    easing: 'linear'
+                }
+            }
+        },
+        isAnimatedOnMount: true
+    };
+};
+const MemoizeCardGridItem = memo(CardGridItem, (prev, next) => {
+    if (prev && next) {
+        return (prev.itemKey === next.itemKey &&
+            prev.itemIndex === next.itemIndex &&
+            prev.itemData === next.itemData &&
+            prev.isTabbable === next.isTabbable &&
+            prev.isFocused === next.isFocused &&
+            prev.isFocusRingVisible === next.isFocusRingVisible &&
+            prev.isSelected === next.isSelected &&
+            prev.initialAnimation === next.initialAnimation);
+    }
+    return false;
+});
+
+function CardGrid({ children, data, onLoadMore = () => { }, hasMore = false, getRowKey, currentKey, onCurrentKeyChange, selectionMode = 'none', selectedKeys = emptyKeys, onSelectionChange, viewportConfig, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, initialAnimation = 'slideUp', gutterSize = 'sm' }) {
+    const rootRef = useRef(null);
+    // tracking the anchor key which is used for shift+click selection
+    const anchorKey = useRef();
+    // tracking pending current key in pointer down event
+    const pendingCurrentKey = useRef();
+    const isInitialAnimation = useRef(true);
+    const [colCount, setColCount] = useState(0);
+    const [cardDimension, setCardDimension] = useState({ width: 0, height: 0 });
+    const gutterSizePX = gutterSizeMappings[gutterSize];
+    const gap = `${gutterSizePX / 4}x`;
+    const gridTemplateColumns = cardDimension.width
+        ? `repeat(auto-fit, ${cardDimension.width}px)`
+        : undefined;
+    const gridProps = { gap, gridTemplateColumns };
+    const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';
+    const ariaRowcount = hasMore || !data || colCount === 0 ? -1 : Math.ceil(data?.length / colCount);
+    /*****************************************************************************************/
+    /********************************* cardWidth and colCount ********************************/
+    /*****************************************************************************************/
+    // cards are fully rendered for the first time, only when cardWidth and colCount have defined and non-zero values
+    // for the first time, so the initial animation should not happen until this render.
+    useEffect(() => {
+        if (cardDimension.width && colCount) {
+            isInitialAnimation.current = false;
+        }
+    }, [cardDimension.width && colCount]);
+    const handleColCount = useCallback((rootWidth) => {
+        const newColCount = getColCount(gutterSizePX, cardDimension.width || DEFAULT_SKELETON_WIDTH, rootWidth);
+        if (newColCount > 0) {
+            setColCount(newColCount);
+        }
+    }, [gutterSizePX, cardDimension.width]);
+    useEffect(() => {
+        const root = rootRef?.current;
+        if (root) {
+            handleColCount(root.offsetWidth);
+        }
+    }, [handleColCount]);
+    const handleResize = useCallback((entries) => {
+        for (const entry of entries) {
+            // update colCount during resize
+            handleColCount(entry.contentRect.width);
+        }
+    }, [handleColCount]);
+    /**
+     * Set up resize observer and update the colCount, to ensure keyboard navigation is correct
+     * after the resize
+     */
+    useEffect(() => {
+        const root = rootRef.current;
+        if (root) {
+            const resizeObserver = new ResizeObserver((entries) => {
+                handleResize(entries);
+            });
+            resizeObserver.observe(root);
+            return () => {
+                resizeObserver.unobserve(root);
+            };
+        }
+        return undefined;
+    }, [handleResize]);
+    /*****************************************************************************************/
+    /************************************* Tabbable Mode *************************************/
+    /*****************************************************************************************/
+    const cardGridContains = (elem) => {
+        return !!rootRef.current?.contains(elem);
+    };
+    let pendingFocusRingChange = false;
+    const [isCurrentTabbableKey, tabbableModeProps] = useTabbableModeSet(cardGridContains, (element) => {
+        return keyExtractor(element, ITEM_SELECTOR);
+    }, currentKey, 
+    // handle clean-up on disabling of the mode
+    (target, isKeyboardEvent) => {
+        if (cardGridContains(target)) {
+            // delay focus reset for keyboard disable so focus is reset to CardGrid after the FocusTrap blur lifecycle completes.
+            // pointer initiated changes will fire the onBlur organically and delaying the focus, just generates an unwanted second blur
+            if (isKeyboardEvent) {
+                // do not show a focus ring during this timeOut
+                pendingFocusRingChange = true;
+                setTimeout(() => {
+                    rootRef.current?.focus();
+                }, 0);
+            }
+            else {
+                rootRef.current?.focus();
+            }
+        }
+        // otherwise target is not in list (including body, which target should be null in that case)
+    }, 
+    // set currentKey when mode is enabled
+    (key) => {
+        onCurrentKeyChange && onCurrentKeyChange({ value: key });
+    });
+    /*****************************************************************************************/
+    /********************************* Current Key and Focus *********************************/
+    /*****************************************************************************************/
+    const { currentKeyProps } = useCurrentKey((element) => keyExtractor(element, ITEM_SELECTOR), selectionMode !== 'multiple', 
+    // init a function every time to make sure we pass in the latest colCount.current,
+    // otherwise the new key might be wrong after resize
+    () => getPrevNextKeyByCount(data, getRowKey, currentKey, -colCount), () => getPrevNextKeyByCount(data, getRowKey, currentKey, colCount), () => getPrevNextKeyByCount(data, getRowKey, currentKey, -1), () => getPrevNextKeyByCount(data, getRowKey, currentKey, 1), currentKey, onCurrentKeyChange);
+    const [showFocusRing, focusRingProps] = useCollectionFocusRing(cardGridContains, [
+        'ArrowUp',
+        'ArrowDown',
+        'ArrowLeft',
+        'ArrowRight'
+    ]);
+    const handleInitialFocus = () => {
+        if (!isKeyDefined(currentKey) &&
+            onCurrentKeyChange &&
+            isCurrentTabbableKey(undefined) &&
+            rootRef.current) {
+            const firstKey = pendingCurrentKey.current || getFirstVisibleKey(rootRef.current, ITEM_SELECTOR);
+            if (isKeyDefined(firstKey)) {
+                onCurrentKeyChange({ value: firstKey });
+            }
+        }
+    };
+    /**
+     * Need to track pointer down element to set currentItem when initial focus happens
+     */
+    const handlePointerDown = (event) => {
+        const key = keyExtractor(event.target, ITEM_SELECTOR);
+        if (isKeyDefined(key)) {
+            pendingCurrentKey.current = key;
+        }
+    };
+    useEffect(() => {
+        if (currentKey != null && rootRef.current) {
+            const elem = findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);
+            if (elem) {
+                // make sure item is visible
+                elem.scrollIntoView({ block: 'nearest' });
+                const cell = elem.closest(`[role=gridcell]`);
+                if (cell) {
+                    // update aria-activedescendant for screen reader
+                    rootRef.current.setAttribute('aria-activedescendant', cell.id);
+                }
+            }
+        }
+        // listen to data because the current item would re-render when data is updated, i.e. the id
+        // of current item would be updated, so the currentKey itself couldn't guarantee the root has
+        // the latest aria-activedescendant
+    }, [currentKey, data]);
+    /*****************************************************************************************/
+    /*************************************** Selection ***************************************/
+    /*****************************************************************************************/
+    const handleSelectionChange = useCallback((detail) => {
+        if (onSelectionChange) {
+            if (detail.value.all === false && detail.value.keys.size > 0) {
+                // the last key selected by a user gesture is the anchor key
+                anchorKey.current = Array.from(detail.value.keys.values()).pop();
+            }
+            onSelectionChange(detail);
+        }
+    }, [anchorKey, onSelectionChange]);
+    const handleSelectionRangeChange = useCallback((detail) => {
+        if (data && onSelectionChange) {
+            const value = handleSelectionRange(detail, data, getRowKey);
+            // for non-virtualized CardGrid, value should always be an array
+            if (Array.isArray(value)) {
+                onSelectionChange({ value: { all: false, keys: new Set(value) }, target: null });
+            }
+        }
+    }, [data, onSelectionChange, onLoadMore]);
+    const { selectionProps } = useSelection((element) => {
+        if (element === rootRef.current) {
+            return currentKey === undefined ? null : currentKey;
+        }
+        return keyExtractor(element, ITEM_SELECTOR);
+    }, selectedKeys, selectionMode, false, 'replace', false, handleSelectionChange, anchorKey.current, currentKey, (currentKey, isPrev) => () => getPrevNextKeyByCount(data, getRowKey, currentKey, isPrev ? -colCount : colCount), (currentKey, isPrev) => () => getPrevNextKeyByCount(data, getRowKey, currentKey, isPrev ? -1 : 1), (key) => {
+        if (rootRef.current) {
+            const elem = findElementByKey(rootRef.current, key, ITEM_SELECTOR);
+            if (elem) {
+                elem.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, handleSelectionRangeChange);
+    /*****************************************************************************************/
+    /************************************ Child Component ************************************/
+    /*****************************************************************************************/
+    const getItemContext = useCallback((context) => {
+        const key = getRowKey(context.data);
+        const selectorRenderer = selectionMode === 'multiple'
+            ? () => (jsx(Selector, { onChange: onSelectionChange, rowKey: key, selectedKeys: selectedKeys }))
+            : undefined;
+        return {
+            index: context.index,
+            data: context.data,
+            metadata: { key: key },
+            selector: selectorRenderer,
+            isSelected: containsKey(selectedKeys, key)
+        };
+    }, [selectionMode, selectedKeys, onSelectionChange]);
+    const childrenComponent = (context) => {
+        const cardItemContext = getItemContext(context);
+        const isTabbable = isCurrentTabbableKey(cardItemContext.metadata.key);
+        const isFocused = currentKey === cardItemContext.metadata.key && !isTabbable;
+        const isFocusRingVisible = isFocused && showFocusRing && !pendingFocusRingChange;
+        const isSelected = cardItemContext.isSelected;
+        const cardGridFunc = (context) => (jsx(MemoizeCardGridItem, { itemKey: cardItemContext.metadata.key, itemIndex: cardItemContext.index, itemData: cardItemContext.data, isTabbable: isTabbable, isFocused: isFocused, isFocusRingVisible: isFocusRingVisible, isSelected: isSelected, selectionMode: selectionMode, ...(isInitialAnimation.current && { initialAnimation }), ...(context.index === 0 && { setCardDimension }), children: children(context) }, cardItemContext.metadata.key));
+        return cardGridFunc(cardItemContext);
+    };
+    // todo: issue track in JET-57952, need a way to show the skeletons in keyboard navigation
+    const skeletons = findDefaultLoadMoreIndicator(gridProps, data?.length || 0, colCount, cardDimension.height);
+    viewportConfig = getViewportConfig(rootRef, viewportConfig);
+    const collectionComponent = (jsx("div", { role: "row", children: jsx(Grid, { ...gridProps, children: jsx(LoadMoreCollection, { data: data, hasMore: hasMore, onLoadMore: onLoadMore, loadMoreIndicator: skeletons, loadMoreThreshold: gutterSizePX + 4, viewportConfig: viewportConfig, children: childrenComponent }) }) }));
+    return (jsx("div", { ...mergeProps(tabbableModeProps, currentKeyProps, focusRingProps, selectionProps, {
+            onFocus: handleInitialFocus,
+            onPointerDown: handlePointerDown
+        }), ref: rootRef, role: "grid", class: styles.baseStyle, tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-multiselectable": ariaMultiSelectable, "aria-rowcount": ariaRowcount, "aria-colcount": colCount, children: data == null ? defaultLoadingIndicator(gridProps) : collectionComponent }));
+}
+const emptyKeys = { all: false, keys: new Set() };
+/**
+ * A mapping of gutterSize to concrete size that can be passed into Grid component
+ * (specifically, in the format of `${number}x`)
+ */
+const gutterSizeMappings = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 48,
+    xl: 64
+};
+// these are arbitrary values by now, might update them with definite values in the future
+const DEFAULT_SKELETON_NUMBER = 25;
+const DEFAULT_SKELETON_WIDTH = 260;
+const DEFAULT_SKELETON_HEIGHT = 300;
+/**
+ * A function that returns an array of skeletons based on count
+ * @param count the number of skeletons
+ */
+const getSkeletonsByCount = (count, isUnique, height) => [...Array(count)].map(() => (
+// this map function keeps generating the same copy of skeletons with same keys even with useId() hook,
+// so combine id with time to make the key unique. create unique skeletons if needed, otherwise the
+// animations won't start at the same time
+jsx(SkeletonContainer, { minimumCount: 1, children: () => {
+        return jsx(Skeleton, { height: `calc(${height || DEFAULT_SKELETON_HEIGHT}px)` });
+    } }, isUnique && useId() + new Date().getTime())));
+/**
+ * The default loading indicator will display 25 card skeletons
+ * @param gridProps the Grid props
+ */
+const defaultLoadingIndicator = (gridProps) => (jsx(Grid, { ...gridProps, children: getSkeletonsByCount(DEFAULT_SKELETON_NUMBER) }));
+/**
+ * A function that will return the load more skeletons based on the number of columns and items, and return
+ * the corresponding number of columns that is used to layout the skeletons.
+ * @param gridProps the Grid props
+ * @param totalCount the number of all items
+ * @param colCount the number of columns in a row
+ */
+const findDefaultLoadMoreIndicator = (gridProps, totalCount, colCount, skeletonHeight) => {
+    // if the number of columns is unknown, return nothing
+    if (!colCount) {
+        return undefined;
+    }
+    const skeletonGridProps = { ...gridProps };
+    if (colCount && !totalCount) {
+        skeletonGridProps.gridTemplateColumns = `repeat(auto-fit, ${DEFAULT_SKELETON_WIDTH}px)`;
+    }
+    const skeletons = [];
+    const gridColumns = [];
+    const firstCount = colCount - (totalCount % colCount);
+    if (firstCount > 0) {
+        const firstSkeletons = getSkeletonsByCount(firstCount, true, skeletonHeight);
+        skeletons.push(firstSkeletons);
+        gridColumns.push(firstCount);
+    }
+    const secondCount = colCount;
+    if (firstCount < secondCount) {
+        const secondSkeletons = getSkeletonsByCount(secondCount, true, skeletonHeight);
+        skeletons.push(secondSkeletons);
+        gridColumns.push(secondCount);
+    }
+    // only apply LOADMORE_STYLE_CLASS on the first row, to avoid onLoadMore
+    // get called multiple times
+    const skeletonRows = skeletons.map((s, i) => (jsx("div", { ...(i == 0 && { class: LOADMORE_STYLE_CLASS }), style: { gridColumn: `span ${gridColumns[i]}` }, children: jsx(Grid, { ...skeletonGridProps, children: s }) })));
+    return skeletonRows;
+};
+const getColCount = (gapWidth, cardWidth, rootWidth) => {
+    if (!cardWidth || !rootWidth)
+        return 0;
+    // if we have n cards, we have n-1 gaps
+    const colCount = Math.floor((rootWidth + gapWidth) / (gapWidth + cardWidth));
+    return colCount;
+};
+
+export { CardGrid as C };
+//# sourceMappingURL=CardGrid-2494cfe2.js.map