@cloudscape-design/components 3.0.32 → 3.0.35

package/internal/components/abstract-switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAkBxD,SAAS,UAAU,CAAC,MAA8B;IAChD,OAAO,MAAM,CAAC,MAAM,CAAC,UAAC,KAAK,IAAsB,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAejB;;IAdpB,IAAA,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,wBAAwB,8BAAA,EACxB,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,iBAAiB,uBAAA,EACd,IAAI,cAd8B,0NAetC,CADQ;IAEP,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAM,EAAE,GAAG,SAAS,IAAI,QAAQ,CAAC;IAEjC,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,IAAM,SAAS,GAAG,UAAG,EAAE,aAAU,CAAC;IAClC,IAAM,OAAO,GAAG,UAAG,EAAE,WAAQ,CAAC;IAC9B,IAAM,aAAa,GAAG,UAAG,EAAE,iBAAc,CAAC;IAE1C,IAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;IACtD,IAAM,iBAAiB,GAAuC,EAAE,CAAC;IACjE,IAAI,CAAC,YAAY,EAAE;QACjB,iBAAiB,CAAC,EAAE,GAAG,SAAS,CAAC;QACjC,iBAAiB,CAAC,OAAO,GAAG,EAAE,CAAC;KAChC;IAED,IAAM,iBAAiB,GAAG,EAAE,CAAC;IAC7B,IAAI,KAAK,EAAE;QACT,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC;IACD,IAAI,cAAc,EAAE;QAClB,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KACxC;IAED,IAAM,eAAe,GAAG,EAAE,CAAC;IAC3B,IAAI,eAAe,EAAE;QACnB,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACvC;IACD,IAAI,WAAW,EAAE;QACf,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACrC;IAED,OAAO,CACL,wCAAS,IAAI,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACpF,oBAAC,cAAc,eACT,iBAAiB,IACrB,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,mBACnB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAE5C,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC;gBACpD,aAAa;gBACb,aAAa,uBACT,YAAY,KACf,EAAE,IAAA,EACF,QAAQ,UAAA,EACR,kBAAkB,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EACpF,iBAAiB,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,EACvF,YAAY,EAAE,SAAS,IACvB;gBAKF,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAC9B;YACP,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,eAAe,CAAC,CAAC;gBACrF,KAAK,IAAI,CACR,8BAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,YAAI,GAAC,MAAM,CAAC,gBAAgB,CAAC,IAAG,QAAQ,MAAG,IACvF,KAAK,CACD,CACR;gBACA,WAAW,IAAI,CACd,8BACE,EAAE,EAAE,aAAa,EACjB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW;wBAChC,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,QAAQ;wBAC1C,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,wBAAwB;4BAChE,IAED,WAAW,CACP,CACR,CACI,CACQ,CACb,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n  controlId?: string;\n  controlClassName: string;\n  disabled?: boolean;\n  nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n  styledControl: React.ReactElement;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  descriptionBottomPadding?: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  withoutLabel?: boolean;\n}\n\nfunction joinString(values: (string | undefined)[]) {\n  return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n  controlId,\n  controlClassName,\n  disabled,\n  nativeControl,\n  styledControl,\n  label,\n  description,\n  descriptionBottomPadding,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  withoutLabel,\n  __internalRootRef,\n  ...rest\n}: AbstractSwitchProps) {\n  const uniqueId = useUniqueId();\n  const id = controlId || uniqueId;\n\n  const focusVisible = useFocusVisible();\n  const wrapperId = `${id}-wrapper`;\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n\n  const WrapperElement = withoutLabel ? 'div' : 'label';\n  const wrapperAttributes: Record<string, string | undefined> = {};\n  if (!withoutLabel) {\n    wrapperAttributes.id = wrapperId;\n    wrapperAttributes.htmlFor = id;\n  }\n\n  const ariaLabelledByIds = [];\n  if (label) {\n    ariaLabelledByIds.push(labelId);\n  }\n  if (ariaLabelledby) {\n    ariaLabelledByIds.push(ariaLabelledby);\n  }\n\n  const ariaDescriptons = [];\n  if (ariaDescribedby) {\n    ariaDescriptons.push(ariaDescribedby);\n  }\n  if (description) {\n    ariaDescriptons.push(descriptionId);\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.wrapper, rest.className)} ref={__internalRootRef}>\n      <WrapperElement\n        {...wrapperAttributes}\n        className={styles['label-wrapper']}\n        aria-disabled={disabled ? 'true' : undefined}\n      >\n        <span className={clsx(styles.control, controlClassName)}>\n          {styledControl}\n          {nativeControl({\n            ...focusVisible,\n            id,\n            disabled,\n            'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined,\n            'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n            'aria-label': ariaLabel,\n          })}\n          {/*\n          An empty element to display the outline, because the native control is invisible.\n          Note: There is a CSS selector in src/toggle/styles.scss that relies on a span element selector to show focus.\n          */}\n          <span className={styles.outline} />\n        </span>\n        <span className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n          {label && (\n            <span id={labelId} className={clsx(styles.label, { [styles['label-disabled']]: disabled })}>\n              {label}\n            </span>\n          )}\n          {description && (\n            <span\n              id={descriptionId}\n              className={clsx(styles.description, {\n                [styles['description-disabled']]: disabled,\n                [styles['description-bottom-padding']]: descriptionBottomPadding,\n              })}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n      </WrapperElement>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n  controlId?: string;\n  controlClassName: string;\n  outlineClassName: string;\n  disabled?: boolean;\n  nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n  styledControl: React.ReactElement;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  descriptionBottomPadding?: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  withoutLabel?: boolean;\n}\n\nfunction joinString(values: (string | undefined)[]) {\n  return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n  controlId,\n  controlClassName,\n  outlineClassName,\n  disabled,\n  nativeControl,\n  styledControl,\n  label,\n  description,\n  descriptionBottomPadding,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  withoutLabel,\n  __internalRootRef,\n  ...rest\n}: AbstractSwitchProps) {\n  const uniqueId = useUniqueId();\n  const id = controlId || uniqueId;\n\n  const focusVisible = useFocusVisible();\n  const wrapperId = `${id}-wrapper`;\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n\n  const WrapperElement = withoutLabel ? 'div' : 'label';\n  const wrapperAttributes: Record<string, string | undefined> = {};\n  if (!withoutLabel) {\n    wrapperAttributes.id = wrapperId;\n    wrapperAttributes.htmlFor = id;\n  }\n\n  const ariaLabelledByIds = [];\n  if (label) {\n    ariaLabelledByIds.push(labelId);\n  }\n  if (ariaLabelledby) {\n    ariaLabelledByIds.push(ariaLabelledby);\n  }\n\n  const ariaDescriptons = [];\n  if (ariaDescribedby) {\n    ariaDescriptons.push(ariaDescribedby);\n  }\n  if (description) {\n    ariaDescriptons.push(descriptionId);\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.wrapper, rest.className)} ref={__internalRootRef}>\n      <WrapperElement\n        {...wrapperAttributes}\n        className={styles['label-wrapper']}\n        aria-disabled={disabled ? 'true' : undefined}\n      >\n        <span className={clsx(styles.control, controlClassName)}>\n          {styledControl}\n          {nativeControl({\n            ...focusVisible,\n            id,\n            disabled,\n            className: styles['native-input'],\n            'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined,\n            'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n            'aria-label': ariaLabel,\n          })}\n          <span className={clsx(styles.outline, outlineClassName)} />\n        </span>\n        <span className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n          {label && (\n            <span id={labelId} className={clsx(styles.label, { [styles['label-disabled']]: disabled })}>\n              {label}\n            </span>\n          )}\n          {description && (\n            <span\n              id={descriptionId}\n              className={clsx(styles.description, {\n                [styles['description-disabled']]: disabled,\n                [styles['description-bottom-padding']]: descriptionBottomPadding,\n              })}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n      </WrapperElement>\n    </div>\n  );\n}\n"]}

