@charcoal-ui/react 3.9.0 → 3.10.0

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 (35) hide show
  1. package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts.map +1 -1
  2. package/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts +2 -1
  3. package/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts.map +1 -1
  4. package/dist/components/DropdownSelector/MenuList/index.d.ts.map +1 -1
  5. package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts +2 -1
  6. package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts.map +1 -1
  7. package/dist/components/DropdownSelector/index.d.ts +4 -0
  8. package/dist/components/DropdownSelector/index.d.ts.map +1 -1
  9. package/dist/components/DropdownSelector/index.story.d.ts +12 -5
  10. package/dist/components/DropdownSelector/index.story.d.ts.map +1 -1
  11. package/dist/components/LoadingSpinner/LoadingSpinnerIcon.story.d.ts.map +1 -1
  12. package/dist/components/LoadingSpinner/index.story.d.ts.map +1 -1
  13. package/dist/components/Modal/index.story.d.ts +1 -0
  14. package/dist/components/Modal/index.story.d.ts.map +1 -1
  15. package/dist/components/Modal/useCustomModalOverlay.d.ts.map +1 -1
  16. package/dist/index.cjs.js +49 -25
  17. package/dist/index.cjs.js.map +1 -1
  18. package/dist/index.esm.js +60 -36
  19. package/dist/index.esm.js.map +1 -1
  20. package/package.json +9 -7
  21. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +5 -3
  22. package/src/components/DropdownSelector/ListItem/index.tsx +5 -1
  23. package/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx +29 -18
  24. package/src/components/DropdownSelector/MenuList/MenuListContext.ts +3 -2
  25. package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +15 -9
  26. package/src/components/DropdownSelector/MenuList/index.tsx +6 -4
  27. package/src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx +11 -8
  28. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +2666 -396
  29. package/src/components/DropdownSelector/index.story.tsx +264 -103
  30. package/src/components/DropdownSelector/index.tsx +35 -7
  31. package/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx +1 -0
  32. package/src/components/LoadingSpinner/index.story.tsx +1 -0
  33. package/src/components/Modal/__snapshots__/index.story.storyshot +990 -0
  34. package/src/components/Modal/index.story.tsx +23 -0
  35. package/src/components/Modal/useCustomModalOverlay.tsx +5 -0
@@ -1 +1 @@
1
- {"version":3,"file":"useMenuItemHandleKeyDown.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,CAAC,EAAE,MAAM,GACb,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,MAAM,IAAI,CAAC,CAyChE"}
1
+ {"version":3,"file":"useMenuItemHandleKeyDown.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,CAAC,EAAE,MAAM,GACb,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,MAAM,IAAI,CAAC,CAoDhE"}
@@ -1,8 +1,9 @@
1
1
  import { RefObject } from 'react';
2
+ import { DropdownMenuItemProps } from '../DropdownMenuItem';
2
3
  type MenuListContextType = {
3
4
  root?: RefObject<HTMLUListElement>;
4
5
  value?: string;
5
- values?: string[];
6
+ propsArray?: DropdownMenuItemProps[];
6
7
  setValue: (v: string) => void;
7
8
  };
8
9
  export declare const MenuListContext: import("react").Context<MenuListContextType>;
@@ -1 +1 @@
1
- {"version":3,"file":"MenuListContext.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/MenuListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AAEhD,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,eAAe,8CAO1B,CAAA"}
1
+ {"version":3,"file":"MenuListContext.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/MenuListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAA;IACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,eAAe,8CAO1B,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,KAAK,aAAa,GAAG,KAAK,CAAC,YAAY,CACrC,OAAO,QAAQ,GAAG,OAAO,aAAa,GAAG,OAAO,OAAO,CACxD,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,aAAa,EAAE,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,eAqBpD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,KAAK,aAAa,GAAG,KAAK,CAAC,YAAY,CACrC,OAAO,QAAQ,GAAG,OAAO,aAAa,GAAG,OAAO,OAAO,CACxD,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,aAAa,EAAE,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,eAuBpD"}
@@ -1,4 +1,5 @@
1
1
  import { MenuListChildren } from '..';
2
+ import { DropdownMenuItemProps } from '../../DropdownMenuItem';
2
3
  /**
3
4
  * valueというpropsを持つ子要素の値を再起的に探索して配列にする
4
5
  *
@@ -7,5 +8,5 @@ import { MenuListChildren } from '..';
7
8
  * @param values
8
9
  * @returns
9
10
  */
10
- export declare function getValuesRecursive(children: MenuListChildren, values?: string[]): void;
11
+ export declare function getValuesRecursive(children: MenuListChildren): DropdownMenuItemProps[];
11
12
  //# sourceMappingURL=getValuesRecursive.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"getValuesRecursive.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAA;AAGrC;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,GAAE,MAAM,EAAO,QAmBtB"}
