@okta/odyssey-react-mui 1.14.7 → 1.15.8

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useRef } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGvDC,KAAK;AAAA,SAMLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwCxC,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IACdwB,eAAe,EAAEF,KAAK;IACtBG,iBAAiB,EAAElB;EACrB,CAAC,CACH,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtC,CAAC;IACCQ,eAAe;IACf0B,qBAAqB;IACrBnB,EAAE;IACFoB;EACgB,CAAC,KACjB7B,IAAA,CAAA8B,WAAA;IAAA,GACMP,WAAW;IACf,oBAAkBrB,eAAgB;IAClC,qBAAmB0B,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASZ,MAAO;IAChBR,EAAE,EAAEA,EAAG;IACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;IACzBM,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAf,QAAA,EAEpBA;EAAQ,CACI,CAChB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJM,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCyB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGxC,IAAI,CAACQ,UAAU,CAAC;AAC3CgC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIhC,UAAU"}
+{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactNode, useCallback, useRef } from \"react\";\n\nimport { RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAaC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGpDC,KAAK;AAAA,SAMLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwCxC,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IACdwB,eAAe,EAAEF,KAAK;IACtBG,iBAAiB,EAAElB;EACrB,CAAC,CACH,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtC,CAAC;IACCQ,eAAe;IACf0B,qBAAqB;IACrBnB,EAAE;IACFoB;EACgB,CAAC,KACjB7B,IAAA,CAAA8B,WAAA;IAAA,GACMP,WAAW;IACf,oBAAkBrB,eAAgB;IAClC,qBAAmB0B,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASZ,MAAO;IAChBR,EAAE,EAAEA,EAAG;IACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;IACzBM,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAf,QAAA,EAEpBA;EAAQ,CACI,CAChB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJM,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCyB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGxC,IAAI,CAACQ,UAAU,CAAC;AAC3CgC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIhC,UAAU"}

package/dist/Select.js