package/internal/components/abstract-switch/styles.css.js

@@ -1,16 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "content": "awsui_content_1wepg_dwz1x_93",
-  "description": "awsui_description_1wepg_dwz1x_94",
-  "label": "awsui_label_1wepg_dwz1x_95",
-  "outline": "awsui_outline_1wepg_dwz1x_96",
-  "wrapper": "awsui_wrapper_1wepg_dwz1x_100",
-  "label-wrapper": "awsui_label-wrapper_1wepg_dwz1x_107",
-  "empty-content": "awsui_empty-content_1wepg_dwz1x_118",
-  "description-bottom-padding": "awsui_description-bottom-padding_1wepg_dwz1x_128",
-  "label-disabled": "awsui_label-disabled_1wepg_dwz1x_136",
-  "description-disabled": "awsui_description-disabled_1wepg_dwz1x_137",
-  "control": "awsui_control_1wepg_dwz1x_142"
+  "content": "awsui_content_1wepg_1cu7d_93",
+  "description": "awsui_description_1wepg_1cu7d_94",
+  "label": "awsui_label_1wepg_1cu7d_95",
+  "outline": "awsui_outline_1wepg_1cu7d_99",
+  "native-input": "awsui_native-input_1wepg_1cu7d_103",
+  "wrapper": "awsui_wrapper_1wepg_1cu7d_110",
+  "label-wrapper": "awsui_label-wrapper_1wepg_1cu7d_117",
+  "empty-content": "awsui_empty-content_1wepg_1cu7d_128",
+  "description-bottom-padding": "awsui_description-bottom-padding_1wepg_1cu7d_138",
+  "label-disabled": "awsui_label-disabled_1wepg_1cu7d_146",
+  "description-disabled": "awsui_description-disabled_1wepg_1cu7d_147",
+  "control": "awsui_control_1wepg_1cu7d_152"
 };
   

package/internal/components/abstract-switch/styles.scoped.css

