npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.25.0 → 3.0.0-dev.27.1 - Mend

@pega/cosmos-react-core 3.0.0-dev.25.0 → 3.0.0-dev.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/lib/components/ListToolbar/ListToolbar.styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { StyledSearchInput } from '../SearchInput';
 import MenuButton from '../MenuButton';
-import { StyledText } from '../Text';
+import Text, { StyledText } from '../Text';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
 import { StyledButton } from '../Button';
@@ -11,12 +11,28 @@ export const StyledSearchForm = styled.div `
     max-width: min(100%, 40ch);
   }
 `;
-export const StyledViewSelector = styled(MenuButton)(({ theme }) => {
+export const StyledViewSelector = styled(MenuButton)(({ theme, required }) => {
     const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const { urgent } = theme.base.palette;
+    const hitAreaMouse = theme.base['hit-area']['mouse-min'];
+    const hitAreaFinger = theme.base['hit-area']['finger-min'];
     return css `
+    flex-shrink: initial;
+    white-space: initial;
     ${StyledText} {
       font-size: ${fontSizes[theme.components.text.h3['font-size']]};
       font-weight: ${theme.components.text.h3['font-weight']};
+      line-height: ${hitAreaMouse};
+      @media (pointer: coarse) {
+        line-height: ${hitAreaFinger};
+      }
+    }
+    ${StyledText}::after {
+      display: ${required ? 'inline-block' : 'none'};
+      content: '\\00a0*';
+      vertical-align: top;
+      color: ${urgent};
     }
   `;
 });
@@ -26,4 +42,22 @@ export const StyledListToolbar = styled.div `
     margin-inline-start: 0;
   }
 `;
+export const StyledHeadingText = styled(Text)(({ theme, required }) => {
+    const { urgent } = theme.base.palette;
+    const hitAreaMouse = theme.base['hit-area']['mouse-min'];
+    const hitAreaFinger = theme.base['hit-area']['finger-min'];
+    return css `
+    line-height: ${hitAreaMouse};
+    @media (pointer: coarse) {
+      line-height: ${hitAreaFinger};
+    }
+    &::after {
+      display: ${required ? 'inline' : 'none'};
+      content: '\\00a0*';
+      vertical-align: top;
+      color: ${urgent};
+    }
+  `;
+});
+StyledHeadingText.defaultProps = defaultThemeProp;
 //# sourceMappingURL=ListToolbar.styles.js.map

package/lib/components/ListToolbar/ListToolbar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;~~AACrC~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,iBAAiB;;;;CAIpB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;~~IACjE~~,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;~~IAEvF~~,OAAO,GAAG,~~CAAA~~;~~MACN~~,UAAU;mBACG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;~~GAEzD~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;IACvC,YAAY,MAAM,YAAY;;;CAGjC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledSearchInput } from '../SearchInput';\nimport MenuButton from '../MenuButton';\nimport { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { StyledButton } from '../Button';\n\nexport const StyledSearchForm = styled.div`\n ${StyledSearchInput} {\n flex-grow: 1;\n max-width: min(100%, 40ch);\n }\n`;\n\nexport const StyledViewSelector = styled(MenuButton)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n ${StyledText} {\n font-size: ${fontSizes[theme.components.text.h3['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h3['font-weight']};\n }\n `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n`;\n"]}
1	+ {"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,iBAAiB;;;;CAIpB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACvF,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACtC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3D,OAAO,GAAG,CAAA;;;MAGN,UAAU;mBACG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;qBACvC,YAAY;;uBAEV,aAAa;;;;MAI9B,UAAU;iBACC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM;;;eAGpC,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;IACvC,YAAY,MAAM,YAAY;;;CAGjC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACtC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3D,OAAO,GAAG,CAAA;mBACO,YAAY;;qBAEV,aAAa;;;iBAGjB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;;;eAG9B,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledSearchInput } from '../SearchInput';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { StyledButton } from '../Button';\n\nexport const StyledSearchForm = styled.div`\n ${StyledSearchInput} {\n flex-grow: 1;\n max-width: min(100%, 40ch);\n }\n`;\n\nexport const StyledViewSelector = styled(MenuButton)(({ theme, required }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const { urgent } = theme.base.palette;\n const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n return css`\n flex-shrink: initial;\n white-space: initial;\n ${StyledText} {\n font-size: ${fontSizes[theme.components.text.h3['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h3['font-weight']};\n line-height: ${hitAreaMouse};\n @media (pointer: coarse) {\n line-height: ${hitAreaFinger};\n }\n }\n\n ${StyledText}::after {\n display: ${required ? 'inline-block' : 'none'};\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n`;\n\nexport const StyledHeadingText = styled(Text)(({ theme, required }) => {\n const { urgent } = theme.base.palette;\n const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n return css`\n line-height: ${hitAreaMouse};\n @media (pointer: coarse) {\n line-height: ${hitAreaFinger};\n }\n &::after {\n display: ${required ? 'inline' : 'none'};\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledHeadingText.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ListToolbar/ListToolbar.types.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { MouseEvent, Ref, ComponentType, ReactNode } from 'react';
+import { FormControlProps } from '@pega/cosmos-react-core/lib/components/FormControl';
 import { SearchInputProps } from '../SearchInput';
 import { MenuProps } from '../Menu';
 import { Action, BaseProps } from '../../types';
@@ -11,6 +12,8 @@ export interface ViewSelectorProps {
     }[];
     /** Called when a view is selected. */
     onViewSelect: MenuProps['onItemClick'];
+    defaultId?: string;
+    appDefaultId?: string;
 }
 export interface QueryOption {
     /** A count representing the number of applied conditions within the query option. */
@@ -48,6 +51,7 @@ export declare type QueryOptionId = 'filter' | 'sort' | 'group';
 export interface ListToolbarProps extends BaseProps {
     /** Renders a simple heading or view selection menu. */
     heading?: string | ViewSelectorProps;
+    formControlProps?: Pick<FormControlProps, 'required'>;
     /** Props related to new item creation button. */
     createNew?: {
         /** Label of the new item creation button. */

package/lib/components/ListToolbar/ListToolbar.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,KAAK,EAAE;~~QAAE~~,EAAE,EAAE,MAAM,CAAC;~~QAAC~~,IAAI,EAAE,MAAM,CAAC;~~QAAC~~,QAAQ,EAAE,OAAO,~~CAAA~~;~~KAAE~~,EAAE,CAAC;~~IACzD~~,sCAAsC;IACtC,YAAY,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;~~CACxC~~;AACD,MAAM,WAAW,WAAW;IAC1B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,4EAA4E;IAC5E,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,+CAA+C;AAC/C,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,qEAAqE;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC5C,yBAAyB;IACzB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACxE,6EAA6E;IAC7E,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACvC;AACD,oBAAY,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC;IACrC,iDAAiD;IACjD,SAAS,CAAC,EAAE;QACV,6CAA6C;QAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8FAA8F;QAC9F,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;KAClC,CAAC;IACF,yCAAyC;IACzC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,uGAAuG;IACvG,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;;WAGG;QACH,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IAClD,yDAAyD;IACzD,IAAI,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IAChD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IACjD,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC1C,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
1	+ {"version":3,"file":"ListToolbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"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"}

package/lib/components/ListToolbar/ListToolbar.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.types.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, Ref, ComponentType, ReactNode } from 'react';\n\nimport { SearchInputProps } from '../SearchInput';\nimport { MenuProps } from '../Menu';\nimport { Action, BaseProps } from '../../types';\n\nexport interface ViewSelectorProps {\n /** A list of pre-defined data views. /\n views: { id: string; text: string; selected: boolean }[];\n /* Called when a view is selected. /\n onViewSelect: MenuProps['onItemClick'];\n}\nexport interface QueryOption {\n /* A count representing the number of applied conditions within the query option. /\n count?: number;\n}\n\nexport interface QueryOptionDialogProps extends QueryOption {\n /* A component to render the content portion of the query option dialog. /\n renderer: ComponentType;\n /\n Called when the user explicitly or implicitly cancels(closes) the query dialog.\n * Returning false will block the dialog from closing.\n /\n onCancel: () => boolean \| void;\n /\n Called when the user explicitly applies the query option conditions.\n * Returning false will block the dialog from closing.\n /\n onSubmit: () => boolean \| void;\n}\n\n/* Optionally provide query option presets. /\nexport interface PresetMenuProps extends QueryOption {\n /* Mode defining whether menu selection is single or multi mode. /\n mode?: Exclude<MenuProps['mode'], 'action'>;\n /* Items of the menu. /\n items: { id: string; text: string; selected: boolean; icon?: string }[];\n /* Callback invoked on item selection. Passes the item id as an argument. /\n onItemClick: MenuProps['onItemClick'];\n}\nexport type QueryOptionId = 'filter' \| 'sort' \| 'group';\n\nexport interface ListToolbarProps extends BaseProps {\n /* Renders a simple heading or view selection menu. /\n heading?: string \| ViewSelectorProps;\n /* Props related to new item creation button. /\n createNew?: {\n /* Label of the new item creation button. /\n label?: string;\n /* Callback that will render a Create new button and is fired when that button is clicked. /\n onClick: (e: MouseEvent) => void;\n };\n /* Props related to the Search Input. /\n search?: SearchInputProps;\n /* Total returned results related for a given search. Optional indication of a selected item count. /\n count?: {\n total?: number;\n /\n If true renders + next to total number.\n * @default false\n /\n totalHasMore?: boolean;\n selected?: number;\n };\n /* Additional actions region /\n additionalActions?: ReactNode;\n /* Custom Rendering or available presets for filtering. /\n filter?: QueryOptionDialogProps \| PresetMenuProps;\n /* Custom Rendering or available presets for sorting. /\n sort?: QueryOptionDialogProps \| PresetMenuProps;\n /* Custom Rendering or available presets for grouping. /\n group?: QueryOptionDialogProps \| PresetMenuProps;\n /* Top level dataset actions. /\n actions?: Action[];\n /* Ref for the actions button element. /\n actionsButtonRef?: Ref<HTMLButtonElement>;\n /* Renders toolbar in condensed mode. /\n condensed?: boolean;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
1	+ {"version":3,"file":"ListToolbar.types.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, Ref, ComponentType, ReactNode } from 'react';\n\nimport { FormControlProps } from '@pega/cosmos-react-core/lib/components/FormControl';\n\nimport { SearchInputProps } from '../SearchInput';\nimport { MenuProps } from '../Menu';\nimport { Action, BaseProps } from '../../types';\n\nexport interface ViewSelectorProps {\n /** A list of pre-defined data views. /\n views: {\n id: string;\n text: string;\n selected: boolean;\n }[];\n /* Called when a view is selected. /\n onViewSelect: MenuProps['onItemClick'];\n defaultId?: string;\n appDefaultId?: string;\n}\nexport interface QueryOption {\n /* A count representing the number of applied conditions within the query option. /\n count?: number;\n}\n\nexport interface QueryOptionDialogProps extends QueryOption {\n /* A component to render the content portion of the query option dialog. /\n renderer: ComponentType;\n /\n Called when the user explicitly or implicitly cancels(closes) the query dialog.\n * Returning false will block the dialog from closing.\n /\n onCancel: () => boolean \| void;\n /\n Called when the user explicitly applies the query option conditions.\n * Returning false will block the dialog from closing.\n /\n onSubmit: () => boolean \| void;\n}\n\n/* Optionally provide query option presets. /\nexport interface PresetMenuProps extends QueryOption {\n /* Mode defining whether menu selection is single or multi mode. /\n mode?: Exclude<MenuProps['mode'], 'action'>;\n /* Items of the menu. /\n items: { id: string; text: string; selected: boolean; icon?: string }[];\n /* Callback invoked on item selection. Passes the item id as an argument. /\n onItemClick: MenuProps['onItemClick'];\n}\nexport type QueryOptionId = 'filter' \| 'sort' \| 'group';\n\nexport interface ListToolbarProps extends BaseProps {\n /* Renders a simple heading or view selection menu. /\n heading?: string \| ViewSelectorProps;\n formControlProps?: Pick<FormControlProps, 'required'>;\n /* Props related to new item creation button. /\n createNew?: {\n /* Label of the new item creation button. /\n label?: string;\n /* Callback that will render a Create new button and is fired when that button is clicked. /\n onClick: (e: MouseEvent) => void;\n };\n /* Props related to the Search Input. /\n search?: SearchInputProps;\n /* Total returned results related for a given search. Optional indication of a selected item count. /\n count?: {\n total?: number;\n /\n If true renders + next to total number.\n * @default false\n /\n totalHasMore?: boolean;\n selected?: number;\n };\n /* Additional actions region /\n additionalActions?: ReactNode;\n /* Custom Rendering or available presets for filtering. /\n filter?: QueryOptionDialogProps \| PresetMenuProps;\n /* Custom Rendering or available presets for sorting. /\n sort?: QueryOptionDialogProps \| PresetMenuProps;\n /* Custom Rendering or available presets for grouping. /\n group?: QueryOptionDialogProps \| PresetMenuProps;\n /* Top level dataset actions. /\n actions?: Action[];\n /* Ref for the actions button element. /\n actionsButtonRef?: Ref<HTMLButtonElement>;\n /* Renders toolbar in condensed mode. /\n condensed?: boolean;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Menu/MenuItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAe3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAmDxE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,~~CA6P7D~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAe3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAmDxE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA2P7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Menu/MenuItem.js CHANGED Viewed

@@ -56,11 +56,9 @@ const MenuItem = ({ id, primary, secondary, ancestors, visual, count, items, sel
     let accentedPrimary;
     if (accent && !items) {
         const accentRegex = typeof accent === 'function' ? accent(primary) : accent;
-        const accentedArr = replaceMatchWithElement(primary, accentRegex, str => {
+        accentedPrimary = replaceMatchWithElement(primary, accentRegex, str => {
             return _jsx(Mark, { children: str });
         });
-        if (accentedArr.length > 1)
-            accentedPrimary = accentedArr;
     }
     const secondaryContent = ancestors ? (_jsx(AncestorPath, { ancestors: ancestors })) : (secondary && _jsx(MetaList, { items: secondary, id: secondaryId, wrapItems: false }));
     const [summaryItemRef, setSummaryItemRef] = useElement();

package/lib/components/Menu/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Fragment,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useMemo\n} from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { replaceMatchWithElement } from '../../utils';\nimport { useElement, useI18n, usePrevious, useDirection } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Mark from '../Mark';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport {\n StyledAncestors,\n StyledExpandButton,\n StyledItemLabel,\n StyledMenuItem,\n StyledVisibilityHidden\n} from './Menu.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={label}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n radioName,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n const previouslySelected = usePrevious(selected);\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n const selectableParent = isParentItem && typeof selected === 'boolean';\n const inputRef = useRef<HTMLInputElement>(null);\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n const { end } = useDirection();\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail !== 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n },\n [onExpand, id]\n );\n\n const navigationInteractionId = `${id}-description`;\n const secondaryId = `${id}-secondary`;\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n const accentedArr = replaceMatchWithElement(primary, accentRegex, str => {\n return <Mark>{str}</Mark>;\n });\n\n if (accentedArr.length > 1) accentedPrimary = accentedArr;\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} wrapItems={false} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary \|\| (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n (items && !selectableParent) \|\| count ? (\n <Flex container={{ gap: 1 }}>\n <Count>{count ?? null}</Count>\n {items && !selectableParent && <Icon name={`caret-${end}`} />}\n </Flex>\n ) : undefined\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n let InteractiveWrap;\n if (href) {\n InteractiveWrap = href ? 'a' : BareButton;\n } else if (mode === 'action' \|\| items) {\n InteractiveWrap = BareButton;\n }\n\n const itemChild = InteractiveWrap ? (\n <InteractiveWrap\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={items ? expandHandler : clickHandler}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n tabIndex='-1'\n disabled={disabled}\n >\n {summaryItem}\n </InteractiveWrap>\n ) : (\n summaryItem\n );\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!partial;\n }\n }, [partial]);\n\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const itemLabel = useMemo(() => {\n const label = selected ? t('checked_noun', [primary]) : primary;\n\n return isParentItem ? t('expand_noun', [label]) : label;\n }, [selected, primary, isParentItem]);\n\n const describedBy = useMemo(() => {\n const hasItems = !!items;\n const hasSecondary = !!secondary;\n let idString = hasSecondary ? secondaryId : undefined;\n\n if (hasItems) {\n if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n else idString = navigationInteractionId;\n }\n\n return idString;\n }, [items, secondary, navigationInteractionId, secondaryId]);\n\n const navigationInstructions = useMemo(() => {\n if (arrowNavigationUnsupported) {\n return t('menu_item_shift_space_expand_collapse');\n }\n\n return t('menu_item_expand_arrow');\n }, []);\n\n const interactionNotification = useMemo(() => {\n if (previouslySelected === undefined) return '';\n\n return `${selected ? t('selected_noun', [primary]) : t('deselected_noun', [primary])}`;\n }, [selected]);\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'stretch', justify: 'between' }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={describedBy}\n isParentItem={isParentItem}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex='-1'\n >\n {selectionMode && typeof selected === 'boolean' ? (\n <>\n <Flex\n ref={labelRef}\n as={StyledItemLabel}\n container={{ alignItems: 'center', gap: 1 }}\n item={{ grow: 1 }}\n onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n e.preventDefault();\n }}\n // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n onClick={(e: MouseEvent<HTMLLabelElement>) => {\n if (labelRef.current?.control !== e.target) {\n e.preventDefault();\n\n // Preserve detail property (lost with .click()).\n const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n labelRef.current?.control?.dispatchEvent(event);\n }\n }}\n >\n <input\n ref={inputRef}\n type={mode === 'single-select' ? 'radio' : 'checkbox'}\n name={mode === 'single-select' ? radioName : undefined}\n aria-label={primary}\n checked={!!selected}\n disabled={disabled}\n onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (mode === 'single-select' && e.key === 'Enter') {\n e.currentTarget.click();\n }\n }}\n // no-op since React will complain about a controlled input without an onChange\n onChange={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n tabIndex={-1}\n />\n {(mode === 'single-select' \|\| mode === 'multi-select') && <Icon name='check' />}\n {summaryItem}\n </Flex>\n\n {isParentItem && (\n <StyledExpandButton icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n <Icon name={`caret-${end}`} />\n </StyledExpandButton>\n )}\n </>\n ) : (\n itemChild\n )}\n\n {!!items && (\n <StyledVisibilityHidden id={navigationInteractionId}>\n {navigationInstructions}\n </StyledVisibilityHidden>\n )}\n\n <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}
1	+ {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Fragment,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useMemo\n} from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { replaceMatchWithElement } from '../../utils';\nimport { useElement, useI18n, usePrevious, useDirection } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Mark from '../Mark';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport {\n StyledAncestors,\n StyledExpandButton,\n StyledItemLabel,\n StyledMenuItem,\n StyledVisibilityHidden\n} from './Menu.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={label}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n radioName,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n const previouslySelected = usePrevious(selected);\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n const selectableParent = isParentItem && typeof selected === 'boolean';\n const inputRef = useRef<HTMLInputElement>(null);\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n const { end } = useDirection();\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail !== 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n },\n [onExpand, id]\n );\n\n const navigationInteractionId = `${id}-description`;\n const secondaryId = `${id}-secondary`;\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n accentedPrimary = replaceMatchWithElement(primary, accentRegex, str => {\n return <Mark>{str}</Mark>;\n });\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} wrapItems={false} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary \|\| (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n (items && !selectableParent) \|\| count ? (\n <Flex container={{ gap: 1 }}>\n <Count>{count ?? null}</Count>\n {items && !selectableParent && <Icon name={`caret-${end}`} />}\n </Flex>\n ) : undefined\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n let InteractiveWrap;\n if (href) {\n InteractiveWrap = href ? 'a' : BareButton;\n } else if (mode === 'action' \|\| items) {\n InteractiveWrap = BareButton;\n }\n\n const itemChild = InteractiveWrap ? (\n <InteractiveWrap\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={items ? expandHandler : clickHandler}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n tabIndex='-1'\n disabled={disabled}\n >\n {summaryItem}\n </InteractiveWrap>\n ) : (\n summaryItem\n );\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!partial;\n }\n }, [partial]);\n\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const itemLabel = useMemo(() => {\n const label = selected ? t('checked_noun', [primary]) : primary;\n\n return isParentItem ? t('expand_noun', [label]) : label;\n }, [selected, primary, isParentItem]);\n\n const describedBy = useMemo(() => {\n const hasItems = !!items;\n const hasSecondary = !!secondary;\n let idString = hasSecondary ? secondaryId : undefined;\n\n if (hasItems) {\n if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n else idString = navigationInteractionId;\n }\n\n return idString;\n }, [items, secondary, navigationInteractionId, secondaryId]);\n\n const navigationInstructions = useMemo(() => {\n if (arrowNavigationUnsupported) {\n return t('menu_item_shift_space_expand_collapse');\n }\n\n return t('menu_item_expand_arrow');\n }, []);\n\n const interactionNotification = useMemo(() => {\n if (previouslySelected === undefined) return '';\n\n return `${selected ? t('selected_noun', [primary]) : t('deselected_noun', [primary])}`;\n }, [selected]);\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'stretch', justify: 'between' }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={describedBy}\n isParentItem={isParentItem}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex='-1'\n >\n {selectionMode && typeof selected === 'boolean' ? (\n <>\n <Flex\n ref={labelRef}\n as={StyledItemLabel}\n container={{ alignItems: 'center', gap: 1 }}\n item={{ grow: 1 }}\n onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n e.preventDefault();\n }}\n // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n onClick={(e: MouseEvent<HTMLLabelElement>) => {\n if (labelRef.current?.control !== e.target) {\n e.preventDefault();\n\n // Preserve detail property (lost with .click()).\n const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n labelRef.current?.control?.dispatchEvent(event);\n }\n }}\n >\n <input\n ref={inputRef}\n type={mode === 'single-select' ? 'radio' : 'checkbox'}\n name={mode === 'single-select' ? radioName : undefined}\n aria-label={primary}\n checked={!!selected}\n disabled={disabled}\n onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (mode === 'single-select' && e.key === 'Enter') {\n e.currentTarget.click();\n }\n }}\n // no-op since React will complain about a controlled input without an onChange\n onChange={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n tabIndex={-1}\n />\n {(mode === 'single-select' \|\| mode === 'multi-select') && <Icon name='check' />}\n {summaryItem}\n </Flex>\n\n {isParentItem && (\n <StyledExpandButton icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n <Icon name={`caret-${end}`} />\n </StyledExpandButton>\n )}\n </>\n ) : (\n itemChild\n )}\n\n {!!items && (\n <StyledVisibilityHidden id={navigationInteractionId}>\n {navigationInstructions}\n </StyledVisibilityHidden>\n )}\n\n <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}

package/lib/components/Menu/NavItemsList.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-export declare const resizeRootEl: (ele: HTMLFieldSetElement, rootEle: HTMLElement, itemCount: number, scrollAt: number) => void;
+export declare const resizeRootEl: (el: HTMLFieldSetElement, rootEl: HTMLElement, itemCount: number, scrollAt: number) => void;
 declare const _default: {
-    resizeRootEl: (ele: HTMLFieldSetElement, rootEle: HTMLElement, itemCount: number, scrollAt: number) => void;
+    resizeRootEl: (el: HTMLFieldSetElement, rootEl: HTMLElement, itemCount: number, scrollAt: number) => void;
 };
 export default _default;
 //# sourceMappingURL=NavItemsList.d.ts.map

package/lib/components/Menu/NavItemsList.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavItemsList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/NavItemsList.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,~~QAClB~~,mBAAmB,~~WACf~~,WAAW,~~aACT~~,MAAM,YACP,MAAM,SA6BjB,CAAC;;;;AAEF,wBAAgC"}
1	+ {"version":3,"file":"NavItemsList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/NavItemsList.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,OACnB,mBAAmB,UACf,WAAW,aACR,MAAM,YACP,MAAM,SA6BjB,CAAC;;;;AAEF,wBAAgC"}

package/lib/components/Menu/NavItemsList.js CHANGED Viewed

@@ -1,16 +1,16 @@
-export const resizeRootEl = (ele, rootEle, itemCount, scrollAt) => {
-    const hasLegend = !!ele.firstElementChild?.matches('legend');
+export const resizeRootEl = (el, rootEl, itemCount, scrollAt) => {
+    const hasLegend = !!el.firstElementChild?.matches('legend');
     const selectors = [
-        'ul > li:not([role="separator"]):not([role="presentation"])',
-        'ul > li[role="presentation"] > div:first-child',
-        'ul > li > ul[role="group"] > li:not([role="separator"])'
+        ':scope > ul > li:not([role="separator"]):not([role="presentation"])',
+        ':scope > ul > li[role="presentation"] > div:first-child',
+        ':scope > ul > li > ul[role="group"] > li:not([role="separator"])'
     ];
-    const lastVisibleLI = ele.querySelectorAll(selectors.join(', '))[Math.max(Math.min(scrollAt - (hasLegend ? 2 : 1), itemCount - 1), 0)];
+    const lastVisibleLI = el.querySelectorAll(selectors.join(', '))[Math.max(Math.min(scrollAt - (hasLegend ? 2 : 1), itemCount - 1), 0)];
     let menuRootElHeight;
     if (lastVisibleLI) {
-        const containerTop = ele.getBoundingClientRect().top;
+        const containerTop = el.getBoundingClientRect().top;
         const lastVisibleLIRect = lastVisibleLI.getBoundingClientRect();
-        const ulScrollTop = ele.querySelector(':scope > ul')?.scrollTop ?? 0;
+        const ulScrollTop = el.querySelector(':scope > ul')?.scrollTop ?? 0;
         let btm = lastVisibleLIRect.bottom;
         if (itemCount > scrollAt) {
             btm = (lastVisibleLIRect.top + lastVisibleLIRect.bottom) / 2;
@@ -18,7 +18,7 @@ export const resizeRootEl = (ele, rootEle, itemCount, scrollAt) => {
         menuRootElHeight = btm - containerTop + ulScrollTop;
     }
     requestAnimationFrame(() => {
-        rootEle.style.height = menuRootElHeight ? `${menuRootElHeight}px` : '';
+        rootEl.style.height = menuRootElHeight ? `${menuRootElHeight}px` : '';
     });
 };
 export default { resizeRootEl };

package/lib/components/Menu/NavItemsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavItemsList.js","sourceRoot":"","sources":["../../../src/components/Menu/NavItemsList.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,~~GAAwB~~,~~EACxB~~,~~OAAoB~~,~~EACpB~~,SAAiB,EACjB,QAAgB,EAChB,EAAE;IACF,MAAM,SAAS,GAAG,CAAC,CAAC,~~GAAG~~,CAAC,iBAAiB,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;~~IAC7D~~,MAAM,SAAS,GAAG;QAChB,~~4DAA4D~~;~~QAC5D~~,~~gDAAgD~~;~~QAChD~~,~~yDAAyD~~;~~KAC1D~~,CAAC;IACF,MAAM,aAAa,GAAG,~~GAAG~~,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,~~CAC9D~~,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CACrE,CAAC;IAEF,IAAI,gBAAoC,CAAC;IACzC,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,~~GAAG~~,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;~~QACrD~~,MAAM,iBAAiB,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;QAChE,MAAM,WAAW,GAAG,~~GAAG~~,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC;~~QAErE~~,IAAI,GAAG,GAAG,iBAAiB,CAAC,MAAM,CAAC;QACnC,IAAI,SAAS,GAAG,QAAQ,EAAE;YACxB,GAAG,GAAG,CAAC,iBAAiB,CAAC,GAAG,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAC9D;QAED,gBAAgB,GAAG,GAAG,GAAG,YAAY,GAAG,WAAW,CAAC;KACrD;IAED,qBAAqB,CAAC,GAAG,EAAE;QACzB,~~OAAO~~,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;~~IACzE~~,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,EAAE,YAAY,EAAE,CAAC","sourcesContent":["export const resizeRootEl = (\n ~~ele~~: HTMLFieldSetElement,\n ~~rootEle~~: HTMLElement,\n itemCount: number,\n scrollAt: number\n) => {\n const hasLegend = !!~~ele~~.firstElementChild?.matches('legend');\n const selectors = [\n 'ul > li:not([role=\"separator\"]):not([role=\"presentation\"])',\n 'ul > li[role=\"presentation\"] > div:first-child',\n 'ul > li > ul[role=\"group\"] > li:not([role=\"separator\"])'\n ];\n const lastVisibleLI = ~~ele~~.querySelectorAll(selectors.join(', '))[\n Math.max(Math.min(scrollAt - (hasLegend ? 2 : 1), itemCount - 1), 0)\n ];\n\n let menuRootElHeight: number \| undefined;\n if (lastVisibleLI) {\n const containerTop = ~~ele~~.getBoundingClientRect().top;\n const lastVisibleLIRect = lastVisibleLI.getBoundingClientRect();\n const ulScrollTop = ~~ele~~.querySelector(':scope > ul')?.scrollTop ?? 0;\n\n let btm = lastVisibleLIRect.bottom;\n if (itemCount > scrollAt) {\n btm = (lastVisibleLIRect.top + lastVisibleLIRect.bottom) / 2;\n }\n\n menuRootElHeight = btm - containerTop + ulScrollTop;\n }\n\n requestAnimationFrame(() => {\n ~~rootEle~~.style.height = menuRootElHeight ? `${menuRootElHeight}px` : '';\n });\n};\n\nexport default { resizeRootEl };\n"]}
1	+ {"version":3,"file":"NavItemsList.js","sourceRoot":"","sources":["../../../src/components/Menu/NavItemsList.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,EAAuB,EACvB,MAAmB,EACnB,SAAiB,EACjB,QAAgB,EAChB,EAAE;IACF,MAAM,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG;QAChB,qEAAqE;QACrE,yDAAyD;QACzD,kEAAkE;KACnE,CAAC;IACF,MAAM,aAAa,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAC7D,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CACrE,CAAC;IAEF,IAAI,gBAAoC,CAAC;IACzC,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACpD,MAAM,iBAAiB,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;QAChE,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC;QAEpE,IAAI,GAAG,GAAG,iBAAiB,CAAC,MAAM,CAAC;QACnC,IAAI,SAAS,GAAG,QAAQ,EAAE;YACxB,GAAG,GAAG,CAAC,iBAAiB,CAAC,GAAG,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAC9D;QAED,gBAAgB,GAAG,GAAG,GAAG,YAAY,GAAG,WAAW,CAAC;KACrD;IAED,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IACxE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,EAAE,YAAY,EAAE,CAAC","sourcesContent":["export const resizeRootEl = (\n el: HTMLFieldSetElement,\n rootEl: HTMLElement,\n itemCount: number,\n scrollAt: number\n) => {\n const hasLegend = !!el.firstElementChild?.matches('legend');\n const selectors = [\n ':scope > ul > li:not([role=\"separator\"]):not([role=\"presentation\"])',\n ':scope > ul > li[role=\"presentation\"] > div:first-child',\n ':scope > ul > li > ul[role=\"group\"] > li:not([role=\"separator\"])'\n ];\n const lastVisibleLI = el.querySelectorAll(selectors.join(', '))[\n Math.max(Math.min(scrollAt - (hasLegend ? 2 : 1), itemCount - 1), 0)\n ];\n\n let menuRootElHeight: number \| undefined;\n if (lastVisibleLI) {\n const containerTop = el.getBoundingClientRect().top;\n const lastVisibleLIRect = lastVisibleLI.getBoundingClientRect();\n const ulScrollTop = el.querySelector(':scope > ul')?.scrollTop ?? 0;\n\n let btm = lastVisibleLIRect.bottom;\n if (itemCount > scrollAt) {\n btm = (lastVisibleLIRect.top + lastVisibleLIRect.bottom) / 2;\n }\n\n menuRootElHeight = btm - containerTop + ulScrollTop;\n }\n\n requestAnimationFrame(() => {\n rootEl.style.height = menuRootElHeight ? `${menuRootElHeight}px` : '';\n });\n};\n\nexport default { resizeRootEl };\n"]}

package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,kBAAkB,~~8TAa9B~~,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAsBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,iMAe7B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA6Ed,CAAC"}
1	+ {"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,kBAAkB,8TAc9B,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAsBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,iMAe7B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA6Ed,CAAC"}

package/lib/components/MultiStepForm/FormProgress.styles.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { useDirection } from '../../hooks';
 export const CurrentStepPopover = styled(Popover) `
   max-width: 100%;
   background-color: transparent;
+  z-index: 0;
   ::after {
     filter: none;

package/lib/components/MultiStepForm/FormProgress.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA~~;;;;;;;;QAQzC~~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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\n\nimport { type Step } from './MultiStepForm.types';\n\nexport const CurrentStepPopover = styled(Popover)`\n max-width: 100%;\n background-color: transparent;\n\n ::after {\n filter: none;\n }\n\n & > ${StyledText} {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`;\n\nexport const StyledBar = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'border-line': borderColor }\n }\n } = theme;\n\n return css`\n position: absolute;\n width: 100%;\n height: 0.0625rem;\n background: ${borderColor};\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n const {\n base: {\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${interactive};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n transform: scaleX(var(--fillScale));\n transform-origin: ${ltr ? 0 : '100%'} 0;\n `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h4fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n current: boolean;\n depth: Step['depth'];\n prior: boolean;\n}>(({ current, depth, prior, theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;\n\n return css`\n display: block;\n position: relative;\n z-index: 1;\n ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}\n border-radius: 100%;\n background: ${primaryBackground};\n border: 0.0625rem solid ${borderColor};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n\n ${current &&\n css`\n background: ${interactive};\n border-color: ${interactive};\n `}\n\n ${prior &&\n css`\n border-color: ${interactive};\n `}\n\n ::after {\n content: '';\n position: absolute;\n top: ${depth === 1\n ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n left: ${depth === 1\n ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n ${size(buttonSize)}\n\n @media (pointer: coarse) {\n top: ${depth === 1\n ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n left: ${depth === 1\n ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n ${size(touchButtonSize)}\n }\n }\n\n &:first-child::after {\n left: 0;\n }\n\n &:last-child::after {\n left: unset;\n right: 0;\n }\n\n :focus {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\n\nimport { type Step } from './MultiStepForm.types';\n\nexport const CurrentStepPopover = styled(Popover)`\n max-width: 100%;\n background-color: transparent;\n z-index: 0;\n\n ::after {\n filter: none;\n }\n\n & > ${StyledText} {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`;\n\nexport const StyledBar = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'border-line': borderColor }\n }\n } = theme;\n\n return css`\n position: absolute;\n width: 100%;\n height: 0.0625rem;\n background: ${borderColor};\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n const {\n base: {\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${interactive};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n transform: scaleX(var(--fillScale));\n transform-origin: ${ltr ? 0 : '100%'} 0;\n `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h4fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n current: boolean;\n depth: Step['depth'];\n prior: boolean;\n}>(({ current, depth, prior, theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;\n\n return css`\n display: block;\n position: relative;\n z-index: 1;\n ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}\n border-radius: 100%;\n background: ${primaryBackground};\n border: 0.0625rem solid ${borderColor};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n\n ${current &&\n css`\n background: ${interactive};\n border-color: ${interactive};\n `}\n\n ${prior &&\n css`\n border-color: ${interactive};\n `}\n\n ::after {\n content: '';\n position: absolute;\n top: ${depth === 1\n ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n left: ${depth === 1\n ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n ${size(buttonSize)}\n\n @media (pointer: coarse) {\n top: ${depth === 1\n ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n left: ${depth === 1\n ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n ${size(touchButtonSize)}\n }\n }\n\n &:first-child::after {\n left: 0;\n }\n\n &:last-child::after {\n left: unset;\n right: 0;\n }\n\n :focus {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n"]}

package/lib/components/SearchInput/SearchInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkB1C,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CA+NnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkB1C,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAuPnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SearchInput/SearchInput.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
 import Icon, { registerIcon } from '../Icon';
 import * as searchIcon from '../Icon/icons/search.icon';
-import { useConsolidatedRef, useI18n, useOuterEvent } from '../../hooks';
+import { useConsolidatedRef, useEscape, useI18n, useOuterEvent } from '../../hooks';
 import Flex from '../Flex';
 import Popover from '../Popover';
 import { sameWidth } from '../Popover/modifiers';
@@ -27,6 +27,15 @@ const SearchInput = forwardRef((props, ref) => {
     const hasSearchResults = !!(searchResults && searchResults.length);
     const hasRecentSearches = !!(recentSearches && recentSearches.length);
     const [searchResultItems, setSearchResultItems] = useState(undefined);
+    useEscape(e => {
+        e.preventDefault();
+        if (searchMenuOpen) {
+            setSearchMenuOpen(false);
+        }
+        if (filterMenuOpen) {
+            setFilterMenuOpen(false);
+        }
+    });
     const onKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
             onSearchSubmit?.(value);
@@ -58,6 +67,7 @@ const SearchInput = forwardRef((props, ref) => {
         setSearchResultItems(items);
     }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);
     const searchMenu = (_jsx(Menu, { as: StyledSearchMenu, header: recentSearches && !value ? (_jsx(Text, { variant: 'secondary', children: t('recent_searches') })) : undefined, mode: 'action', items: searchResultItems ?? [], loading: hasRecentSearches && !value ? false : loading, footer: advancedSearchLink ? (_jsx(Link, { ...advancedSearchLink, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined, focusControlEl: (downPressed && inputRef.current) || undefined, focusElOnClose: true }));
+    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loading);
     return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, children: [_jsxs(Flex, { as: StyledSearchButton, ref: filterRef, forwardedAs: hasFilters ? undefined : 'div', container: {
                             justify: 'center',
                             alignItems: 'center',
@@ -71,14 +81,23 @@ const SearchInput = forwardRef((props, ref) => {
                             }
                         }, onBlur: () => {
                             setFilterMenuOpen(false);
-                        }, decoupled: hasFilters, "aria-label": hasFilters ? t('select_search_filter') : undefined, children: [_jsx(Icon, { name: 'search' }), selectedFilter && _jsx(StyledSearchFilterText, { children: selectedFilter }), hasFilters && _jsx(Icon, { name: 'arrow-micro-down' })] }), _jsx(StyledSearchTextInput, { ref: inputRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: value, onChange: (e) => onSearchChange?.(e.target.value), onKeyDown: onKeyDown, onFocus: () => setSearchMenuOpen(true), decoupled: hasFilters, onBlur: () => {
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'ArrowDown') {
+                                setFilterMenuOpen(true);
+                            }
+                        }, decoupled: hasFilters, "aria-label": hasFilters ? t('select_search_filter') : undefined, children: [_jsx(Icon, { name: 'search' }), selectedFilter && _jsx(StyledSearchFilterText, { children: selectedFilter }), hasFilters && _jsx(Icon, { name: 'arrow-micro-down' })] }), _jsx(StyledSearchTextInput, { ref: inputRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: value, onChange: (e) => {
+                            onSearchChange?.(e.target.value);
+                            if (e.target.value)
+                                setSearchMenuOpen(true);
+                        }, onKeyDown: onKeyDown, onFocus: () => setSearchMenuOpen(true), decoupled: hasFilters, onBlur: () => {
                             setDownPressed(false);
                             if (!advancedSearchLink) {
                                 setSearchMenuOpen(false);
                             }
-                        } }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
+                        }, autoComplete: 'off' }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
                             onSearchChange?.('');
-                        }, variant: 'text', tabIndex: -1, children: _jsx(Icon, { name: 'times' }) }))] }), resultsPopover && (searchResultItems || loading) && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
+                            inputRef.current?.focus();
+                        }, variant: 'text', tabIndex: -1, children: _jsx(Icon, { name: 'times' }) }))] }), resultsPopover && showSearchMenu && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         options: {
@@ -88,7 +107,7 @@ const SearchInput = forwardRef((props, ref) => {
                     sameWidth
                 ], onBlur: () => {
                     setSearchMenuOpen(false);
-                }, ref: searchResultsRef, children: searchMenu })), !resultsPopover && (searchResultItems || loading) && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), hasFilters ? (_jsx(Popover, { as: StyledFiltersPopover, target: filterRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
+                }, ref: searchResultsRef, children: searchMenu })), !resultsPopover && showSearchMenu && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), hasFilters ? (_jsx(Popover, { as: StyledFiltersPopover, target: filterRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         options: {
@@ -109,7 +128,8 @@ const SearchInput = forwardRef((props, ref) => {
                     })), onItemClick: filter => {
                         setSelectedFilter(filter === t('all') ? '' : filter);
                         onFilterChange?.(filter);
-                    }, focusControlEl: filterRef.current ?? undefined }) })) : undefined] }));
+                        inputRef.current?.focus();
+                    }, focusControlEl: filterRef.current ?? undefined, focusElOnClose: false }) })) : undefined] }));
 });
 export default SearchInput;
 //# sourceMappingURL=SearchInput.js.map

package/lib/components/SearchInput/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n forwardRef,\n useState,\n ChangeEvent,\n useCallback,\n KeyboardEvent,\n useEffect,\n useRef\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useOuterEvent } from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\n\nimport {\n StyledCancelButton,\n StyledFiltersPopover,\n StyledResultsPopover,\n StyledSearchButton,\n StyledSearchFilterText,\n StyledSearchInput,\n StyledSearchMenu,\n StyledSearchResultsContainer,\n StyledSearchTextInput\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' \| 'primary' \| 'secondary' \| 'href' \| 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' \| 'primary' \| 'href' \| 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n /*\n Placeholder text. The default value is a locale translation of 'Search…'\n * @default \"Search…\"\n /\n placeholder?: FormControlProps['placeholder'];\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value?: FormControlProps['value'];\n /* Called when the SearchInput value changes. /\n onSearchChange?: (value: string) => void;\n /\n Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n /\n onSearchSubmit?: (value: string) => void;\n /* A list of user selectable scopes to filter search with. /\n filters?: string[];\n /* The selected scope filter on initial render. /\n defaultFilter?: string;\n /* Called when user changes scope filter. /\n onFilterChange?: (value: string) => void;\n /* A list of matching results presented in the input's dropdown menu. /\n searchResults?: SearchResult[];\n /* A list of recent searches presented in the input's dropdown menu. /\n recentSearches?: RecentSearch[];\n /* Places the menu into an indeterminate loading state. /\n loading?: boolean;\n /* Prop passed to the advanced search page link. /\n advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n /* Aria label for search input, used by screen readers. /\n searchInputAriaLabel?: string;\n /\n Boolean for determining for whether the search results will render in a popover.\n * @default true\n */\n resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n const t = useI18n();\n\n const {\n value = '',\n defaultFilter,\n filters,\n onFilterChange,\n searchResults,\n recentSearches,\n loading,\n advancedSearchLink,\n placeholder = t('search_placeholder_default'),\n onSearchChange,\n onSearchSubmit,\n searchInputAriaLabel,\n resultsPopover = true,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef(ref);\n const filterRef = useRef<HTMLButtonElement \| HTMLDivElement>(null);\n const searchResultsRef = useRef<HTMLDivElement>(null);\n\n const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n\n const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n const completeFilters = [t('all'), ...(filters ?? [])];\n const hasFilters = completeFilters.length > 1;\n const [downPressed, setDownPressed] = useState(false);\n const hasSearchResults = !!(searchResults && searchResults.length);\n const hasRecentSearches = !!(recentSearches && recentSearches.length);\n\n const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] \| undefined>(\n undefined\n );\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearchSubmit?.(value);\n }\n if (e.key === 'ArrowDown') {\n setDownPressed(true);\n }\n },\n [onSearchSubmit, value]\n );\n\n useOuterEvent('click', [filterRef], () => {\n setFilterMenuOpen(false);\n });\n\n useOuterEvent('click', [searchResultsRef, inputRef], () => {\n setSearchMenuOpen(false);\n });\n\n useEffect(() => {\n setDownPressed(false);\n }, [value]);\n\n useEffect(() => {\n let items: MenuItemProps[] \| undefined = [];\n if (hasSearchResults && value) {\n items = searchResults;\n } else if (hasRecentSearches && !value) {\n items = recentSearches;\n } else if (!searchResults && (!recentSearches \|\| recentSearches.length === 0)) {\n items = undefined;\n }\n setSearchResultItems(items);\n }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n const searchMenu = (\n <Menu\n as={StyledSearchMenu}\n header={\n recentSearches && !value ? (\n <Text variant='secondary'>{t('recent_searches')}</Text>\n ) : undefined\n }\n mode='action'\n items={searchResultItems ?? []}\n loading={hasRecentSearches && !value ? false : loading}\n footer={\n advancedSearchLink ? (\n <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n ) : undefined\n }\n accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n focusControlEl={(downPressed && inputRef.current) \|\| undefined}\n focusElOnClose\n />\n );\n\n return (\n <>\n <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n <Flex\n as={StyledSearchButton}\n ref={filterRef}\n forwardedAs={hasFilters ? undefined : 'div'}\n container={{\n justify: 'center',\n alignItems: 'center',\n gap: selectedFilter ? 0.5 : undefined\n }}\n onClick={() => {\n if (hasFilters) {\n setFilterMenuOpen(true);\n } else {\n inputRef.current?.focus();\n }\n }}\n onBlur={() => {\n setFilterMenuOpen(false);\n }}\n decoupled={hasFilters}\n aria-label={hasFilters ? t('select_search_filter') : undefined}\n >\n <Icon name='search' />\n {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n {hasFilters && <Icon name='arrow-micro-down' />}\n </Flex>\n <StyledSearchTextInput\n ref={inputRef}\n type='search'\n aria-label={searchInputAriaLabel}\n placeholder={placeholder}\n {...restProps}\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}\n onKeyDown={onKeyDown}\n onFocus={() => setSearchMenuOpen(true)}\n decoupled={hasFilters}\n onBlur={() => {\n setDownPressed(false);\n if (!advancedSearchLink) {\n setSearchMenuOpen(false);\n }\n }}\n />\n {value && (\n <StyledCancelButton\n icon\n onClick={() => {\n onSearchChange?.('');\n }}\n variant='text'\n tabIndex={-1}\n >\n <Icon name='times' />\n </StyledCancelButton>\n )}\n </Flex>\n {resultsPopover && (searchResultItems \|\| loading) && (\n <Popover\n as={StyledResultsPopover}\n target={inputRef.current}\n show={searchMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n onBlur={() => {\n setSearchMenuOpen(false);\n }}\n ref={searchResultsRef}\n >\n {searchMenu}\n </Popover>\n )}\n {!resultsPopover && (searchResultItems \|\| loading) && (\n <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n )}\n {hasFilters ? (\n <Popover\n as={StyledFiltersPopover}\n target={filterRef.current}\n show={filterMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n {\n name: 'preventOverflow',\n options: {\n mainAxis: false,\n altAxis: true\n }\n }\n ]}\n >\n <Menu\n mode='single-select'\n items={completeFilters.map(filter => ({\n primary: filter,\n id: filter,\n selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter\n }))}\n onItemClick={filter => {\n setSelectedFilter(filter === t('all') ? '' : filter);\n onFilterChange?.(filter);\n }}\n focusControlEl={filterRef.current ?? undefined}\n />\n </Popover>\n ) : undefined}\n </>\n );\n }\n);\n\nexport default SearchInput;\n"]}
1	+ {"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n forwardRef,\n useState,\n ChangeEvent,\n useCallback,\n KeyboardEvent,\n useEffect,\n useRef\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent } from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\n\nimport {\n StyledCancelButton,\n StyledFiltersPopover,\n StyledResultsPopover,\n StyledSearchButton,\n StyledSearchFilterText,\n StyledSearchInput,\n StyledSearchMenu,\n StyledSearchResultsContainer,\n StyledSearchTextInput\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' \| 'primary' \| 'secondary' \| 'href' \| 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' \| 'primary' \| 'href' \| 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n /*\n Placeholder text. The default value is a locale translation of 'Search…'\n * @default \"Search…\"\n /\n placeholder?: FormControlProps['placeholder'];\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value?: FormControlProps['value'];\n /* Called when the SearchInput value changes. /\n onSearchChange?: (value: string) => void;\n /\n Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n /\n onSearchSubmit?: (value: string) => void;\n /* A list of user selectable scopes to filter search with. /\n filters?: string[];\n /* The selected scope filter on initial render. /\n defaultFilter?: string;\n /* Called when user changes scope filter. /\n onFilterChange?: (value: string) => void;\n /* A list of matching results presented in the input's dropdown menu. /\n searchResults?: SearchResult[];\n /* A list of recent searches presented in the input's dropdown menu. /\n recentSearches?: RecentSearch[];\n /* Places the menu into an indeterminate loading state. /\n loading?: boolean;\n /* Prop passed to the advanced search page link. /\n advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n /* Aria label for search input, used by screen readers. /\n searchInputAriaLabel?: string;\n /\n Boolean for determining for whether the search results will render in a popover.\n * @default true\n */\n resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n const t = useI18n();\n\n const {\n value = '',\n defaultFilter,\n filters,\n onFilterChange,\n searchResults,\n recentSearches,\n loading,\n advancedSearchLink,\n placeholder = t('search_placeholder_default'),\n onSearchChange,\n onSearchSubmit,\n searchInputAriaLabel,\n resultsPopover = true,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef(ref);\n const filterRef = useRef<HTMLButtonElement \| HTMLDivElement>(null);\n const searchResultsRef = useRef<HTMLDivElement>(null);\n\n const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n\n const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n const completeFilters = [t('all'), ...(filters ?? [])];\n const hasFilters = completeFilters.length > 1;\n const [downPressed, setDownPressed] = useState(false);\n const hasSearchResults = !!(searchResults && searchResults.length);\n const hasRecentSearches = !!(recentSearches && recentSearches.length);\n\n const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] \| undefined>(\n undefined\n );\n\n useEscape(e => {\n e.preventDefault();\n if (searchMenuOpen) {\n setSearchMenuOpen(false);\n }\n if (filterMenuOpen) {\n setFilterMenuOpen(false);\n }\n });\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearchSubmit?.(value);\n }\n if (e.key === 'ArrowDown') {\n setDownPressed(true);\n }\n },\n [onSearchSubmit, value]\n );\n\n useOuterEvent('click', [filterRef], () => {\n setFilterMenuOpen(false);\n });\n\n useOuterEvent('click', [searchResultsRef, inputRef], () => {\n setSearchMenuOpen(false);\n });\n\n useEffect(() => {\n setDownPressed(false);\n }, [value]);\n\n useEffect(() => {\n let items: MenuItemProps[] \| undefined = [];\n if (hasSearchResults && value) {\n items = searchResults;\n } else if (hasRecentSearches && !value) {\n items = recentSearches;\n } else if (!searchResults && (!recentSearches \|\| recentSearches.length === 0)) {\n items = undefined;\n }\n setSearchResultItems(items);\n }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n const searchMenu = (\n <Menu\n as={StyledSearchMenu}\n header={\n recentSearches && !value ? (\n <Text variant='secondary'>{t('recent_searches')}</Text>\n ) : undefined\n }\n mode='action'\n items={searchResultItems ?? []}\n loading={hasRecentSearches && !value ? false : loading}\n footer={\n advancedSearchLink ? (\n <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n ) : undefined\n }\n accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n focusControlEl={(downPressed && inputRef.current) \|\| undefined}\n focusElOnClose\n />\n );\n\n const showSearchMenu = (value \|\| recentSearches?.length) && (searchResultItems \|\| loading);\n\n return (\n <>\n <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n <Flex\n as={StyledSearchButton}\n ref={filterRef}\n forwardedAs={hasFilters ? undefined : 'div'}\n container={{\n justify: 'center',\n alignItems: 'center',\n gap: selectedFilter ? 0.5 : undefined\n }}\n onClick={() => {\n if (hasFilters) {\n setFilterMenuOpen(true);\n } else {\n inputRef.current?.focus();\n }\n }}\n onBlur={() => {\n setFilterMenuOpen(false);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'ArrowDown') {\n setFilterMenuOpen(true);\n }\n }}\n decoupled={hasFilters}\n aria-label={hasFilters ? t('select_search_filter') : undefined}\n >\n <Icon name='search' />\n {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n {hasFilters && <Icon name='arrow-micro-down' />}\n </Flex>\n <StyledSearchTextInput\n ref={inputRef}\n type='search'\n aria-label={searchInputAriaLabel}\n placeholder={placeholder}\n {...restProps}\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n onSearchChange?.(e.target.value);\n if (e.target.value) setSearchMenuOpen(true);\n }}\n onKeyDown={onKeyDown}\n onFocus={() => setSearchMenuOpen(true)}\n decoupled={hasFilters}\n onBlur={() => {\n setDownPressed(false);\n if (!advancedSearchLink) {\n setSearchMenuOpen(false);\n }\n }}\n autoComplete='off'\n />\n {value && (\n <StyledCancelButton\n icon\n onClick={() => {\n onSearchChange?.('');\n inputRef.current?.focus();\n }}\n variant='text'\n tabIndex={-1}\n >\n <Icon name='times' />\n </StyledCancelButton>\n )}\n </Flex>\n {resultsPopover && showSearchMenu && (\n <Popover\n as={StyledResultsPopover}\n target={inputRef.current}\n show={searchMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n onBlur={() => {\n setSearchMenuOpen(false);\n }}\n ref={searchResultsRef}\n >\n {searchMenu}\n </Popover>\n )}\n {!resultsPopover && showSearchMenu && (\n <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n )}\n {hasFilters ? (\n <Popover\n as={StyledFiltersPopover}\n target={filterRef.current}\n show={filterMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n {\n name: 'preventOverflow',\n options: {\n mainAxis: false,\n altAxis: true\n }\n }\n ]}\n >\n <Menu\n mode='single-select'\n items={completeFilters.map(filter => ({\n primary: filter,\n id: filter,\n selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter\n }))}\n onItemClick={filter => {\n setSelectedFilter(filter === t('all') ? '' : filter);\n onFilterChange?.(filter);\n inputRef.current?.focus();\n }}\n focusControlEl={filterRef.current ?? undefined}\n focusElOnClose={false}\n />\n </Popover>\n ) : undefined}\n </>\n );\n }\n);\n\nexport default SearchInput;\n"]}

package/lib/components/SkipLinks/SkipLinks.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+interface SkipLink {
+    label: string;
+    target: {
+        ariaLabel: string;
+        selector: string;
+    };
+}
+export interface SkipLinksProps {
+    items: SkipLink[];
+}
+export declare const StyledSkipLinks: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+declare const SkipLinks: FC<SkipLinksProps>;
+export default SkipLinks;
+//# sourceMappingURL=SkipLinks.d.ts.map

package/lib/components/SkipLinks/SkipLinks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAS9C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,8TAuB1B,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgEhC,CAAC;AAEH,eAAe,SAAS,CAAC"}