@@ -66,6 +66,7 @@ const NonInteractiveIcon = styled(CloseCircleFilledIcon, {
   margin-inline-end: -${({
   odysseyDesignTokens
 }) => odysseyDesignTokens.Spacing1};
+  margin-block-end: -1px;
 `;
 const ChipsInnerContainer = styled(_Box, {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isInteractive"
@@ -75,9 +76,7 @@ const ChipsInnerContainer = styled(_Box, {
   gap: ${({
   odysseyDesignTokens
 }) => odysseyDesignTokens.Spacing1};
-  pointer-events: ${({
-  isInteractive
-}) => isInteractive ? "auto" : "none"};
+  pointer-events: none;
   opacity: ${({
   isInteractive
 }) => isInteractive ? 1 : 0};
@@ -190,7 +189,7 @@ const Select = ({
     return _jsxs(ChipsInnerContainer, {
       isInteractive: isInteractive,
       odysseyDesignTokens: odysseyDesignTokens,
-      children: [_jsx(ChipsSpacer, {
+      children: [selection.length <= 0 && _jsx(ChipsSpacer, {
         odysseyDesignTokens: odysseyDesignTokens
       }), selection.map(item => item?.length > 0 && _jsx(_Chip, {
         label: _jsxs(_Fragment, {

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","styled","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","ChipsSpacer","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","target","split","normalizedOptions","map","option","text","type","Chips","selection","removeSelection","itemToRemove","Array","isArray","newValue","filter","item","syntheticEvent","stopPropagation","children","length","_Chip","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","inputProps","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n  MouseEvent,\n} from \"react\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isInteractive\",\n})<{\n  isInteractive?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: ${({ isInteractive }) => (isInteractive ? \"auto\" : \"none\")};\n  opacity: ${({ isInteractive }) => (isInteractive ? 1 : 0)};\n`;\n\nconst ChipsSpacer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: inline-block;\n  border-color: transparent;\n  border-style: solid none;\n  border-width: 1px;\n  height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const {\n        target: { value },\n      } = event;\n      if (controlledStateRef.current !== CONTROLLED) {\n        setInternalSelectedValues(\n          (typeof value === \"string\" ? value.split(\",\") : value) as Value,\n        );\n      }\n      onChangeProp?.(event, child);\n    },\n    [onChangeProp],\n  );\n\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const normalizedOptions = useMemo(\n    () =>\n      options.map((option) => {\n        if (typeof option === \"object\") {\n          /**\n           * If the value of `option?.value is an empty string, we need to make sure that we\n           * set an empty string to `value` in the normalized option so that the select component\n           * can potentially set it as the selected one in the text input\n           */\n          const value =\n            option?.value === \"\" ? option.value : option.value || option.text;\n          return {\n            text: option.text,\n            value,\n            type: option.type === \"heading\" ? \"heading\" : \"option\",\n          };\n        }\n        return { text: option, value: option, type: \"option\" };\n      }),\n    [options],\n  );\n\n  const Chips = useCallback(\n    ({\n      selection,\n      isInteractive,\n    }: {\n      selection: string[];\n      isInteractive: boolean;\n    }) => {\n      const removeSelection = (itemToRemove: string) => {\n        if (Array.isArray(internalSelectedValues)) {\n          const newValue = internalSelectedValues.filter(\n            (item: string) => item !== itemToRemove,\n          );\n\n          const syntheticEvent = {\n            target: { value: newValue },\n          } as SelectChangeEvent<Value>;\n\n          onChange(syntheticEvent, null);\n        }\n      };\n\n      const stopPropagation = (event: MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      return (\n        <ChipsInnerContainer\n          isInteractive={isInteractive}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <ChipsSpacer odysseyDesignTokens={odysseyDesignTokens} />\n          {selection.map(\n            (item: string) =>\n              item?.length > 0 && (\n                <MuiChip\n                  key={item}\n                  label={\n                    <>\n                      {item}\n                      {!isInteractive &&\n                        controlledStateRef.current === CONTROLLED &&\n                        hasMultipleChoices && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                    </>\n                  }\n                  tabIndex={-1}\n                  onDelete={\n                    isInteractive && controlledStateRef.current === CONTROLLED\n                      ? () => removeSelection(item)\n                      : undefined\n                  }\n                  deleteIcon={\n                    <CloseCircleFilledIcon\n                      sx={{ pointerEvents: \"auto\" }}\n                      // We need to stop event propagation on mouse down to prevent the deletion\n                      // from being blocked by the Select list opening, and also ensure that\n                      // the pointerEvent is registered even when the parent's are not\n                      onMouseDown={stopPropagation}\n                    />\n                  }\n                />\n              ),\n          )}\n        </ChipsInnerContainer>\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      onChange,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const children = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices &&\n              (internalSelectedValues?.includes(option.value) ||\n                internalSelectedValues === option.value) && (\n                <ListItemSecondaryAction>\n                  <CheckIcon />\n                </ListItemSecondaryAction>\n              )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) =>\n      Array.isArray(value) && <Chips selection={value} isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          children={children}\n          id={id}\n          inputProps={{ \"data-se\": testId }}\n          inputRef={localInputRef}\n          labelId={labelElementId}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        />\n        {hasMultipleChoices && Array.isArray(value) && (\n          <ChipsPositioningContainer odysseyDesignTokens={odysseyDesignTokens}>\n            <Chips selection={value} isInteractive={true} />\n          </ChipsPositioningContainer>\n        )}\n      </SelectContainer>\n    ),\n    [\n      children,\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n      translate,\n      value,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","styled","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","ChipsSpacer","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","target","split","normalizedOptions","map","option","text","type","Chips","selection","removeSelection","itemToRemove","Array","isArray","newValue","filter","item","syntheticEvent","stopPropagation","children","length","_Chip","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","inputProps","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n  MouseEvent,\n} from \"react\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isInteractive\",\n})<{\n  isInteractive?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive }) => (isInteractive ? 1 : 0)};\n`;\n\nconst ChipsSpacer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: inline-block;\n  border-color: transparent;\n  border-style: solid none;\n  border-width: 1px;\n  height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const {\n        target: { value },\n      } = event;\n      if (controlledStateRef.current !== CONTROLLED) {\n        setInternalSelectedValues(\n          (typeof value === \"string\" ? value.split(\",\") : value) as Value,\n        );\n      }\n      onChangeProp?.(event, child);\n    },\n    [onChangeProp],\n  );\n\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const normalizedOptions = useMemo(\n    () =>\n      options.map((option) => {\n        if (typeof option === \"object\") {\n          /**\n           * If the value of `option?.value is an empty string, we need to make sure that we\n           * set an empty string to `value` in the normalized option so that the select component\n           * can potentially set it as the selected one in the text input\n           */\n          const value =\n            option?.value === \"\" ? option.value : option.value || option.text;\n          return {\n            text: option.text,\n            value,\n            type: option.type === \"heading\" ? \"heading\" : \"option\",\n          };\n        }\n        return { text: option, value: option, type: \"option\" };\n      }),\n    [options],\n  );\n\n  const Chips = useCallback(\n    ({\n      selection,\n      isInteractive,\n    }: {\n      selection: string[];\n      isInteractive: boolean;\n    }) => {\n      const removeSelection = (itemToRemove: string) => {\n        if (Array.isArray(internalSelectedValues)) {\n          const newValue = internalSelectedValues.filter(\n            (item: string) => item !== itemToRemove,\n          );\n\n          const syntheticEvent = {\n            target: { value: newValue },\n          } as SelectChangeEvent<Value>;\n\n          onChange(syntheticEvent, null);\n        }\n      };\n\n      const stopPropagation = (event: MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      return (\n        <ChipsInnerContainer\n          isInteractive={isInteractive}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {selection.length <= 0 && (\n            <ChipsSpacer odysseyDesignTokens={odysseyDesignTokens} />\n          )}\n          {selection.map(\n            (item: string) =>\n              item?.length > 0 && (\n                <MuiChip\n                  key={item}\n                  label={\n                    <>\n                      {item}\n                      {!isInteractive &&\n                        controlledStateRef.current === CONTROLLED &&\n                        hasMultipleChoices && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                    </>\n                  }\n                  tabIndex={-1}\n                  onDelete={\n                    isInteractive && controlledStateRef.current === CONTROLLED\n                      ? () => removeSelection(item)\n                      : undefined\n                  }\n                  deleteIcon={\n                    <CloseCircleFilledIcon\n                      sx={{ pointerEvents: \"auto\" }}\n                      // We need to stop event propagation on mouse down to prevent the deletion\n                      // from being blocked by the Select list opening, and also ensure that\n                      // the pointerEvent is registered even when the parent's are not\n                      onMouseDown={stopPropagation}\n                    />\n                  }\n                />\n              ),\n          )}\n        </ChipsInnerContainer>\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      onChange,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const children = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices &&\n              (internalSelectedValues?.includes(option.value) ||\n                internalSelectedValues === option.value) && (\n                <ListItemSecondaryAction>\n                  <CheckIcon />\n                </ListItemSecondaryAction>\n              )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) =>\n      Array.isArray(value) && <Chips selection={value} isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          children={children}\n          id={id}\n          inputProps={{ \"data-se\": testId }}\n          inputRef={localInputRef}\n          labelId={labelElementId}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        />\n        {hasMultipleChoices && Array.isArray(value) && (\n          <ChipsPositioningContainer odysseyDesignTokens={odysseyDesignTokens}>\n            <Chips selection={value} isInteractive={true} />\n          </ChipsPositioningContainer>\n        )}\n      </SelectContainer>\n    ),\n    [\n      children,\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n      translate,\n      value,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}

package/dist/Tabs.js

@@ -48,6 +48,7 @@ const Tabs = ({
   onChange: onChangeProp
 }) => {
   const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
+  const [scrollButtons, setScrollButtons] = useState(false);
   const onChange = useCallback((event, value) => {
     setTabState(value);
     onChangeProp?.(event, value);
@@ -57,6 +58,25 @@ const Tabs = ({
       setTabState(value);
     }
   }, [value]);
+  useEffect(() => {
+    let animationFrame;
+    const cleanup = () => {
+      cancelAnimationFrame(animationFrame);
+      document.removeEventListener("visibilitychange", refreshScrollButtons);
+    };
+    function refreshScrollButtons() {
+      animationFrame = requestAnimationFrame(() => {
+        cleanup();
+        setScrollButtons("auto");
+      });
+    }
+    if (scrollButtons !== "auto") {
+      document.addEventListener("visibilitychange", refreshScrollButtons);
+    }
+    return () => {
+      cleanup();
+    };
+  }, [scrollButtons]);
   const renderTab = useCallback((tab, index) => {
     const {
       testId,
@@ -88,6 +108,7 @@ const Tabs = ({
       onChange: onChange,
       "aria-label": ariaLabel,
       variant: "scrollable",
+      scrollButtons: scrollButtons,
       children: tabs.map((tab, index) => renderTab(tab, index))
     }), tabs.map((tab, index) => _jsx(MuiTabPanel, {
       value: tab.value ? tab.value : index.toString(),

package/dist/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["memo","useCallback","useEffect","useState","TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","Badge","Box","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TabLabel","label","notificationCount","notificationCountMax","tabState","value","odysseyDesignTokens","children","undefined","sx","marginInlineStart","Spacing2","badgeContent","badgeContentMax","type","Tabs","ariaLabel","initialValue","tabs","onChange","onChangeProp","setTabState","event","renderTab","tab","index","testId","isDisabled","startIcon","_Tab","disabled","icon","tabIndex","toString","variant","map","MemoizedTabs","displayName"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabListProps as MuiTabListProps,\n  TabPanel as MuiTabPanel,\n} from \"@mui/lab\";\nimport { Tab as MuiTab } from \"@mui/material\";\n\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Box } from \"./Box\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & {\n  notificationCount?: BadgeProps[\"badgeContent\"];\n  notificationCountMax?: BadgeProps[\"badgeContentMax\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type TabsProps = {\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n  /**\n   * Callback fired when the active tab is changed.\n   */\n  onChange?: MuiTabListProps[\"onChange\"];\n};\n\nconst TabLabel = ({\n  label,\n  notificationCount,\n  notificationCountMax,\n  tabState,\n  value,\n}: Pick<\n  TabItemProps,\n  \"label\" | \"notificationCount\" | \"notificationCountMax\" | \"value\"\n> & {\n  tabState: string;\n}) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      {label}\n      {notificationCount !== undefined && notificationCount > 0 && (\n        <Box\n          sx={{\n            marginInlineStart: notificationCount\n              ? odysseyDesignTokens.Spacing2\n              : 0,\n          }}\n        >\n          <Badge\n            badgeContent={notificationCount}\n            badgeContentMax={notificationCountMax}\n            type={value === tabState ? \"attention\" : \"default\"}\n          />\n        </Box>\n      )}\n    </>\n  );\n};\n\nconst Tabs = ({\n  ariaLabel,\n  initialValue,\n  tabs,\n  value,\n  onChange: onChangeProp,\n}: TabsProps & Pick<HtmlProps, \"ariaLabel\">) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n\n  const onChange = useCallback<NonNullable<MuiTabListProps[\"onChange\"]>>(\n    (event, value: string) => {\n      setTabState(value);\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  const renderTab = useCallback(\n    (tab: TabItemProps, index: number) => {\n      const {\n        testId,\n        isDisabled,\n        label,\n        startIcon,\n        value,\n        notificationCount,\n        notificationCountMax,\n      } = tab;\n\n      return (\n        <MuiTab\n          data-se={testId}\n          disabled={isDisabled}\n          icon={startIcon}\n          tabIndex={0}\n          label={\n            <TabLabel\n              label={label}\n              notificationCount={notificationCount}\n              notificationCountMax={notificationCountMax}\n              tabState={tabState}\n              value={value}\n            />\n          }\n          value={value ? value : index.toString()}\n          key={value ? value : index.toString()}\n        />\n      );\n    },\n    [tabState],\n  );\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList\n        onChange={onChange}\n        aria-label={ariaLabel}\n        variant=\"scrollable\"\n      >\n        {tabs.map((tab, index) => renderTab(tab, index))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["memo","useCallback","useEffect","useState","TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","Badge","Box","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TabLabel","label","notificationCount","notificationCountMax","tabState","value","odysseyDesignTokens","children","undefined","sx","marginInlineStart","Spacing2","badgeContent","badgeContentMax","type","Tabs","ariaLabel","initialValue","tabs","onChange","onChangeProp","setTabState","scrollButtons","setScrollButtons","event","animationFrame","cleanup","cancelAnimationFrame","document","removeEventListener","refreshScrollButtons","requestAnimationFrame","addEventListener","renderTab","tab","index","testId","isDisabled","startIcon","_Tab","disabled","icon","tabIndex","toString","variant","map","MemoizedTabs","displayName"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabListProps as MuiTabListProps,\n  TabPanel as MuiTabPanel,\n} from \"@mui/lab\";\nimport { Tab as MuiTab } from \"@mui/material\";\n\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Box } from \"./Box\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & {\n  notificationCount?: BadgeProps[\"badgeContent\"];\n  notificationCountMax?: BadgeProps[\"badgeContentMax\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type TabsProps = {\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n  /**\n   * Callback fired when the active tab is changed.\n   */\n  onChange?: MuiTabListProps[\"onChange\"];\n};\n\nconst TabLabel = ({\n  label,\n  notificationCount,\n  notificationCountMax,\n  tabState,\n  value,\n}: Pick<\n  TabItemProps,\n  \"label\" | \"notificationCount\" | \"notificationCountMax\" | \"value\"\n> & {\n  tabState: string;\n}) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      {label}\n      {notificationCount !== undefined && notificationCount > 0 && (\n        <Box\n          sx={{\n            marginInlineStart: notificationCount\n              ? odysseyDesignTokens.Spacing2\n              : 0,\n          }}\n        >\n          <Badge\n            badgeContent={notificationCount}\n            badgeContentMax={notificationCountMax}\n            type={value === tabState ? \"attention\" : \"default\"}\n          />\n        </Box>\n      )}\n    </>\n  );\n};\n\nconst Tabs = ({\n  ariaLabel,\n  initialValue,\n  tabs,\n  value,\n  onChange: onChangeProp,\n}: TabsProps & Pick<HtmlProps, \"ariaLabel\">) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n  /*\n    The scrollButtons prop is initially set to `false`.\n    It's then reset to `auto` when the document is visible.\n    This prevents a rare bug where scroll buttons appear\n    when the component is rendered while hidden and the\n    screen is wide enough to not need scroll buttons.\n  */\n  const [scrollButtons, setScrollButtons] =\n    useState<MuiTabListProps[\"scrollButtons\"]>(false);\n  const onChange = useCallback<NonNullable<MuiTabListProps[\"onChange\"]>>(\n    (event, value: string) => {\n      setTabState(value);\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  // listen for visibility change to reset scroll buttons override\n  useEffect(() => {\n    // keep track of animation frame to cancel when needed\n    let animationFrame: number;\n\n    // called when unmounted or scroll buttons is reset\n    const cleanup = () => {\n      cancelAnimationFrame(animationFrame);\n      document.removeEventListener(\"visibilitychange\", refreshScrollButtons);\n    };\n\n    // Reset the scroll buttons override when the document becomes visible.\n    // If called, then the document is hidden because the event listener\n    // is only registered if the document is hidden\n    function refreshScrollButtons() {\n      animationFrame = requestAnimationFrame(() => {\n        cleanup();\n        setScrollButtons(\"auto\");\n      });\n    }\n\n    // don't override scroll buttons if it's already set to \"auto\"\n    if (scrollButtons !== \"auto\") {\n      document.addEventListener(\"visibilitychange\", refreshScrollButtons);\n    }\n    return () => {\n      cleanup();\n    };\n  }, [scrollButtons]);\n\n  const renderTab = useCallback(\n    (tab: TabItemProps, index: number) => {\n      const {\n        testId,\n        isDisabled,\n        label,\n        startIcon,\n        value,\n        notificationCount,\n        notificationCountMax,\n      } = tab;\n\n      return (\n        <MuiTab\n          data-se={testId}\n          disabled={isDisabled}\n          icon={startIcon}\n          tabIndex={0}\n          label={\n            <TabLabel\n              label={label}\n              notificationCount={notificationCount}\n              notificationCountMax={notificationCountMax}\n              tabState={tabState}\n              value={value}\n            />\n          }\n          value={value ? value : index.toString()}\n          key={value ? value : index.toString()}\n        />\n      );\n    },\n    [tabState],\n  );\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList\n        onChange={onChange}\n        aria-label={ariaLabel}\n        variant=\"scrollable\"\n        scrollButtons={scrollButtons}\n      >\n        {tabs.map((tab, index) => renderTab(tab, index))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":"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"}

package/dist/Tile.js

@@ -26,29 +26,25 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export const TILE_IMAGE_HEIGHT = "64px";
 const ImageContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren"
-})`
-  display: flex;
-  align-items: flex-start;
-  max-height: ${TILE_IMAGE_HEIGHT};
-  margin-block-end: ${({
-  odysseyDesignTokens
-}) => odysseyDesignTokens.Spacing5};
-  padding-right: ${({
+})(({
   odysseyDesignTokens,
   hasMenuButtonChildren
-}) => hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0};
-`;
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  maxHeight: `${TILE_IMAGE_HEIGHT}`,
+  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0
+}));
 const MenuButtonContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-})`
-  position: absolute;
-  right: ${({
-  odysseyDesignTokens
-}) => odysseyDesignTokens.Spacing3};
-  top: ${({
+})(({
   odysseyDesignTokens
-}) => odysseyDesignTokens.Spacing3};
-`;
+}) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: odysseyDesignTokens.Spacing3
+}));
 const buttonProviderValue = {
   isFullWidth: true
 };