@@ -90,66 +90,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_content_1wepg_dwz1x_93:not(#\9),
-.awsui_description_1wepg_dwz1x_94:not(#\9),
-.awsui_label_1wepg_dwz1x_95:not(#\9),
-.awsui_outline_1wepg_dwz1x_96:not(#\9) {
+.awsui_content_1wepg_1cu7d_93:not(#\9),
+.awsui_description_1wepg_1cu7d_94:not(#\9),
+.awsui_label_1wepg_1cu7d_95:not(#\9) {
   display: block;
 }
 
-.awsui_wrapper_1wepg_dwz1x_100:not(#\9) {
+.awsui_outline_1wepg_1cu7d_99:not(#\9) {
+  display: none;
+}
+
+.awsui_native-input_1wepg_1cu7d_103[data-awsui-focus-visible=true]:not(#\9):focus {
+  /* stylelint-disable-next-line selector-max-type, @cloudscape-design/no-implicit-descendant */
+}
+.awsui_native-input_1wepg_1cu7d_103[data-awsui-focus-visible=true]:not(#\9):focus + .awsui_outline_1wepg_1cu7d_99 {
+  display: block;
+}
+
+.awsui_wrapper_1wepg_1cu7d_110:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   display: flex;
 }
 
-.awsui_label-wrapper_1wepg_dwz1x_107:not(#\9) {
+.awsui_label-wrapper_1wepg_1cu7d_117:not(#\9) {
   position: relative;
   display: flex;
 }
 
-.awsui_content_1wepg_dwz1x_93:not(#\9) {
+.awsui_content_1wepg_1cu7d_93:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
 }
 
-.awsui_empty-content_1wepg_dwz1x_118:not(#\9) {
+.awsui_empty-content_1wepg_1cu7d_128:not(#\9) {
   width: 0px;
 }
 
-.awsui_description_1wepg_dwz1x_94:not(#\9) {
+.awsui_description_1wepg_1cu7d_94:not(#\9) {
   color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
   font-size: var(--font-body-s-size-ukw2p9, 12px);
   line-height: var(--font-body-s-line-height-kdsbrl, 16px);
   letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
 }
-.awsui_description-bottom-padding_1wepg_dwz1x_128:not(#\9) {
+.awsui_description-bottom-padding_1wepg_1cu7d_138:not(#\9) {
   padding-bottom: var(--space-scaled-xxs-95dhkm, 4px);
 }
 
-.awsui_label_1wepg_dwz1x_95:not(#\9),
-.awsui_description_1wepg_dwz1x_94:not(#\9) {
+.awsui_label_1wepg_1cu7d_95:not(#\9),
+.awsui_description_1wepg_1cu7d_94:not(#\9) {
   padding-left: var(--space-xs-rsr2qu, 8px);
 }
-.awsui_label-disabled_1wepg_dwz1x_136:not(#\9),
-.awsui_description-disabled_1wepg_dwz1x_137:not(#\9) {
+.awsui_label-disabled_1wepg_1cu7d_146:not(#\9),
+.awsui_description-disabled_1wepg_1cu7d_147:not(#\9) {
   color: var(--color-text-control-disabled-3z3eul, #9ba7b6);
 }
 
 /* stylelint-disable selector-max-type */
-.awsui_control_1wepg_dwz1x_142:not(#\9) {
+.awsui_control_1wepg_1cu7d_152:not(#\9) {
   position: relative;
 }
-.awsui_control_1wepg_dwz1x_142 > input:not(#\9), .awsui_control_1wepg_dwz1x_142 > svg:not(#\9), .awsui_control_1wepg_dwz1x_142 > .awsui_outline_1wepg_dwz1x_96:not(#\9) {
+.awsui_control_1wepg_1cu7d_152 > input:not(#\9), .awsui_control_1wepg_1cu7d_152 > svg:not(#\9), .awsui_control_1wepg_1cu7d_152 > .awsui_outline_1wepg_1cu7d_99:not(#\9) {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-.awsui_control_1wepg_dwz1x_142 > input:not(#\9) {
+.awsui_control_1wepg_1cu7d_152 > input:not(#\9) {
   opacity: 0;
   z-index: 1;
   -webkit-user-select: none;

package/internal/components/abstract-switch/styles.selectors.js

@@ -2,16 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content": "awsui_content_1wepg_dwz1x_93",
-  "description": "awsui_description_1wepg_dwz1x_94",
-  "label": "awsui_label_1wepg_dwz1x_95",
-  "outline": "awsui_outline_1wepg_dwz1x_96",
-  "wrapper": "awsui_wrapper_1wepg_dwz1x_100",
-  "label-wrapper": "awsui_label-wrapper_1wepg_dwz1x_107",
-  "empty-content": "awsui_empty-content_1wepg_dwz1x_118",
-  "description-bottom-padding": "awsui_description-bottom-padding_1wepg_dwz1x_128",
-  "label-disabled": "awsui_label-disabled_1wepg_dwz1x_136",
-  "description-disabled": "awsui_description-disabled_1wepg_dwz1x_137",
-  "control": "awsui_control_1wepg_dwz1x_142"
+  "content": "awsui_content_1wepg_1cu7d_93",
+  "description": "awsui_description_1wepg_1cu7d_94",
+  "label": "awsui_label_1wepg_1cu7d_95",
+  "outline": "awsui_outline_1wepg_1cu7d_99",
+  "native-input": "awsui_native-input_1wepg_1cu7d_103",
+  "wrapper": "awsui_wrapper_1wepg_1cu7d_110",
+  "label-wrapper": "awsui_label-wrapper_1wepg_1cu7d_117",
+  "empty-content": "awsui_empty-content_1wepg_1cu7d_128",
+  "description-bottom-padding": "awsui_description-bottom-padding_1wepg_1cu7d_138",
+  "label-disabled": "awsui_label-disabled_1wepg_1cu7d_146",
+  "description-disabled": "awsui_description-disabled_1wepg_1cu7d_147",
+  "control": "awsui_control_1wepg_1cu7d_152"
 };
   

package/internal/components/options-list/utils/use-highlight-option.d.ts

@@ -1,18 +1,20 @@
-import { MutableRefObject } from 'react';
-export declare function createHighlightedOptionHook<OptionType>({ isHighlightable, }: {
+export declare type HighlightType = 'keyboard' | 'mouse';
+export interface HighlightedOptionProps<OptionType> {
+    options: readonly OptionType[];
     isHighlightable: (option: OptionType) => boolean;
-}): ({ options, isKeyboard, }: {
-    options: ReadonlyArray<OptionType>;
-    isKeyboard: MutableRefObject<boolean>;
-}) => {
-    setHighlightedIndex: (index: number) => void;
+}
+export interface HighlightedOptionState<OptionType> {
+    highlightType: HighlightType;
     highlightedIndex: number;
-    highlightedType: "mouse" | "keyboard";
-    highlightedOption: OptionType | undefined;
-    moveHighlight: (direction: -1 | 1) => void;
-    resetHighlight: () => void;
-    goHome: () => void;
-    goEnd: () => void;
-    highlightOption: (option: OptionType) => void;
-};
+    highlightedOption?: OptionType;
+}
+export interface HighlightedOptionHandlers<OptionType> {
+    setHighlightedIndexWithMouse(index: number): void;
+    moveHighlightWithKeyboard(direction: -1 | 1): void;
+    highlightOptionWithKeyboard(option: OptionType): void;
+    resetHighlightWithKeyboard(): void;
+    goHomeWithKeyboard(): void;
+    goEndWithKeyboard(): void;
+}
+export declare function useHighlightedOption<OptionType>({ options, isHighlightable, }: HighlightedOptionProps<OptionType>): [HighlightedOptionState<OptionType>, HighlightedOptionHandlers<OptionType>];
 //# sourceMappingURL=use-highlight-option.d.ts.map

package/internal/components/options-list/utils/use-highlight-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,OAAO,CAAC;AAEhE,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,EACtD,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC;CAClD;aAKY,cAAc,UAAU,CAAC;gBACtB,iBAAiB,OAAO,CAAC;;iCAO3B,MAAM;;;;+BAoBkB,CAAC,CAAC,GAAG,CAAC;;;;8BAG7B,UAAU;EAmBxB"}
+{"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAIA,oBAAY,aAAa,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,sBAAsB,CAAC,UAAU;IAChD,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC;CAClD;AAED,MAAM,WAAW,sBAAsB,CAAC,UAAU;IAChD,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAChC;AAED,MAAM,WAAW,yBAAyB,CAAC,UAAU;IAEnD,4BAA4B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAElD,yBAAyB,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACnD,2BAA2B,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IACtD,0BAA0B,IAAI,IAAI,CAAC;IACnC,kBAAkB,IAAI,IAAI,CAAC;IAC3B,iBAAiB,IAAI,IAAI,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,EAC/C,OAAO,EACP,eAAe,GAChB,EAAE,sBAAsB,CAAC,UAAU,CAAC,GAAG,CAAC,sBAAsB,CAAC,UAAU,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC,CA4ClH"}

package/internal/components/options-list/utils/use-highlight-option.js

@@ -1,43 +1,42 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useCallback, useState } from 'react';
-export function createHighlightedOptionHook(_a) {
-    var isHighlightable = _a.isHighlightable;
-    return function useHighlightedOption(_a) {
-        var options = _a.options, isKeyboard = _a.isKeyboard;
-        var _b = useState(-1), highlightedIndex = _b[0], setHighlightedIndexState = _b[1];
-        var _c = useState(isKeyboard.current ? 'keyboard' : 'mouse'), highlightedType = _c[0], setHighlightedType = _c[1];
-        var setHighlightedIndex = useCallback(function (index) {
-            setHighlightedIndexState(index);
-            setHighlightedType(isKeyboard.current ? 'keyboard' : 'mouse');
-        }, [isKeyboard]);
-        var highlightedOption = options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;
-        var moveHighlightFrom = function (direction, startIndex) {
-            if (startIndex === void 0) { startIndex = highlightedIndex; }
-            var newIndex = startIndex;
-            do {
-                newIndex += direction;
-            } while (options[newIndex] && !isHighlightable(options[newIndex]));
-            if (options[newIndex]) {
-                setHighlightedIndex(newIndex);
-            }
-        };
-        var moveHighlight = function (direction) { return moveHighlightFrom(direction); };
-        var highlightOption = useCallback(function (option) {
-            var index = options.indexOf(option);
-            setHighlightedIndex(index);
-        }, [options, setHighlightedIndex]);
-        return {
-            setHighlightedIndex: setHighlightedIndex,
-            highlightedIndex: highlightedIndex,
-            highlightedType: highlightedType,
-            highlightedOption: highlightedOption,
-            moveHighlight: moveHighlight,
-            resetHighlight: function () { return setHighlightedIndex(-1); },
-            goHome: function () { return moveHighlightFrom(1, -1); },
-            goEnd: function () { return moveHighlightFrom(-1, options.length); },
-            highlightOption: highlightOption
-        };
+export function useHighlightedOption(_a) {
+    var options = _a.options, isHighlightable = _a.isHighlightable;
+    var _b = useState(-1), highlightedIndex = _b[0], setHighlightedIndexState = _b[1];
+    var _c = useState('keyboard'), highlightType = _c[0], setHighlightType = _c[1];
+    var setHighlightedIndex = useCallback(function (index, highlightType) {
+        setHighlightedIndexState(index);
+        setHighlightType(highlightType);
+    }, []);
+    var highlightedOption = options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;
+    var moveHighlightFrom = function (direction, startIndex, highlightType) {
+        if (startIndex === void 0) { startIndex = highlightedIndex; }
+        var newIndex = startIndex;
+        do {
+            newIndex += direction;
+        } while (options[newIndex] && !isHighlightable(options[newIndex]));
+        if (options[newIndex]) {
+            setHighlightedIndex(newIndex, highlightType);
+        }
     };
+    var moveHighlight = function (direction, highlightType) {
+        return moveHighlightFrom(direction, highlightedIndex, highlightType);
+    };
+    var highlightOption = useCallback(function (option, highlightType) {
+        var index = options.indexOf(option);
+        setHighlightedIndex(index, highlightType);
+    }, [options, setHighlightedIndex]);
+    return [
+        { highlightType: highlightType, highlightedIndex: highlightedIndex, highlightedOption: highlightedOption },
+        {
+            setHighlightedIndexWithMouse: function (index) { return setHighlightedIndex(index, 'mouse'); },
+            moveHighlightWithKeyboard: function (direction) { return moveHighlight(direction, 'keyboard'); },
+            highlightOptionWithKeyboard: function (option) { return highlightOption(option, 'keyboard'); },
+            resetHighlightWithKeyboard: function () { return setHighlightedIndex(-1, 'keyboard'); },
+            goHomeWithKeyboard: function () { return moveHighlightFrom(1, -1, 'keyboard'); },
+            goEndWithKeyboard: function () { return moveHighlightFrom(-1, options.length, 'keyboard'); }
+        },
+    ];
 }
 //# sourceMappingURL=use-highlight-option.js.map

package/internal/components/options-list/utils/use-highlight-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAoB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,UAAU,2BAA2B,CAAa,EAIvD;QAHC,eAAe,qBAAA;IAIf,OAAO,SAAS,oBAAoB,CAAC,EAMpC;YALC,OAAO,aAAA,EACP,UAAU,gBAAA;QAKJ,IAAA,KAA+C,QAAQ,CAAC,CAAC,CAAC,CAAC,EAA1D,gBAAgB,QAAA,EAAE,wBAAwB,QAAgB,CAAC;QAC5D,IAAA,KAAwC,QAAQ,CACpD,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAC1C,EAFM,eAAe,QAAA,EAAE,kBAAkB,QAEzC,CAAC;QACF,IAAM,mBAAmB,GAAG,WAAW,CACrC,UAAC,KAAa;YACZ,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChC,kBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAChE,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;QACF,IAAM,iBAAiB,GACrB,OAAO,CAAC,gBAAgB,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAElH,IAAM,iBAAiB,GAAG,UAAC,SAAiB,EAAE,UAA6B;YAA7B,2BAAA,EAAA,6BAA6B;YACzE,IAAI,QAAQ,GAAG,UAAU,CAAC;YAC1B,GAAG;gBACD,QAAQ,IAAI,SAAS,CAAC;aACvB,QAAQ,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE;YAEnE,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACrB,mBAAmB,CAAC,QAAQ,CAAC,CAAC;aAC/B;QACH,CAAC,CAAC;QAEF,IAAM,aAAa,GAAG,UAAC,SAAiB,IAAK,OAAA,iBAAiB,CAAC,SAAS,CAAC,EAA5B,CAA4B,CAAC;QAE1E,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,MAAkB;YACjB,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACtC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EACD,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAC/B,CAAC;QAEF,OAAO;YACL,mBAAmB,qBAAA;YACnB,gBAAgB,kBAAA;YAChB,eAAe,iBAAA;YACf,iBAAiB,mBAAA;YACjB,aAAa,eAAA;YACb,cAAc,EAAE,cAAM,OAAA,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAvB,CAAuB;YAC7C,MAAM,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAxB,CAAwB;YACtC,KAAK,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAArC,CAAqC;YAClD,eAAe,iBAAA;SAChB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, useCallback, useState } from 'react';\n\nexport function createHighlightedOptionHook<OptionType>({\n  isHighlightable,\n}: {\n  isHighlightable: (option: OptionType) => boolean;\n}) {\n  return function useHighlightedOption({\n    options,\n    isKeyboard,\n  }: {\n    options: ReadonlyArray<OptionType>;\n    isKeyboard: MutableRefObject<boolean>;\n  }) {\n    const [highlightedIndex, setHighlightedIndexState] = useState(-1);\n    const [highlightedType, setHighlightedType] = useState<'mouse' | 'keyboard'>(\n      isKeyboard.current ? 'keyboard' : 'mouse'\n    );\n    const setHighlightedIndex = useCallback(\n      (index: number) => {\n        setHighlightedIndexState(index);\n        setHighlightedType(isKeyboard.current ? 'keyboard' : 'mouse');\n      },\n      [isKeyboard]\n    );\n    const highlightedOption =\n      options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;\n\n    const moveHighlightFrom = (direction: -1 | 1, startIndex = highlightedIndex) => {\n      let newIndex = startIndex;\n      do {\n        newIndex += direction;\n      } while (options[newIndex] && !isHighlightable(options[newIndex]));\n\n      if (options[newIndex]) {\n        setHighlightedIndex(newIndex);\n      }\n    };\n\n    const moveHighlight = (direction: -1 | 1) => moveHighlightFrom(direction);\n\n    const highlightOption = useCallback(\n      (option: OptionType) => {\n        const index = options.indexOf(option);\n        setHighlightedIndex(index);\n      },\n      [options, setHighlightedIndex]\n    );\n\n    return {\n      setHighlightedIndex,\n      highlightedIndex,\n      highlightedType,\n      highlightedOption,\n      moveHighlight,\n      resetHighlight: () => setHighlightedIndex(-1),\n      goHome: () => moveHighlightFrom(1, -1),\n      goEnd: () => moveHighlightFrom(-1, options.length),\n      highlightOption,\n    };\n  };\n}\n"]}
+{"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA0B9C,MAAM,UAAU,oBAAoB,CAAa,EAGZ;QAFnC,OAAO,aAAA,EACP,eAAe,qBAAA;IAET,IAAA,KAA+C,QAAQ,CAAC,CAAC,CAAC,CAAC,EAA1D,gBAAgB,QAAA,EAAE,wBAAwB,QAAgB,CAAC;IAC5D,IAAA,KAAoC,QAAQ,CAAgB,UAAU,CAAC,EAAtE,aAAa,QAAA,EAAE,gBAAgB,QAAuC,CAAC;IAC9E,IAAM,mBAAmB,GAAG,WAAW,CAAC,UAAC,KAAa,EAAE,aAA4B;QAClF,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,iBAAiB,GACrB,OAAO,CAAC,gBAAgB,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAElH,IAAM,iBAAiB,GAAG,UAAC,SAAiB,EAAE,UAA6B,EAAE,aAA4B;QAA3D,2BAAA,EAAA,6BAA6B;QACzE,IAAI,QAAQ,GAAG,UAAU,CAAC;QAC1B,GAAG;YACD,QAAQ,IAAI,SAAS,CAAC;SACvB,QAAQ,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE;QAEnE,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACrB,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;SAC9C;IACH,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG,UAAC,SAAiB,EAAE,aAA4B;QACpE,OAAA,iBAAiB,CAAC,SAAS,EAAE,gBAAgB,EAAE,aAAa,CAAC;IAA7D,CAA6D,CAAC;IAEhE,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,MAAkB,EAAE,aAA4B;QAC/C,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACtC,mBAAmB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAC5C,CAAC,EACD,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAC/B,CAAC;IAEF,OAAO;QACL,EAAE,aAAa,eAAA,EAAE,gBAAgB,kBAAA,EAAE,iBAAiB,mBAAA,EAAE;QACtD;YACE,4BAA4B,EAAE,UAAC,KAAa,IAAK,OAAA,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,EAAnC,CAAmC;YACpF,yBAAyB,EAAE,UAAC,SAAiB,IAAK,OAAA,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,EAApC,CAAoC;YACtF,2BAA2B,EAAE,UAAC,MAAkB,IAAK,OAAA,eAAe,CAAC,MAAM,EAAE,UAAU,CAAC,EAAnC,CAAmC;YACxF,0BAA0B,EAAE,cAAM,OAAA,mBAAmB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EAAnC,CAAmC;YACrE,kBAAkB,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,EAApC,CAAoC;YAC9D,iBAAiB,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,EAAjD,CAAiD;SAC3E;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useState } from 'react';\n\nexport type HighlightType = 'keyboard' | 'mouse';\n\nexport interface HighlightedOptionProps<OptionType> {\n  options: readonly OptionType[];\n  isHighlightable: (option: OptionType) => boolean;\n}\n\nexport interface HighlightedOptionState<OptionType> {\n  highlightType: HighlightType;\n  highlightedIndex: number;\n  highlightedOption?: OptionType;\n}\n\nexport interface HighlightedOptionHandlers<OptionType> {\n  // Mouse handlers\n  setHighlightedIndexWithMouse(index: number): void;\n  // Keyboard handlers\n  moveHighlightWithKeyboard(direction: -1 | 1): void;\n  highlightOptionWithKeyboard(option: OptionType): void;\n  resetHighlightWithKeyboard(): void;\n  goHomeWithKeyboard(): void;\n  goEndWithKeyboard(): void;\n}\n\nexport function useHighlightedOption<OptionType>({\n  options,\n  isHighlightable,\n}: HighlightedOptionProps<OptionType>): [HighlightedOptionState<OptionType>, HighlightedOptionHandlers<OptionType>] {\n  const [highlightedIndex, setHighlightedIndexState] = useState(-1);\n  const [highlightType, setHighlightType] = useState<HighlightType>('keyboard');\n  const setHighlightedIndex = useCallback((index: number, highlightType: HighlightType) => {\n    setHighlightedIndexState(index);\n    setHighlightType(highlightType);\n  }, []);\n\n  const highlightedOption =\n    options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;\n\n  const moveHighlightFrom = (direction: -1 | 1, startIndex = highlightedIndex, highlightType: HighlightType) => {\n    let newIndex = startIndex;\n    do {\n      newIndex += direction;\n    } while (options[newIndex] && !isHighlightable(options[newIndex]));\n\n    if (options[newIndex]) {\n      setHighlightedIndex(newIndex, highlightType);\n    }\n  };\n\n  const moveHighlight = (direction: -1 | 1, highlightType: HighlightType) =>\n    moveHighlightFrom(direction, highlightedIndex, highlightType);\n\n  const highlightOption = useCallback(\n    (option: OptionType, highlightType: HighlightType) => {\n      const index = options.indexOf(option);\n      setHighlightedIndex(index, highlightType);\n    },\n    [options, setHighlightedIndex]\n  );\n\n  return [\n    { highlightType, highlightedIndex, highlightedOption },\n    {\n      setHighlightedIndexWithMouse: (index: number) => setHighlightedIndex(index, 'mouse'),\n      moveHighlightWithKeyboard: (direction: -1 | 1) => moveHighlight(direction, 'keyboard'),\n      highlightOptionWithKeyboard: (option: OptionType) => highlightOption(option, 'keyboard'),\n      resetHighlightWithKeyboard: () => setHighlightedIndex(-1, 'keyboard'),\n      goHomeWithKeyboard: () => moveHighlightFrom(1, -1, 'keyboard'),\n      goEndWithKeyboard: () => moveHighlightFrom(-1, options.length, 'keyboard'),\n    },\n  ];\n}\n"]}

package/internal/components/options-list/utils/use-keyboard.d.ts

@@ -7,7 +7,6 @@ interface UseMenuKeyboard {
         goHome: () => void;
         goEnd: () => void;
         closeDropdown: () => void;
-        isKeyboard: MutableRefObject<boolean>;
         isSelectingUsingSpace: MutableRefObject<boolean>;
         preventNativeSpace?: boolean;
     }): CancelableEventHandler<BaseKeyDetail>;
@@ -17,7 +16,6 @@ interface UseTriggerKeyboard {
     (inputProps: {
         openDropdown: () => void;
         goHome: () => void;
-        isKeyboard: MutableRefObject<boolean>;
     }): CancelableEventHandler<BaseKeyDetail>;
 }
 export declare const useTriggerKeyboard: UseTriggerKeyboard;

package/internal/components/options-list/utils/use-keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-keyboard.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAKxE,UAAU,eAAe;IACvB,CAAC,UAAU,EAAE;QACX,aAAa,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAChE,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,KAAK,EAAE,MAAM,IAAI,CAAC;QAClB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACtC,qBAAqB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;KAC9B,GAAG,sBAAsB,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,EAAE,eA6C7B,CAAC;AAEF,UAAU,kBAAkB;IAC1B,CAAC,UAAU,EAAE;QACX,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;KACvC,GAAG,sBAAsB,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,kBAAkB,EAAE,kBAmBhC,CAAC"}
+{"version":3,"file":"use-keyboard.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAKxE,UAAU,eAAe;IACvB,CAAC,UAAU,EAAE;QACX,aAAa,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAChE,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,KAAK,EAAE,MAAM,IAAI,CAAC;QAClB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,qBAAqB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;KAC9B,GAAG,sBAAsB,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,EAAE,eA2C7B,CAAC;AAEF,UAAU,kBAAkB;IAC1B,CAAC,UAAU,EAAE;QAAE,YAAY,EAAE,MAAM,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,sBAAsB,CAAC,aAAa,CAAC,CAAC;CACvG;AAED,eAAO,MAAM,kBAAkB,EAAE,kBAkBhC,CAAC"}

package/internal/components/options-list/utils/use-keyboard.js

@@ -5,9 +5,8 @@ import { KeyCode } from '../../../keycode';
 var HOME = 36;
 var END = 35;
 export var useMenuKeyboard = function (_a) {
-    var moveHighlight = _a.moveHighlight, selectOption = _a.selectOption, goHome = _a.goHome, goEnd = _a.goEnd, closeDropdown = _a.closeDropdown, isKeyboard = _a.isKeyboard, isSelectingUsingSpace = _a.isSelectingUsingSpace, _b = _a.preventNativeSpace, preventNativeSpace = _b === void 0 ? false : _b;
+    var moveHighlight = _a.moveHighlight, selectOption = _a.selectOption, goHome = _a.goHome, goEnd = _a.goEnd, closeDropdown = _a.closeDropdown, isSelectingUsingSpace = _a.isSelectingUsingSpace, _b = _a.preventNativeSpace, preventNativeSpace = _b === void 0 ? false : _b;
     return useCallback(function (e) {
-        isKeyboard.current = true;
         switch (e.detail.keyCode) {
             case KeyCode.up:
                 e.preventDefault();
@@ -37,12 +36,11 @@ export var useMenuKeyboard = function (_a) {
                     isSelectingUsingSpace.current = true;
                 }
         }
-    }, [moveHighlight, selectOption, goHome, goEnd, closeDropdown, isKeyboard, isSelectingUsingSpace, preventNativeSpace]);
+    }, [moveHighlight, selectOption, goHome, goEnd, closeDropdown, isSelectingUsingSpace, preventNativeSpace]);
 };
 export var useTriggerKeyboard = function (_a) {
-    var openDropdown = _a.openDropdown, goHome = _a.goHome, isKeyboard = _a.isKeyboard;
+    var openDropdown = _a.openDropdown, goHome = _a.goHome;
     return useCallback(function (e) {
-        isKeyboard.current = true;
         switch (e.detail.keyCode) {
             case KeyCode.up:
             case KeyCode.down:
@@ -55,6 +53,6 @@ export var useTriggerKeyboard = function (_a) {
                 openDropdown();
                 break;
         }
-    }, [openDropdown, goHome, isKeyboard]);
+    }, [openDropdown, goHome]);
 };
 //# sourceMappingURL=use-keyboard.js.map

package/internal/components/options-list/utils/use-keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-keyboard.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,GAAG,GAAG,EAAE,CAAC;AAef,MAAM,CAAC,IAAM,eAAe,GAAoB,UAAC,EAShD;QARC,aAAa,mBAAA,EACb,YAAY,kBAAA,EACZ,MAAM,YAAA,EACN,KAAK,WAAA,EACL,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,qBAAqB,2BAAA,EACrB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA;IAE1B,OAAO,WAAW,CAChB,UAAC,CAA6B;QAC5B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE;YACxB,KAAK,OAAO,CAAC,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClB,MAAM;YACR,KAAK,OAAO,CAAC,IAAI;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,KAAK,IAAI;gBACP,MAAM,EAAE,CAAC;gBACT,MAAM;YACR,KAAK,GAAG;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM;YACR,KAAK,OAAO,CAAC,MAAM;gBACjB,aAAa,EAAE,CAAC;gBAChB,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,EAAE,CAAC;gBACf,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,IAAI,kBAAkB,EAAE;oBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,YAAY,EAAE,CAAC;oBACf,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;iBACtC;SACJ;IACH,CAAC,EACD,CAAC,aAAa,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,qBAAqB,EAAE,kBAAkB,CAAC,CACnH,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,CAAC,IAAM,kBAAkB,GAAuB,UAAC,EAAoC;QAAlC,YAAY,kBAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA;IACvF,OAAO,WAAW,CAChB,UAAC,CAA6B;QAC5B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE;YACxB,KAAK,OAAO,CAAC,EAAE,CAAC;YAChB,KAAK,OAAO,CAAC,IAAI;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,EAAE,CAAC;gBACT,YAAY,EAAE,CAAC;gBACf,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,EAAE,CAAC;gBACf,MAAM;SACT;IACH,CAAC,EACD,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,CAAC,CACnC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, MutableRefObject } from 'react';\nimport { KeyCode } from '../../../keycode';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../events';\n\nconst HOME = 36;\nconst END = 35;\n\ninterface UseMenuKeyboard {\n  (inputProps: {\n    moveHighlight: (direction: -1 | 1, startIndex?: number) => void;\n    selectOption: () => void;\n    goHome: () => void;\n    goEnd: () => void;\n    closeDropdown: () => void;\n    isKeyboard: MutableRefObject<boolean>;\n    isSelectingUsingSpace: MutableRefObject<boolean>;\n    preventNativeSpace?: boolean;\n  }): CancelableEventHandler<BaseKeyDetail>;\n}\n\nexport const useMenuKeyboard: UseMenuKeyboard = ({\n  moveHighlight,\n  selectOption,\n  goHome,\n  goEnd,\n  closeDropdown,\n  isKeyboard,\n  isSelectingUsingSpace,\n  preventNativeSpace = false,\n}) => {\n  return useCallback(\n    (e: CustomEvent<BaseKeyDetail>) => {\n      isKeyboard.current = true;\n      switch (e.detail.keyCode) {\n        case KeyCode.up:\n          e.preventDefault();\n          moveHighlight(-1);\n          break;\n        case KeyCode.down:\n          e.preventDefault();\n          moveHighlight(1);\n          break;\n        case HOME:\n          goHome();\n          break;\n        case END:\n          goEnd();\n          break;\n        case KeyCode.escape:\n          closeDropdown();\n          break;\n        case KeyCode.enter:\n          e.preventDefault();\n          selectOption();\n          break;\n        case KeyCode.space:\n          if (preventNativeSpace) {\n            e.preventDefault();\n            selectOption();\n            isSelectingUsingSpace.current = true;\n          }\n      }\n    },\n    [moveHighlight, selectOption, goHome, goEnd, closeDropdown, isKeyboard, isSelectingUsingSpace, preventNativeSpace]\n  );\n};\n\ninterface UseTriggerKeyboard {\n  (inputProps: {\n    openDropdown: () => void;\n    goHome: () => void;\n    isKeyboard: MutableRefObject<boolean>;\n  }): CancelableEventHandler<BaseKeyDetail>;\n}\n\nexport const useTriggerKeyboard: UseTriggerKeyboard = ({ openDropdown, goHome, isKeyboard }) => {\n  return useCallback(\n    (e: CustomEvent<BaseKeyDetail>) => {\n      isKeyboard.current = true;\n      switch (e.detail.keyCode) {\n        case KeyCode.up:\n        case KeyCode.down:\n          e.preventDefault();\n          goHome();\n          openDropdown();\n          break;\n        case KeyCode.space:\n          e.preventDefault();\n          openDropdown();\n          break;\n      }\n    },\n    [openDropdown, goHome, isKeyboard]\n  );\n};\n"]}
+{"version":3,"file":"use-keyboard.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,GAAG,GAAG,EAAE,CAAC;AAcf,MAAM,CAAC,IAAM,eAAe,GAAoB,UAAC,EAQhD;QAPC,aAAa,mBAAA,EACb,YAAY,kBAAA,EACZ,MAAM,YAAA,EACN,KAAK,WAAA,EACL,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA;IAE1B,OAAO,WAAW,CAChB,UAAC,CAA6B;QAC5B,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE;YACxB,KAAK,OAAO,CAAC,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClB,MAAM;YACR,KAAK,OAAO,CAAC,IAAI;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,KAAK,IAAI;gBACP,MAAM,EAAE,CAAC;gBACT,MAAM;YACR,KAAK,GAAG;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM;YACR,KAAK,OAAO,CAAC,MAAM;gBACjB,aAAa,EAAE,CAAC;gBAChB,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,EAAE,CAAC;gBACf,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,IAAI,kBAAkB,EAAE;oBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,YAAY,EAAE,CAAC;oBACf,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;iBACtC;SACJ;IACH,CAAC,EACD,CAAC,aAAa,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,kBAAkB,CAAC,CACvG,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,IAAM,kBAAkB,GAAuB,UAAC,EAAwB;QAAtB,YAAY,kBAAA,EAAE,MAAM,YAAA;IAC3E,OAAO,WAAW,CAChB,UAAC,CAA6B;QAC5B,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE;YACxB,KAAK,OAAO,CAAC,EAAE,CAAC;YAChB,KAAK,OAAO,CAAC,IAAI;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,EAAE,CAAC;gBACT,YAAY,EAAE,CAAC;gBACf,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,EAAE,CAAC;gBACf,MAAM;SACT;IACH,CAAC,EACD,CAAC,YAAY,EAAE,MAAM,CAAC,CACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, MutableRefObject } from 'react';\nimport { KeyCode } from '../../../keycode';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../events';\n\nconst HOME = 36;\nconst END = 35;\n\ninterface UseMenuKeyboard {\n  (inputProps: {\n    moveHighlight: (direction: -1 | 1, startIndex?: number) => void;\n    selectOption: () => void;\n    goHome: () => void;\n    goEnd: () => void;\n    closeDropdown: () => void;\n    isSelectingUsingSpace: MutableRefObject<boolean>;\n    preventNativeSpace?: boolean;\n  }): CancelableEventHandler<BaseKeyDetail>;\n}\n\nexport const useMenuKeyboard: UseMenuKeyboard = ({\n  moveHighlight,\n  selectOption,\n  goHome,\n  goEnd,\n  closeDropdown,\n  isSelectingUsingSpace,\n  preventNativeSpace = false,\n}) => {\n  return useCallback(\n    (e: CustomEvent<BaseKeyDetail>) => {\n      switch (e.detail.keyCode) {\n        case KeyCode.up:\n          e.preventDefault();\n          moveHighlight(-1);\n          break;\n        case KeyCode.down:\n          e.preventDefault();\n          moveHighlight(1);\n          break;\n        case HOME:\n          goHome();\n          break;\n        case END:\n          goEnd();\n          break;\n        case KeyCode.escape:\n          closeDropdown();\n          break;\n        case KeyCode.enter:\n          e.preventDefault();\n          selectOption();\n          break;\n        case KeyCode.space:\n          if (preventNativeSpace) {\n            e.preventDefault();\n            selectOption();\n            isSelectingUsingSpace.current = true;\n          }\n      }\n    },\n    [moveHighlight, selectOption, goHome, goEnd, closeDropdown, isSelectingUsingSpace, preventNativeSpace]\n  );\n};\n\ninterface UseTriggerKeyboard {\n  (inputProps: { openDropdown: () => void; goHome: () => void }): CancelableEventHandler<BaseKeyDetail>;\n}\n\nexport const useTriggerKeyboard: UseTriggerKeyboard = ({ openDropdown, goHome }) => {\n  return useCallback(\n    (e: CustomEvent<BaseKeyDetail>) => {\n      switch (e.detail.keyCode) {\n        case KeyCode.up:\n        case KeyCode.down:\n          e.preventDefault();\n          goHome();\n          openDropdown();\n          break;\n        case KeyCode.space:\n          e.preventDefault();\n          openDropdown();\n          break;\n      }\n    },\n    [openDropdown, goHome]\n  );\n};\n"]}

package/internal/components/selectable-item/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseComponentProps } from '../../base-component';
+import { HighlightType } from '../options-list/utils/use-highlight-option.js';
 export interface SelectableItemProps extends BaseComponentProps {
     children: React.ReactNode;
     ariaSelected?: boolean;
@@ -17,7 +18,7 @@ export interface SelectableItemProps extends BaseComponentProps {
     screenReaderContent?: string;
     ariaPosinset?: number;
     ariaSetsize?: number;
-    highlightedType?: 'mouse' | 'keyboard';
+    highlightType?: HighlightType;
 }
 declare const _default: React.ForwardRefExoticComponent<SelectableItemProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/internal/components/selectable-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACxC;;AAmGD,wBAAgD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAE9E,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;;AAmGD,wBAAgD"}

package/internal/components/selectable-item/index.js

@@ -7,7 +7,7 @@ import styles from './styles.css.js';
 import { getBaseProps } from '../../base-component';
 var SelectableItem = function (_a, ref) {
     var _b;
-    var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize, highlightedType = _a.highlightedType, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightedType"]);
+    var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize, highlightType = _a.highlightType, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType"]);
     var _c = getBaseProps(restProps), className = _c.className, rest = __rest(_c, ["className"]);
     var classNames = clsx(className, styles['selectable-item'], (_b = {},
         _b[styles.selected] = selected,
@@ -15,7 +15,7 @@ var SelectableItem = function (_a, ref) {
         _b[styles['has-background']] = hasBackground,
         _b[styles.parent] = isParent,
         _b[styles.child] = isChild,
-        _b[styles['is-keyboard']] = highlightedType === 'keyboard',
+        _b[styles['is-keyboard']] = highlightType === 'keyboard',
         _b[styles.disabled] = disabled,
         _b[styles.virtual] = virtualPosition !== undefined,
         _b[styles['pad-bottom']] = padBottom,

package/internal/components/selectable-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useLayoutEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\n\nexport interface SelectableItemProps extends BaseComponentProps {\n  children: React.ReactNode;\n  ariaSelected?: boolean;\n  ariaChecked?: boolean;\n  selected?: boolean;\n  highlighted?: boolean;\n  disabled?: boolean;\n  hasBackground?: boolean;\n  isParent?: boolean;\n  isChild?: boolean;\n  virtualPosition?: number;\n  padBottom?: boolean;\n  isNextSelected?: boolean;\n  useInteractiveGroups?: boolean;\n  screenReaderContent?: string;\n  ariaPosinset?: number;\n  ariaSetsize?: number;\n  highlightedType?: 'mouse' | 'keyboard';\n}\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightedType,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['is-keyboard']]: highlightedType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {\n    'aria-disabled': disabled,\n  };\n\n  if (isParent && !useInteractiveGroups) {\n    a11yProperties['aria-hidden'] = true;\n  }\n\n  if (ariaSelected) {\n    a11yProperties['aria-selected'] = ariaSelected;\n  }\n\n  // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n  if (ariaChecked) {\n    a11yProperties['aria-checked'] = ariaChecked;\n  }\n\n  if (ariaPosinset && ariaSetsize) {\n    a11yProperties['aria-posinset'] = ariaPosinset;\n    a11yProperties['aria-setsize'] = ariaSetsize;\n  }\n\n  return (\n    <li role=\"option\" className={classNames} style={style} {...a11yProperties} {...rest}>\n      <div className={styles['option-content']} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </li>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAuBxE,IAAM,cAAc,GAAG,UACrB,EAmBsB,EACtB,GAA8B;;IAnB5B,IAAU,OAAO,cAAA,EACjB,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,eAAe,qBAAA,EACf,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,oBAAoB,0BAAA,EACpB,mBAAmB,yBAAA,EACnB,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,aAAa,mBAAA,EACV,SAAS,cAlBd,2QAmBC,CADa;IAId,IAAM,KAAyB,YAAY,CAAC,SAAS,CAAC,EAA9C,SAAS,eAAA,EAAK,IAAI,cAApB,aAAsB,CAA0B,CAAC;IACvD,IAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QAC1D,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;QAC3B,GAAC,MAAM,CAAC,WAAW,IAAG,WAAW;QACjC,GAAC,MAAM,CAAC,gBAAgB,CAAC,IAAG,aAAa;QACzC,GAAC,MAAM,CAAC,MAAM,IAAG,QAAQ;QACzB,GAAC,MAAM,CAAC,KAAK,IAAG,OAAO;QACvB,GAAC,MAAM,CAAC,aAAa,CAAC,IAAG,aAAa,KAAK,UAAU;QACrD,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;QAC3B,GAAC,MAAM,CAAC,OAAO,IAAG,eAAe,KAAK,SAAS;QAC/C,GAAC,MAAM,CAAC,YAAY,CAAC,IAAG,SAAS;QACjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,cAAc;QAC9C,GAAC,MAAM,CAAC,iBAAiB,IAAG,oBAAoB;YAChD,CAAC;IAEH,IAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,IAAM,sBAAsB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE5D,eAAe,CAAC;QACd,gGAAgG;QAChG,gCAAgC;QAChC,gGAAgG;QAChG,6DAA6D;QAC7D,qFAAqF;QACrF,IAAI,WAAW,IAAI,mBAAmB,EAAE;YACtC,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aACxD;YACD,IAAI,sBAAsB,CAAC,OAAO,EAAE;gBAClC,sBAAsB,CAAC,OAAO,CAAC,WAAW,GAAG,mBAAmB,CAAC;aAClE;SACF;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,mBAAmB,EAAE,UAAU,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE3E,IAAM,KAAK,GACT,eAAe,KAAK,SAAS;QAC3B,CAAC,CAAC;YACE,SAAS,EAAE,qBAAc,eAAe,QAAK;SAC9C;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAM,cAAc,GAA0D;QAC5E,eAAe,EAAE,QAAQ;KAC1B,CAAC;IAEF,IAAI,QAAQ,IAAI,CAAC,oBAAoB,EAAE;QACrC,cAAc,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;KACtC;IAED,IAAI,YAAY,EAAE;QAChB,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC;KAChD;IAED,2IAA2I;IAC3I,IAAI,WAAW,EAAE;QACf,cAAc,CAAC,cAAc,CAAC,GAAG,WAAW,CAAC;KAC9C;IAED,IAAI,YAAY,IAAI,WAAW,EAAE;QAC/B,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC;QAC/C,cAAc,CAAC,cAAc,CAAC,GAAG,WAAW,CAAC;KAC9C;IAED,OAAO,CACL,qCAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,IAAM,cAAc,EAAM,IAAI;QACjF,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAE,GAAG,EAAE,UAAU,IACtD,OAAO,CACJ;QACN,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI;QACrD,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,GAAG,EAAE,sBAAsB,GAAQ,CAChF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useLayoutEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option.js';\n\nexport interface SelectableItemProps extends BaseComponentProps {\n  children: React.ReactNode;\n  ariaSelected?: boolean;\n  ariaChecked?: boolean;\n  selected?: boolean;\n  highlighted?: boolean;\n  disabled?: boolean;\n  hasBackground?: boolean;\n  isParent?: boolean;\n  isChild?: boolean;\n  virtualPosition?: number;\n  padBottom?: boolean;\n  isNextSelected?: boolean;\n  useInteractiveGroups?: boolean;\n  screenReaderContent?: string;\n  ariaPosinset?: number;\n  ariaSetsize?: number;\n  highlightType?: HighlightType;\n}\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightType,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['is-keyboard']]: highlightType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {\n    'aria-disabled': disabled,\n  };\n\n  if (isParent && !useInteractiveGroups) {\n    a11yProperties['aria-hidden'] = true;\n  }\n\n  if (ariaSelected) {\n    a11yProperties['aria-selected'] = ariaSelected;\n  }\n\n  // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n  if (ariaChecked) {\n    a11yProperties['aria-checked'] = ariaChecked;\n  }\n\n  if (ariaPosinset && ariaSetsize) {\n    a11yProperties['aria-posinset'] = ariaPosinset;\n    a11yProperties['aria-setsize'] = ariaSetsize;\n  }\n\n  return (\n    <li role=\"option\" className={classNames} style={style} {...a11yProperties} {...rest}>\n      <div className={styles['option-content']} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </li>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}

package/internal/environment.js

@@ -1,5 +1,5 @@
 
-    export var PACKAGE_VERSION = '3.0.0 (7a19dc2)';
+    export var PACKAGE_VERSION = '3.0.0 (a978d36)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/generated/theming/index.cjs

@@ -1876,9 +1876,9 @@ module.exports.preset = {
         "comfortable": "{spaceXl}",
         "compact": "{spaceXl}"
       },
-      "spaceDarkHeaderPaddingBottom": {
-        "comfortable": "24px",
-        "compact": "12px"
+      "spaceContentHeaderPaddingBottom": {
+        "comfortable": "{spaceXl}",
+        "compact": "{spaceS}"
       },
       "spaceDarkHeaderOverlapDistance": {
         "comfortable": "36px",
@@ -6095,7 +6095,7 @@ module.exports.preset = {
       "spaceContainerContentTop": "density",
       "spaceContainerHeaderVertical": "density",
       "spaceContainerHorizontal": "density",
-      "spaceDarkHeaderPaddingBottom": "density",
+      "spaceContentHeaderPaddingBottom": "density",
       "spaceDarkHeaderOverlapDistance": "density",
       "spaceExpandableSectionIconOffsetTop": "density",
       "spaceFieldHorizontal": "density",
@@ -7149,7 +7149,7 @@ module.exports.preset = {
     "spaceContainerContentTop": "space-container-content-top",
     "spaceContainerHeaderVertical": "space-container-header-vertical",
     "spaceContainerHorizontal": "space-container-horizontal",
-    "spaceDarkHeaderPaddingBottom": "space-dark-header-padding-bottom",
+    "spaceContentHeaderPaddingBottom": "space-content-header-padding-bottom",
     "spaceDarkHeaderOverlapDistance": "space-dark-header-overlap-distance",
     "spaceExpandableSectionIconOffsetTop": "space-expandable-section-icon-offset-top",
     "spaceFieldHorizontal": "space-field-horizontal",
@@ -7792,7 +7792,7 @@ module.exports.preset = {
     "spaceContainerContentTop": "--space-container-content-top-fsd8nr",
     "spaceContainerHeaderVertical": "--space-container-header-vertical-zsjhel",
     "spaceContainerHorizontal": "--space-container-horizontal-ddrezg",
-    "spaceDarkHeaderPaddingBottom": "--space-dark-header-padding-bottom-jg1586",
+    "spaceContentHeaderPaddingBottom": "--space-content-header-padding-bottom-nvqytg",
     "spaceDarkHeaderOverlapDistance": "--space-dark-header-overlap-distance-hfejul",
     "spaceExpandableSectionIconOffsetTop": "--space-expandable-section-icon-offset-top-svbirl",
     "spaceFieldHorizontal": "--space-field-horizontal-89h2yr",

package/internal/generated/theming/index.js

@@ -1876,9 +1876,9 @@ export var preset = {
         "comfortable": "{spaceXl}",
         "compact": "{spaceXl}"
       },
-      "spaceDarkHeaderPaddingBottom": {
-        "comfortable": "24px",
-        "compact": "12px"
+      "spaceContentHeaderPaddingBottom": {
+        "comfortable": "{spaceXl}",
+        "compact": "{spaceS}"
       },
       "spaceDarkHeaderOverlapDistance": {
         "comfortable": "36px",
@@ -6095,7 +6095,7 @@ export var preset = {
       "spaceContainerContentTop": "density",
       "spaceContainerHeaderVertical": "density",
       "spaceContainerHorizontal": "density",
-      "spaceDarkHeaderPaddingBottom": "density",
+      "spaceContentHeaderPaddingBottom": "density",
       "spaceDarkHeaderOverlapDistance": "density",
       "spaceExpandableSectionIconOffsetTop": "density",
       "spaceFieldHorizontal": "density",
@@ -7149,7 +7149,7 @@ export var preset = {
     "spaceContainerContentTop": "space-container-content-top",
     "spaceContainerHeaderVertical": "space-container-header-vertical",
     "spaceContainerHorizontal": "space-container-horizontal",
-    "spaceDarkHeaderPaddingBottom": "space-dark-header-padding-bottom",
+    "spaceContentHeaderPaddingBottom": "space-content-header-padding-bottom",
     "spaceDarkHeaderOverlapDistance": "space-dark-header-overlap-distance",
     "spaceExpandableSectionIconOffsetTop": "space-expandable-section-icon-offset-top",
     "spaceFieldHorizontal": "space-field-horizontal",
@@ -7792,7 +7792,7 @@ export var preset = {
     "spaceContainerContentTop": "--space-container-content-top-fsd8nr",
     "spaceContainerHeaderVertical": "--space-container-header-vertical-zsjhel",
     "spaceContainerHorizontal": "--space-container-horizontal-ddrezg",
-    "spaceDarkHeaderPaddingBottom": "--space-dark-header-padding-bottom-jg1586",
+    "spaceContentHeaderPaddingBottom": "--space-content-header-padding-bottom-nvqytg",
     "spaceDarkHeaderOverlapDistance": "--space-dark-header-overlap-distance-hfejul",
     "spaceExpandableSectionIconOffsetTop": "--space-expandable-section-icon-offset-top-svbirl",
     "spaceFieldHorizontal": "--space-field-horizontal-89h2yr",

package/internal/utils/date-time/format-timezone-offset.d.ts

@@ -1,2 +1,2 @@
-export declare function formatTimezoneOffset(offsetInMinutes: number): string;
+export declare function formatTimezoneOffset(isoDate: string, offsetInMinutes?: number): string;
 //# sourceMappingURL=format-timezone-offset.d.ts.map