@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.
- package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts.map +1 -1
- package/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts +2 -1
- package/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts.map +1 -1
- package/dist/components/DropdownSelector/MenuList/index.d.ts.map +1 -1
- package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts +2 -1
- package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts.map +1 -1
- package/dist/components/DropdownSelector/index.d.ts +4 -0
- package/dist/components/DropdownSelector/index.d.ts.map +1 -1
- package/dist/components/DropdownSelector/index.story.d.ts +12 -5
- package/dist/components/DropdownSelector/index.story.d.ts.map +1 -1
- package/dist/components/LoadingSpinner/LoadingSpinnerIcon.story.d.ts.map +1 -1
- package/dist/components/LoadingSpinner/index.story.d.ts.map +1 -1
- package/dist/components/Modal/index.story.d.ts +1 -0
- package/dist/components/Modal/index.story.d.ts.map +1 -1
- package/dist/components/Modal/useCustomModalOverlay.d.ts.map +1 -1
- package/dist/index.cjs.js +49 -25
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +60 -36
- package/dist/index.esm.js.map +1 -1
- package/package.json +9 -7
- package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +5 -3
- package/src/components/DropdownSelector/ListItem/index.tsx +5 -1
- package/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx +29 -18
- package/src/components/DropdownSelector/MenuList/MenuListContext.ts +3 -2
- package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +15 -9
- package/src/components/DropdownSelector/MenuList/index.tsx +6 -4
- package/src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx +11 -8
- package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +2666 -396
- package/src/components/DropdownSelector/index.story.tsx +264 -103
- package/src/components/DropdownSelector/index.tsx +35 -7
- package/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx +1 -0
- package/src/components/LoadingSpinner/index.story.tsx +1 -0
- package/src/components/Modal/__snapshots__/index.story.storyshot +990 -0
- package/src/components/Modal/index.story.tsx +23 -0
- package/src/components/Modal/useCustomModalOverlay.tsx +5 -0
package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts.map
CHANGED
|
@@ -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,
|
|
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
|
-
|
|
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;
|
|
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,
|
|
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
|
|
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;
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
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
|
|
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
|
|
6
|
-
export declare const
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
1291
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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, {
|
|
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-
|
|
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
|
-
|
|
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 (!
|
|
1453
|
+
if (!propsArray || value === void 0)
|
|
1438
1454
|
return;
|
|
1439
|
-
const
|
|
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
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
next
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
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
|
|
1477
|
+
}, [setContextValue, propsArray, value, root]);
|
|
1454
1478
|
return [handleKeyDown, setContextValue];
|
|
1455
1479
|
}
|
|
1456
1480
|
|