package/dist/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":["memo","useMemo","styled","ButtonContext","MoreIcon","MenuButton","useOdysseyDesignTokens","Heading5","Paragraph","Support","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TILE_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing5","hasMenuButtonChildren","MenuButtonContainer","Spacing3","buttonProviderValue","isFullWidth","Tile","button","description","image","menuButtonChildren","onClick","overline","title","cardContent","children","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedTile","displayName"],"sources":["../src/Tile.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { MouseEventHandler, ReactElement, memo, useMemo } from \"react\";\n\nimport {\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \"./Button\";\nimport { ButtonContext } from \"./ButtonContext\";\nimport { MoreIcon } from \"./icons.generated\";\nimport { MenuButton, MenuButtonProps } from \"./MenuButton\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Support } from \"./Typography\";\n\nexport const TILE_IMAGE_HEIGHT = \"64px\";\n\nexport type TileProps = {\n  /**\n   * The body text of the tile. The consumer is responsible for truncating this string.\n   */\n  description?: string;\n  /**\n   * An optional image or icon at the top of the tile, preferably as an <img> or <svg> element.\n   */\n  image?: ReactElement; // Icon or image\n  /**\n   * The \"eyebrow\" text above the tile title.\n   */\n  overline?: string;\n  /**\n   * The heading of the tile.\n   */\n  title?: string;\n} & ( // You can't have actions and onClick at the same time\n  | {\n      /**\n       * The event handler for when the user clicks the tile.\n       */\n      onClick: MouseEventHandler;\n      button?: never;\n      menuButtonChildren?: never;\n    }\n  | {\n      onClick?: never;\n      /**\n       * The main action button for the tile. Not valid if the tile itself is clickable.\n       */\n      button?: ReactElement<typeof Button>;\n      /**\n       * Menu items to be rendered in the tile's optional menu button. If this prop is undefined, the\n       * menu button will not be shown. Not valid if the tile itself is clickable.\n       */\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n}>`\n  display: flex;\n  align-items: flex-start;\n  max-height: ${TILE_IMAGE_HEIGHT};\n  margin-block-end: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing5};\n  padding-right: ${({ odysseyDesignTokens, hasMenuButtonChildren }) =>\n    hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0};\n`;\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>`\n  position: absolute;\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing3};\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing3};\n`;\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst Tile = ({\n  button,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: TileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const cardContent = useMemo(\n    () => (\n      <>\n        {image && (\n          <ImageContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            hasMenuButtonChildren={Boolean(menuButtonChildren)}\n          >\n            {image}\n          </ImageContainer>\n        )}\n\n        {overline && <Support component=\"div\">{overline}</Support>}\n        {title && <Heading5 component=\"div\">{title}</Heading5>}\n        {description && (\n          <Paragraph color=\"textSecondary\">{description}</Paragraph>\n        )}\n\n        {button && (\n          <MuiCardActions>\n            <ButtonContext.Provider value={buttonProviderValue}>\n              {button}\n            </ButtonContext.Provider>\n          </MuiCardActions>\n        )}\n      </>\n    ),\n    [\n      button,\n      description,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      odysseyDesignTokens,\n    ],\n  );\n\n  return (\n    <MuiCard className={onClick ? \"isClickable\" : \"\"}>\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel=\"Tile menu\"\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText=\"Actions\"\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedTile = memo(Tile);\nMemoizedTile.displayName = \"Tile\";\n\nexport { MemoizedTile as Tile };\n"],"mappings":"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"}
+{"version":3,"file":"Tile.js","names":["memo","useMemo","styled","ButtonContext","MoreIcon","MenuButton","useOdysseyDesignTokens","Heading5","Paragraph","Support","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TILE_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","hasMenuButtonChildren","display","alignItems","maxHeight","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","buttonProviderValue","isFullWidth","Tile","button","description","image","menuButtonChildren","onClick","overline","title","cardContent","children","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedTile","displayName"],"sources":["../src/Tile.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { MouseEventHandler, ReactElement, memo, useMemo } from \"react\";\n\nimport {\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \"./Button\";\nimport { ButtonContext } from \"./ButtonContext\";\nimport { MoreIcon } from \"./icons.generated\";\nimport { MenuButton, MenuButtonProps } from \"./MenuButton\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Support } from \"./Typography\";\n\nexport const TILE_IMAGE_HEIGHT = \"64px\";\n\nexport type TileProps = {\n  /**\n   * The body text of the tile. The consumer is responsible for truncating this string.\n   */\n  description?: string;\n  /**\n   * An optional image or icon at the top of the tile, preferably as an <img> or <svg> element.\n   */\n  image?: ReactElement; // Icon or image\n  /**\n   * The \"eyebrow\" text above the tile title.\n   */\n  overline?: string;\n  /**\n   * The heading of the tile.\n   */\n  title?: string;\n} & ( // You can't have actions and onClick at the same time\n  | {\n      /**\n       * The event handler for when the user clicks the tile.\n       */\n      onClick: MouseEventHandler;\n      button?: never;\n      menuButtonChildren?: never;\n    }\n  | {\n      onClick?: never;\n      /**\n       * The main action button for the tile. Not valid if the tile itself is clickable.\n       */\n      button?: ReactElement<typeof Button>;\n      /**\n       * Menu items to be rendered in the tile's optional menu button. If this prop is undefined, the\n       * menu button will not be shown. Not valid if the tile itself is clickable.\n       */\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: `${TILE_IMAGE_HEIGHT}`,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst Tile = ({\n  button,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: TileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const cardContent = useMemo(\n    () => (\n      <>\n        {image && (\n          <ImageContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            hasMenuButtonChildren={Boolean(menuButtonChildren)}\n          >\n            {image}\n          </ImageContainer>\n        )}\n\n        {overline && <Support component=\"div\">{overline}</Support>}\n        {title && <Heading5 component=\"div\">{title}</Heading5>}\n        {description && (\n          <Paragraph color=\"textSecondary\">{description}</Paragraph>\n        )}\n\n        {button && (\n          <MuiCardActions>\n            <ButtonContext.Provider value={buttonProviderValue}>\n              {button}\n            </ButtonContext.Provider>\n          </MuiCardActions>\n        )}\n      </>\n    ),\n    [\n      button,\n      description,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      odysseyDesignTokens,\n    ],\n  );\n\n  return (\n    <MuiCard className={onClick ? \"isClickable\" : \"\"}>\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel=\"Tile menu\"\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText=\"Actions\"\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedTile = memo(Tile);\nMemoizedTile.displayName = \"Tile\";\n\nexport { MemoizedTile as Tile };\n"],"mappings":"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"}