1
+ {"version":3,"file":"getValuesRecursive.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAA;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAE9D;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,2BAuB5D"}
@@ -11,6 +11,10 @@ export type DropdownSelectorProps = {
11
11
  required?: boolean;
12
12
  requiredText?: string;
13
13
  subLabel?: ReactNode;
14
+ /**
15
+ * the name of hidden `<select />`
16
+ */
17
+ name?: string;
14
18
  children: MenuListChildren;
15
19
  onChange: (value: string) => void;
16
20
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAOnD,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAGvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA0DpE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAA;AAO5D,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAgFpE"}
@@ -1,12 +1,19 @@
1
- import DropdownSelector, { DropdownSelectorProps } from '.';
1
+ import DropdownSelector from '.';
2
2
  import { StoryObj } from '@storybook/react';
3
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, DropdownSelectorProps>;
3
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").DropdownSelectorProps>;
4
4
  export default _default;
5
- export declare const Playground: StoryObj<typeof DropdownSelector>;
6
- export declare const Basic: StoryObj<typeof DropdownSelector>;
5
+ export declare const Default: StoryObj<typeof DropdownSelector>;
6
+ export declare const Label: StoryObj<typeof DropdownSelector>;
7
+ export declare const Disabled: StoryObj<typeof DropdownSelector>;
8
+ export declare const DisabledItem: StoryObj<typeof DropdownSelector>;
9
+ export declare const Invalid: StoryObj<typeof DropdownSelector>;
10
+ export declare const AssistiveText: StoryObj<typeof DropdownSelector>;
11
+ export declare const InvalidAssistiveText: StoryObj<typeof DropdownSelector>;
12
+ export declare const RequiredText: StoryObj<typeof DropdownSelector>;
13
+ export declare const SubLabel: StoryObj<typeof DropdownSelector>;
7
14
  export declare const LongNames: StoryObj<typeof DropdownSelector>;
8
15
  export declare const InModal: StoryObj<typeof DropdownSelector>;
9
16
  export declare const InFormTag: StoryObj<typeof DropdownSelector>;
10
17
  export declare const CustomChildren: StoryObj<typeof DropdownSelector>;
11
- export declare const SectionList: StoryObj<typeof DropdownSelector>;
18
+ export declare const Section: StoryObj<typeof DropdownSelector>;
12
19
  //# sourceMappingURL=index.story.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,EAAE,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAA;AAQ3D,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAEjD,wBAGkC;AAYlC,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA8BxD,CAAA;AAoBD,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CASnD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA+BvD,CAAA;AAUD,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAqCrD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoBvD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAgD5D,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA6BzD,CAAA"}
1
+ {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,GAAG,CAAA;AAMhC,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAKjD,wBAGkC;AAElC,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoBrD,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkBnD,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkBtD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAiB1D,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkBrD,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkB3D,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAmBlE,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAqB1D,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoBtD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA+BvD,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkFrD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAwCvD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoC5D,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA4BrD,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingSpinnerIcon.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAA;;;;AAEtC,wBAMoC;AAEpC,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,kBAAkB,CAAM,CAAA"}
1
+ {"version":3,"file":"LoadingSpinnerIcon.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAA;;;;AAEtC,wBAOoC;AAEpC,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,kBAAkB,CAAM,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,cAAc,MAAM,GAAG,CAAA;;AAE9B,wBASgC;AAEhC,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,cAAc,CAAM,CAAA"}
1
+ {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,cAAc,MAAM,GAAG,CAAA;;AAE9B,wBAUgC;AAEhC,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,cAAc,CAAM,CAAA"}
@@ -16,5 +16,6 @@ export declare const Default: StoryObj<typeof Modal>;
16
16
  export declare const FullBottomSheet: StoryObj<typeof Modal>;
17
17
  export declare const BottomSheet: StoryObj<typeof Modal>;
18
18
  export declare const NotDismmissableStory: StoryObj<typeof Modal>;
19
+ export declare const BackgroundScroll: StoryObj<typeof Modal>;
19
20
  export { InternalScrollStory as InternalScroll } from './__stories__/InternalScrollStory';
20
21
  //# sourceMappingURL=index.story.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,GAAG,CAAA;AAezD,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;;;;;;;;;;;AAEjD,wBAuCuB;AA6DvB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,KAAK,CAAM,CAAA;AAEjD,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,KAAK,CAuDlD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,KAAK,CAqC9C,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,OAAO,KAAK,CA4BvD,CAAA;AAED,OAAO,EAAE,mBAAmB,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA"}
1
+ {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,GAAG,CAAA;AAezD,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;;;;;;;;;;;AAEjD,wBAuCuB;AA6DvB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,KAAK,CAAM,CAAA;AAEjD,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,KAAK,CAuDlD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,KAAK,CAqC9C,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,OAAO,KAAK,CA4BvD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,OAAO,KAAK,CAqBnD,CAAA;AAED,OAAO,EAAE,mBAAmB,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"useCustomModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAIjB,MAAM,sBAAsB,CAAA;AAE7B;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,qBAAqB,EAC5B,KAAK,EAAE;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,EAC/C,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAChC,gBAAgB,CAuBlB"}
1
+ {"version":3,"file":"useCustomModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAKjB,MAAM,sBAAsB,CAAA;AAE7B;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,qBAAqB,EAC5B,KAAK,EAAE;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,EAC/C,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAChC,gBAAgB,CA2BlB"}
package/dist/index.cjs.js CHANGED
@@ -950,6 +950,9 @@ function useCharcoalModalOverlay(props, state, ref) {
950
950
  onClose: state.onClose,
951
951
  shouldCloseOnInteractOutside: () => false
952
952
  }, ref);
953
+ (0, import_overlays2.usePreventScroll)({
954
+ isDisabled: !state.isOpen
955
+ });
953
956
  (0, import_overlays2.useOverlayFocusContain)();
954
957
  React9.useEffect(() => {
955
958
  if (state.isOpen && ref.current) {
@@ -1160,7 +1163,7 @@ var import_styled_components15 = __toESM(require("styled-components"));
1160
1163
 
1161
1164
  // src/components/DropdownSelector/Popover/usePreventScroll.tsx
1162
1165
  var import_react15 = require("react");
1163
- function usePreventScroll(element, isOpen) {
1166
+ function usePreventScroll2(element, isOpen) {
1164
1167
  (0, import_react15.useEffect)(() => {
1165
1168
  if (isOpen && element) {
1166
1169
  const defaultPaddingRight = element.style.paddingRight;
@@ -1196,7 +1199,7 @@ function Popover(props) {
1196
1199
  toggle: _empty
1197
1200
  });
1198
1201
  const modalBackground = (0, import_react16.useContext)(ModalBackgroundContext);
1199
- usePreventScroll(modalBackground, props.isOpen);
1202
+ usePreventScroll2(modalBackground, props.isOpen);
1200
1203
  if (!props.isOpen)
1201
1204
  return null;
1202
1205
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
@@ -1273,40 +1276,43 @@ var import_react18 = require("react");
1273
1276
  var MenuListContext = (0, import_react18.createContext)({
1274
1277
  root: void 0,
1275
1278
  value: "",
1276
- values: [],
1279
+ propsArray: [],
1277
1280
  setValue: (_v) => {
1278
1281
  }
1279
1282
  });
1280
1283
 
1281
1284
  // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
1282
1285
  var React12 = __toESM(require("react"));
1283
- function getValuesRecursive(children, values = []) {
1286
+ function getValuesRecursive(children) {
1284
1287
  const childArray = React12.Children.toArray(children);
1288
+ const propsArray = [];
1285
1289
  for (let i = 0; i < childArray.length; i++) {
1286
1290
  const child = childArray[i];
1287
1291
  if (React12.isValidElement(child)) {
1288
1292
  const props = child.props;
1289
1293
  if ("value" in props && typeof props.value === "string") {
1290
- const childValue = props.value;
1291
- values.push(childValue);
1294
+ propsArray.push({
1295
+ disabled: props.disabled,
1296
+ value: props.value
1297
+ });
1292
1298
  }
1293
1299
  if ("children" in props && props.children) {
1294
- getValuesRecursive(props.children, values);
1300
+ propsArray.push(...getValuesRecursive(props.children));
1295
1301
  }
1296
1302
  }
1297
1303
  }
1304
+ return propsArray;
1298
1305
  }
1299
1306
 
1300
1307
  // src/components/DropdownSelector/MenuList/index.tsx
1301
1308
  var import_jsx_runtime19 = require("react/jsx-runtime");
1302
1309
  function MenuList(props) {
1303
1310
  const root = (0, import_react19.useRef)(null);
1304
- const values = [];
1305
- getValuesRecursive(props.children, values);
1311
+ const propsArray = (0, import_react19.useMemo)(() => getValuesRecursive(props.children), [props.children]);
1306
1312
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MenuListContext.Provider, { value: {
1307
1313
  value: props.value ?? "",
1308
1314
  root,
1309
- values,
1315
+ propsArray,
1310
1316
  setValue: (v) => {
1311
1317
  props.onChange?.(v);
1312
1318
  }
@@ -1318,20 +1324,29 @@ var StyledUl = import_styled_components16.default.ul.withConfig({
1318
1324
 
1319
1325
  // src/components/DropdownSelector/index.tsx
1320
1326
  var import_styled8 = require("@charcoal-ui/styled");
1327
+ var import_visually_hidden3 = require("@react-aria/visually-hidden");
1321
1328
  var import_jsx_runtime20 = require("react/jsx-runtime");
1322
1329
  var defaultRequiredText = "*\u5FC5\u9808";
1323
1330
  function DropdownSelector(props) {
1324
1331
  const triggerRef = (0, import_react20.useRef)(null);
1325
1332
  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
1326
1333
  const preview = findPreviewRecursive(props.children, props.value);
1334
+ const isPlaceholder = (0, import_react20.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
1335
+ const propsArray = getValuesRecursive(props.children);
1336
+ const {
1337
+ visuallyHiddenProps
1338
+ } = (0, import_visually_hidden3.useVisuallyHidden)();
1327
1339
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
1328
1340
  props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
1341
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("select", { name: props.name, value: props.value, tabIndex: -1, children: propsArray.map((itemProps) => {
1342
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
1343
+ }) }) }),
1329
1344
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
1330
1345
  if (props.disabled === true)
1331
1346
  return;
1332
1347
  setIsOpen(true);
1333
1348
  }, ref: triggerRef, type: "button", $active: isOpen, children: [
1334
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
1349
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
1335
1350
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
1336
1351
  ] }),
1337
1352
  isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuList, { value: props.value, onChange: (v) => {
@@ -1356,7 +1371,7 @@ var DropdownButton = import_styled_components17.default.button.withConfig({
1356
1371
  }) => invalid === true && (0, import_styled_components17.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
1357
1372
  var DropdownButtonText = import_styled_components17.default.span.withConfig({
1358
1373
  componentId: "ccl__sc-1vnxmc8-3"
1359
- })(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
1374
+ })(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
1360
1375
  var DropdownButtonIcon = (0, import_styled_components17.default)(Icon_default).withConfig({
1361
1376
  componentId: "ccl__sc-1vnxmc8-4"
1362
1377
  })(["color:var(--charcoal-text2);"]);
@@ -1384,7 +1399,7 @@ var StyledLi = import_styled_components18.default.li.withConfig({
1384
1399
  })(["list-style:none;"]);
1385
1400
  var ItemDiv = import_styled_components18.default.div.withConfig({
1386
1401
  componentId: "ccl__sc-p1vs75-1"
1387
- })(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{background-color:var(--charcoal-surface3);}"]);
1402
+ })(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
1388
1403
 
1389
1404
  // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
1390
1405
  var import_react21 = require("react");
@@ -1423,7 +1438,7 @@ function useMenuItemHandleKeyDown(value) {
1423
1438
  const {
1424
1439
  setValue,
1425
1440
  root,
1426
- values
1441
+ propsArray
1427
1442
  } = (0, import_react21.useContext)(MenuListContext);
1428
1443
  const setContextValue = (0, import_react21.useCallback)(() => {
1429
1444
  if (value !== void 0)
@@ -1433,24 +1448,33 @@ function useMenuItemHandleKeyDown(value) {
1433
1448
  if (e.key === "Enter") {
1434
1449
  setContextValue();
1435
1450
  } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
1451
+ const isForward = e.key === "ArrowDown";
1436
1452
  e.preventDefault();
1437
- if (!values || value === void 0)
1453
+ if (!propsArray || value === void 0)
1438
1454
  return;
1439
- const index = values.indexOf(value);
1455
+ const values = propsArray.map((props) => props.value).filter((v) => v);
1456
+ let index = values.indexOf(value);
1440
1457
  if (index === -1)
1441
1458
  return;
1442
- const focusValue = e.key === "ArrowUp" ? index - 1 < 0 ? values[values.length - 1] : values[index - 1] : index + 1 >= values.length ? values[0] : values[index + 1];
1443
- const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
1444
- if (next instanceof HTMLElement) {
1445
- next.focus({
1446
- preventScroll: true
1447
- });
1448
- if (root?.current?.parentElement) {
1449
- handleFocusByKeyBoard(next, root.current.parentElement);
1459
+ for (let n = 0; n < values.length; n++) {
1460
+ const focusValue = isForward ? index + 1 >= values.length ? values[0] : values[index + 1] : index - 1 < 0 ? values[values.length - 1] : values[index - 1];
1461
+ const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
1462
+ if (next instanceof HTMLElement) {
1463
+ if (next.ariaDisabled === "true") {
1464
+ index += isForward ? 1 : -1;
1465
+ continue;
1466
+ }
1467
+ next.focus({
1468
+ preventScroll: true
1469
+ });
1470
+ if (root?.current?.parentElement) {
1471
+ handleFocusByKeyBoard(next, root.current.parentElement);
1472
+ }
1473
+ break;
1450
1474
  }
1451
1475
  }
1452
1476
  }
1453
- }, [setContextValue, value, root, values]);
1477
+ }, [setContextValue, propsArray, value, root]);
1454
1478
  return [handleKeyDown, setContextValue];
1455
1479
  }
1456
1480