@charcoal-ui/react 3.0.0-beta.0 → 3.0.0-beta.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 (31) hide show
  1. package/dist/components/Button/index.d.ts.map +1 -1
  2. package/dist/components/DropdownSelector/DropdownPopover.d.ts.map +1 -1
  3. package/dist/components/DropdownSelector/OptionItem.d.ts +7 -0
  4. package/dist/components/DropdownSelector/OptionItem.d.ts.map +1 -0
  5. package/dist/components/DropdownSelector/OptionLi.d.ts +11 -0
  6. package/dist/components/DropdownSelector/OptionLi.d.ts.map +1 -0
  7. package/dist/components/DropdownSelector/index.d.ts +22 -29
  8. package/dist/components/DropdownSelector/index.d.ts.map +1 -1
  9. package/dist/components/DropdownSelector/index.story.d.ts +5 -18
  10. package/dist/components/DropdownSelector/index.story.d.ts.map +1 -1
  11. package/dist/components/DropdownSelector/utils/focusIfHTMLLIElement.d.ts +6 -0
  12. package/dist/components/DropdownSelector/utils/focusIfHTMLLIElement.d.ts.map +1 -0
  13. package/dist/components/DropdownSelector/utils/handleFocusByKeyBoard.d.ts +6 -0
  14. package/dist/components/DropdownSelector/utils/handleFocusByKeyBoard.d.ts.map +1 -0
  15. package/dist/index.cjs.js +261 -309
  16. package/dist/index.cjs.js.map +1 -1
  17. package/dist/index.d.ts +2 -1
  18. package/dist/index.d.ts.map +1 -1
  19. package/dist/index.esm.js +244 -292
  20. package/dist/index.esm.js.map +1 -1
  21. package/package.json +6 -6
  22. package/src/components/DropdownSelector/DropdownPopover.tsx +9 -15
  23. package/src/components/DropdownSelector/OptionItem.tsx +85 -0
  24. package/src/components/DropdownSelector/index.story.tsx +69 -156
  25. package/src/components/DropdownSelector/index.tsx +110 -140
  26. package/src/components/DropdownSelector/utils/focusIfHTMLLIElement.tsx +12 -0
  27. package/src/components/DropdownSelector/utils/handleFocusByKeyBoard.tsx +20 -0
  28. package/src/index.ts +6 -1
  29. package/src/components/DropdownSelector/ListBoxSection.tsx +0 -60
  30. package/src/components/DropdownSelector/Listbox.tsx +0 -67
  31. package/src/components/DropdownSelector/Option.tsx +0 -66
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAI1C,OAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE1E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAC1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAErB,UAAU,WAAW;IACnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,cAAc,CAAA;AAE/D,QAAA,MAAM,MAAM,sFAuBV,CAAA;AACF,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE1E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAC1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAErB,UAAU,WAAW;IACnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,cAAc,CAAA;AAE/D,QAAA,MAAM,MAAM,sFAuBV,CAAA;AACF,eAAe,MAAM,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAqB,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EACL,gBAAgB,EAIjB,MAAM,sBAAsB,CAAA;AAS7B,KAAK,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IAClD,KAAK,EAAE,mBAAmB,CAAA;CAC3B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,GAAG,CAAA;CACZ,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eA+CnE"}
1
+ {"version":3,"file":"DropdownPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAqB,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EACL,gBAAgB,EAIjB,MAAM,sBAAsB,CAAA;AAS7B,KAAK,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IAClD,KAAK,EAAE,mBAAmB,CAAA;CAC3B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,GAAG,CAAA;CACZ,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAyCnE"}
@@ -0,0 +1,7 @@
1
+ import { ReactNode } from 'react';
2
+ export type OptionItemProps = {
3
+ children?: ReactNode;
4
+ value: string;
5
+ };
6
+ export declare function OptionItem(props: OptionItemProps): JSX.Element;
7
+ //# sourceMappingURL=OptionItem.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionItem.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/OptionItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AAQpD,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA2ChD"}
@@ -0,0 +1,11 @@
1
+ import { ReactNode } from 'react';
2
+ import { DropdownSelectorOption } from '.';
3
+ type OptionProps = {
4
+ children: ReactNode;
5
+ isSelected: boolean;
6
+ value: DropdownSelectorOption;
7
+ onSelect: () => void;
8
+ };
9
+ export declare function OptionLi(props: OptionProps): JSX.Element;
10
+ export {};
11
+ //# sourceMappingURL=OptionLi.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionLi.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/OptionLi.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,GAAG,CAAA;AAG1C,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,sBAAsB,CAAA;IAC7B,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW,eAsC1C"}
@@ -1,32 +1,25 @@
1
- import { Key } from 'react';
2
- import { ListboxProps } from './Listbox';
3
- import type { CollectionBase } from '@react-types/shared';
4
- import type { ReactNode } from 'react';
5
- type LabelProps = {
6
- readonly showLabel?: boolean;
7
- readonly label: string;
8
- readonly subLabel?: ReactNode;
9
- readonly requiredText?: string;
1
+ import React, { ReactNode } from 'react';
2
+ export declare const DropdownSelectorContext: React.Context<{
3
+ value: string;
4
+ setValue: (_v: string) => void;
5
+ }>;
6
+ export type DropdownSelectorProps = {
7
+ label: string;
8
+ value: string;
9
+ disabled?: boolean;
10
+ placeholder?: string;
11
+ showLabel?: boolean;
12
+ invalid?: boolean;
13
+ assistiveText?: string;
14
+ required?: boolean;
15
+ requiredText?: string;
16
+ subLabel?: ReactNode;
17
+ children?: ReactNode;
18
+ onChange: (value: string) => void;
10
19
  };
11
- type Empty = Record<string, unknown>;
12
- export type DropdownSelectorProps<T extends Empty = Empty> = LabelProps & Readonly<CollectionBase<T>> & {
13
- readonly id?: string;
14
- readonly name?: string;
15
- readonly autoComplete?: string;
16
- readonly placeholder?: string;
17
- readonly className?: string;
18
- readonly disabled?: boolean;
19
- readonly required?: boolean;
20
- readonly invalid?: boolean;
21
- readonly assertiveText?: string;
22
- readonly value?: Key;
23
- readonly defaultValue?: Key;
24
- readonly open?: boolean;
25
- readonly onOpenChange?: (isOpen?: boolean) => void;
26
- readonly onChange?: (key: Key) => void;
27
- readonly mode?: ListboxProps<T>['mode'];
20
+ export type DropdownSelectorOption = {
21
+ label: string;
22
+ id: string;
28
23
  };
29
- declare const DropdownSelector: <T extends Record<string, unknown>>({ open, className, label, requiredText, subLabel, assertiveText, autoComplete, invalid, disabled, required, showLabel, mode, ...props }: DropdownSelectorProps<T>) => JSX.Element;
30
- export default DropdownSelector;
31
- export declare const DropdownSelectorItem: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
24
+ export default function DropdownSelector(props: DropdownSelectorProps): JSX.Element;
32
25
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAA;AAQnD,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAED,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACpC,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,IAAI,UAAU,GACrE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,GAAG,CAAA;IACpB,QAAQ,CAAC,YAAY,CAAC,EAAE,GAAG,CAAA;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CAAA;AAEH,QAAA,MAAM,gBAAgB,uNAsGrB,CAAA;AAED,eAAe,gBAAgB,CAAA;AAC/B,eAAO,MAAM,oBAAoB,iEAAO,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAA;AAS/D,eAAO,MAAM,uBAAuB;;mBAEnB,MAAM;EAGrB,CAAA;AAEF,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,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAuEpE"}
@@ -1,25 +1,12 @@
1
- import { DropdownSelectorProps } from '.';
1
+ import DropdownSelector, { DropdownSelectorProps } from '.';
2
2
  import { Story } from '../../_lib/compat';
3
3
  declare const _default: {
4
4
  title: string;
5
- component: <T extends Record<string, unknown>>({ open, className, label, requiredText, subLabel, assertiveText, autoComplete, invalid, disabled, required, showLabel, mode, ...props }: DropdownSelectorProps<T>) => JSX.Element;
5
+ component: typeof DropdownSelector;
6
6
  };
7
7
  export default _default;
8
8
  type Props = Omit<DropdownSelectorProps, 'subLabel' | 'children' | 'onOpenChange'>;
9
- export declare const Default: Story<Props>;
10
- export declare const Sections: Story<DropdownSelectorProps>;
11
- export declare const Bottom: Story<DropdownSelectorProps>;
12
- export declare const Many: Story<DropdownSelectorProps>;
13
- type HasLabelProps = {
14
- disabled?: boolean;
15
- };
16
- export declare const HasLabel: Story<HasLabelProps>;
17
- type WithSeparatorProps = {
18
- mode: 'default' | 'separator';
19
- };
20
- export declare const WithSeparator: Story<WithSeparatorProps>;
21
- type InvalidProps = {
22
- disabled?: boolean;
23
- };
24
- export declare const Invalid: Story<InvalidProps>;
9
+ export declare const Playground: Story<Props>;
10
+ export declare const Basic: Story<Props>;
11
+ export declare const CustomChildren: Story<Props>;
25
12
  //# 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":"AAGA,OAAyB,EAEvB,qBAAqB,EACtB,MAAM,GAAG,CAAA;AACV,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAGzC,wBAGC;AAED,KAAK,KAAK,GAAG,IAAI,CACf,qBAAqB,EACrB,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,KAAK,CAehC,CAAA;AAUD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,qBAAqB,CAmBjD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,qBAAqB,CAe/C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAwB7C,CAAA;AAED,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAwBzC,CAAA;AAMD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,SAAS,GAAG,WAAW,CAAA;CAC9B,CAAA;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CA4BnD,CAAA;AAMD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAqBvC,CAAA"}
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;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAGzC,wBAGC;AAED,KAAK,KAAK,GAAG,IAAI,CACf,qBAAqB,EACrB,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAA;AAWD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CAsBnC,CAAA;AAID,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,KAAK,CAkB9B,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,KAAK,CA6CvC,CAAA"}
@@ -0,0 +1,6 @@
1
+ /**
2
+ * li要素ならフォーカスしてスクロールスクロール領域に見えるように親要素をスクロールする
3
+ * @param element
4
+ */
5
+ export declare function focusIfHTMLLIElement(element: Node | null | undefined): void;
6
+ //# sourceMappingURL=focusIfHTMLLIElement.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"focusIfHTMLLIElement.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/utils/focusIfHTMLLIElement.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,QAKpE"}
@@ -0,0 +1,6 @@
1
+ /**
2
+ * スクロールスクロール領域に見えるように親要素をスクロールする
3
+ * @param element
4
+ */
5
+ export declare function handleFocusByKeyBoard(element: HTMLElement): void;
6
+ //# sourceMappingURL=handleFocusByKeyBoard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"handleFocusByKeyBoard.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/utils/handleFocusByKeyBoard.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,WAAW,QAczD"}