package/dist/labs/DataFilters.js

@@ -153,15 +153,14 @@ const DataFilters = ({
     }));
     setFilters(updatedFilters);
   }, [inputValues, filtersProp]);
-  const AutocompleteOuterContainer = styled.div`
-    display: flex;
-    gap: 2;
-    align-items: center;
-    alignitems: "flex-end";
-  `;
-  const AutocompleteInnerContainer = styled.div`
-    width: "100%";
-  `;
+  const AutocompleteOuterContainer = styled("div")({
+    display: "flex",
+    gap: "2",
+    alignItems: "flex-end"
+  });
+  const AutocompleteInnerContainer = styled("div")({
+    width: "100%"
+  });
   const filterMenu = useMemo(() => _jsxs(_Fragment, {
     children: [_jsx(Box, {
       children: _jsx(Button, {
@@ -285,109 +284,111 @@ const DataFilters = ({
                 padding: 4,
                 minWidth: 320
               },
-              children: _jsxs("form", {
+              children: _jsx("form", {
                 onSubmit: ev => {
                   ev.preventDefault();
                   handleFilterSubmit();
                   setIsFilterPopoverOpen(false);
                   setIsFiltersMenuOpen(false);
                 },
-                children: [filterPopoverCurrentFilter?.variant === "autocomplete" && filterPopoverCurrentFilter?.options && _jsxs(AutocompleteOuterContainer, {
-                  children: [_jsx(AutocompleteInnerContainer, {
-                    children: _jsx(Autocomplete, {
-                      label: filterPopoverCurrentFilter.label,
-                      value: inputValues[filterPopoverCurrentFilter.id] ?? "",
-                      onChange: (_, value) => {
-                        const label = typeof value === "string" ? getAutoCompleteLabel({
-                          label: value
-                        }) : Array.isArray(value) ? getAutoCompleteLabel(value.map(item => typeof item === "string" ? {
-                          label: item
-                        } : item)) : value ? getAutoCompleteLabel(value) : "";
-                        updateInputValue({
-                          filterId: filterPopoverCurrentFilter.id,
-                          value: label
-                        });
-                      },
-                      options: autocompleteOptions
-                    })
-                  }), _jsx(Button, {
-                    variant: "primary",
-                    endIcon: _jsx(CheckIcon, {}),
-                    type: "submit"
-                  })]
-                }), (filterPopoverCurrentFilter?.variant === "text" || filterPopoverCurrentFilter?.variant === "range") && _jsxs(Box, {
-                  sx: {
-                    display: "flex",
-                    gap: 2,
-                    alignItems: "flex-end"
-                  },
-                  children: [_jsx(Box, {
-                    sx: {
-                      width: "100%"
-                    },
-                    children: _jsx(TextField, {
-                      hasInitialFocus: true,
-                      label: filterPopoverCurrentFilter.label,
-                      type: filterPopoverCurrentFilter.variant === "range" ? "number" : "text",
-                      value: inputValues[filterPopoverCurrentFilter.id] ?? "",
-                      onChange: ev => updateInputValue({
-                        filterId: filterPopoverCurrentFilter.id,
-                        value: ev.currentTarget.value
-                      }),
-                      endAdornment: inputValues[filterPopoverCurrentFilter.id] && _jsx(_IconButton, {
-                        size: "small",
-                        "aria-label": t("filters.filter.clear"),
-                        onClick: () => {
+                children: filterPopoverCurrentFilter?.render ? filterPopoverCurrentFilter.render(updateFilters) : _jsxs(_Fragment, {
+                  children: [filterPopoverCurrentFilter?.variant === "autocomplete" && filterPopoverCurrentFilter?.options && _jsxs(AutocompleteOuterContainer, {
+                    children: [_jsx(AutocompleteInnerContainer, {
+                      children: _jsx(Autocomplete, {
+                        label: filterPopoverCurrentFilter.label,
+                        value: inputValues[filterPopoverCurrentFilter.id] ?? "",
+                        onChange: (_, value) => {
+                          const label = typeof value === "string" ? getAutoCompleteLabel({
+                            label: value
+                          }) : Array.isArray(value) ? getAutoCompleteLabel(value.map(item => typeof item === "string" ? {
+                            label: item
+                          } : item)) : value ? getAutoCompleteLabel(value) : "";
                           updateInputValue({
                             filterId: filterPopoverCurrentFilter.id,
-                            value: undefined
-                          });
-                          updateFilters({
-                            filterId: filterPopoverCurrentFilter.id,
-                            value: undefined
+                            value: label
                           });
                         },
-                        children: _jsx(CloseCircleFilledIcon, {})
+                        options: autocompleteOptions
                       })
-                    })
-                  }), _jsx(Button, {
-                    variant: "primary",
-                    endIcon: _jsx(CheckIcon, {}),
-                    type: "submit"
-                  })]
-                }), filterPopoverCurrentFilter?.variant === "multi-select" && filterPopoverCurrentFilter?.options && _jsx(CheckboxGroup, {
-                  label: filterPopoverCurrentFilter.label,
-                  isRequired: true,
-                  children: filterPopoverCurrentFilter.options.map(option => _jsx(Checkbox, {
-                    label: option.label,
-                    value: option.value,
-                    isDefaultChecked: inputValues[filterPopoverCurrentFilter.id]?.includes(option.value) || inputValues[filterPopoverCurrentFilter.id] === undefined,
-                    onChange: () => handleMultiSelectChange(filterPopoverCurrentFilter.id, option.value, true)
-                  }, option.value))
-                }), filterPopoverCurrentFilter?.variant === "select" && filterPopoverCurrentFilter?.options && _jsxs(RadioGroup, {
-                  label: filterPopoverCurrentFilter.label,
-                  onChange: (_, value) => {
-                    updateInputValue({
-                      filterId: filterPopoverCurrentFilter.id,
-                      value
-                    });
-                    updateFilters({
-                      filterId: filterPopoverCurrentFilter.id,
-                      value
-                    });
-                  },
-                  children: [_jsx(Radio, {
-                    label: t("filters.filter.any"),
-                    value: "",
-                    isChecked: !inputValues[filterPopoverCurrentFilter.id]
-                  }), _jsx(_Fragment, {
-                    children: filterPopoverCurrentFilter.options.map(option => _jsx(Radio, {
+                    }), _jsx(Button, {
+                      variant: "primary",
+                      endIcon: _jsx(CheckIcon, {}),
+                      type: "submit"
+                    })]
+                  }), (filterPopoverCurrentFilter?.variant === "text" || filterPopoverCurrentFilter?.variant === "range" || filterPopoverCurrentFilter && filterPopoverCurrentFilter?.variant == undefined) && _jsxs(Box, {
+                    sx: {
+                      display: "flex",
+                      gap: 2,
+                      alignItems: "flex-end"
+                    },
+                    children: [_jsx(Box, {
+                      sx: {
+                        width: "100%"
+                      },
+                      children: _jsx(TextField, {
+                        hasInitialFocus: true,
+                        label: filterPopoverCurrentFilter.label,
+                        type: filterPopoverCurrentFilter.variant === "range" ? "number" : "text",
+                        value: inputValues[filterPopoverCurrentFilter.id] ?? "",
+                        onChange: ev => updateInputValue({
+                          filterId: filterPopoverCurrentFilter.id,
+                          value: ev.currentTarget.value
+                        }),
+                        endAdornment: inputValues[filterPopoverCurrentFilter.id] && _jsx(_IconButton, {
+                          size: "small",
+                          "aria-label": t("filters.filter.clear"),
+                          onClick: () => {
+                            updateInputValue({
+                              filterId: filterPopoverCurrentFilter.id,
+                              value: undefined
+                            });
+                            updateFilters({
+                              filterId: filterPopoverCurrentFilter.id,
+                              value: undefined
+                            });
+                          },
+                          children: _jsx(CloseCircleFilledIcon, {})
+                        })
+                      })
+                    }), _jsx(Button, {
+                      variant: "primary",
+                      endIcon: _jsx(CheckIcon, {}),
+                      type: "submit"
+                    })]
+                  }), filterPopoverCurrentFilter?.variant === "multi-select" && filterPopoverCurrentFilter?.options && _jsx(CheckboxGroup, {
+                    label: filterPopoverCurrentFilter.label,
+                    isRequired: true,
+                    children: filterPopoverCurrentFilter.options.map(option => _jsx(Checkbox, {
                       label: option.label,
                       value: option.value,
-                      isChecked: inputValues[filterPopoverCurrentFilter.id] === option.value
+                      isDefaultChecked: inputValues[filterPopoverCurrentFilter.id]?.includes(option.value) || inputValues[filterPopoverCurrentFilter.id] === undefined,
+                      onChange: () => handleMultiSelectChange(filterPopoverCurrentFilter.id, option.value, true)
                     }, option.value))
+                  }), filterPopoverCurrentFilter?.variant === "select" && filterPopoverCurrentFilter?.options && _jsxs(RadioGroup, {
+                    label: filterPopoverCurrentFilter.label,
+                    onChange: (_, value) => {
+                      updateInputValue({
+                        filterId: filterPopoverCurrentFilter.id,
+                        value
+                      });
+                      updateFilters({
+                        filterId: filterPopoverCurrentFilter.id,
+                        value
+                      });
+                    },
+                    children: [_jsx(Radio, {
+                      label: t("filters.filter.any"),
+                      value: "",
+                      isChecked: !inputValues[filterPopoverCurrentFilter.id]
+                    }), _jsx(_Fragment, {
+                      children: filterPopoverCurrentFilter.options.map(option => _jsx(Radio, {
+                        label: option.label,
+                        value: option.value,
+                        isChecked: inputValues[filterPopoverCurrentFilter.id] === option.value
+                      }, option.value))
+                    })]
                   })]
-                })]
+                })
               })
             })
           })]