@ndlib/component-library 0.0.92 → 0.0.94

package/dist/components/elements/Dropdown/Dropdown.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Dropdown>;
 export declare const Default: Story;
 export declare const MatchWidth: Story;
+export declare const ForcePlacement: Story;

package/dist/components/elements/Dropdown/Dropdown.stories.js

@@ -4,6 +4,7 @@ import { Button } from '../../elements/Button';
 import { Box } from '../../elements/layout/Box';
 import { Dropdown } from '.';
 import { Paragraph } from '../text/Paragraph';
+import { Column } from '../layout/Column';
 const meta = {
     title: 'Elements/Dropdown',
     component: Dropdown,
@@ -18,3 +19,6 @@ export const Default = {
 export const MatchWidth = {
     render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
 };
+export const ForcePlacement = {
+    render: () => (_jsx(Column, Object.assign({ sx: { width: '200x', height: '100vh' }, justify: "flex-end" }, { children: _jsx(Dropdown, { allowedPlacements: ['bottom-start'], renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+};

package/dist/components/elements/Dropdown/index.d.ts

@@ -13,11 +13,13 @@ type DropdownRenderFn = (params: {
     setIsOpen: (isOpen: boolean) => void;
     id: string;
 }) => React.ReactNode;
+type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
 type DropdownProps = StyledElementProps<HTMLDivElement, {
     renderAnchor: AnchorRenderFn;
     renderDropdown: DropdownRenderFn;
     shouldRenderDropdownContainer?: boolean;
     matchWidth?: boolean;
+    allowedPlacements?: Placement[];
 }>;
 export declare const Overlay: React.FC<StyledElementProps<HTMLDivElement>>;
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/components/elements/Dropdown/index.js

@@ -26,7 +26,7 @@ export const Overlay = (props) => (_jsx(Box, Object.assign({}, props, { sx: {
         zIndex: Z_INDEX.ELEVATED,
     } })));
 export const Dropdown = (_a) => {
-    var { renderAnchor, renderDropdown, matchWidth, shouldRenderDropdownContainer = true } = _a, rest = __rest(_a, ["renderAnchor", "renderDropdown", "matchWidth", "shouldRenderDropdownContainer"]);
+    var { renderAnchor, renderDropdown, matchWidth, shouldRenderDropdownContainer = true, allowedPlacements = ['top-start', 'bottom-start', 'top-end', 'bottom-end'] } = _a, rest = __rest(_a, ["renderAnchor", "renderDropdown", "matchWidth", "shouldRenderDropdownContainer", "allowedPlacements"]);
     const [isOpen, setIsOpen] = useState(false);
     const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
     const [dropdownMaxWidth, setDropdownMaxWidth] = useState();
@@ -46,12 +46,7 @@ export const Dropdown = (_a) => {
                 },
             }),
             autoPlacement({
-                allowedPlacements: [
-                    'top-start',
-                    'bottom-start',
-                    'top-end',
-                    'bottom-end',
-                ],
+                allowedPlacements,
             }),
         ],
     });

package/dist/components/elements/Fields/Checkbox/index.d.ts

@@ -3,6 +3,7 @@ import { StyledElementProps } from '../../../../theme';
 type CheckboxProps = StyledElementProps<HTMLInputElement, {
     checked: boolean;
     onChange: (value: boolean) => void;
+    disabled?: boolean;
 }, string>;
 export declare const Checkbox: React.FC<CheckboxProps>;
 export {};

package/dist/components/elements/Fields/Checkbox/index.js

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { useTheme } from '../../../../theme';
 export const Checkbox = (_a) => {
-    var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
+    var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
     const theme = useTheme();
     return (_jsx("input", Object.assign({ type: "checkbox", onChange: (e) => {
             onChange(e.target.checked);
-        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
+        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
                 boxShadow: theme.boxShadow,
-            } }, sx) }, rest)));
+            } }, sx), disabled: disabled }, rest)));
 };

package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof CheckboxGroup>;
 export declare const Default: Story;
 export declare const Columns: Story;
+export declare const Disabled: Story;

package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.js

@@ -9,14 +9,14 @@ const meta = {
 };
 export default meta;
 const options = [
-    { value: 'orange', label: 'Orange' },
+    { value: 'orange', label: 'Orange', disabled: true },
     { value: 'apple', label: 'Apple' },
     { value: 'strawberry', label: 'Strawberry' },
     { value: 'pineapple', label: 'Pineapple' },
 ];
 const StatefulCheckboxGroup = (props) => {
     const [checked, setChecked] = useState(new Set());
-    return (_jsx(CheckboxGroup, Object.assign({}, props, { checkedOptions: checked, options: options, onChange: setChecked })));
+    return (_jsx(CheckboxGroup, Object.assign({}, props, { checkedOptions: checked, options: props.options || options, onChange: setChecked })));
 };
 export const Default = {
     render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, {}) })),
@@ -24,3 +24,6 @@ export const Default = {
 export const Columns = {
     render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { columns: 2 }) })),
 };
+export const Disabled = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
+};

package/dist/components/elements/Fields/CheckboxGroup/index.d.ts

@@ -3,6 +3,7 @@ import { Key } from '../option';
 type Option<K extends Key = string> = {
     value: K;
     label: string;
+    disabled?: boolean;
 };
 type CheckboxGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
     onChange: (value: Set<K>) => void;

package/dist/components/elements/Fields/CheckboxGroup/index.js

@@ -18,6 +18,7 @@ import { Group } from '../../Group';
 import { GROUP_TYPE } from '../../Group';
 import { Column } from '../../layout/Column';
 import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
+import { COLOR } from '../../../../theme/colors';
 export function CheckboxGroup(_a) {
     var { options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "rowStyles", "onChange"]);
     const columns = columnsProp || 1;
@@ -42,8 +43,8 @@ export function CheckboxGroup(_a) {
                                     updatedSet.delete(option.value);
                                 }
                                 onChange(updatedSet);
-                            }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: {
+                            }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, disabled: option.disabled, sx: {
                                 mr: 2,
                                 flexShrink: 0,
-                            } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
+                            } }), _jsx(Label, Object.assign({ sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
 }

package/dist/components/elements/Fields/Radio/index.d.ts

@@ -3,6 +3,7 @@ import { StyledElementProps } from '../../../../theme';
 type RadioProps = StyledElementProps<HTMLInputElement, {
     checked: boolean;
     onChange: (value: boolean) => void;
+    disabled?: boolean;
 }, string>;
 export declare const Radio: React.FC<RadioProps>;
 export {};

package/dist/components/elements/Fields/Radio/index.js

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { useTheme } from '../../../../theme';
 export const Radio = (_a) => {
-    var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
+    var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
     const theme = useTheme();
     return (_jsx("input", Object.assign({ type: "radio", onChange: (e) => {
             onChange(e.target.checked);
-        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
+        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
                 boxShadow: theme.boxShadow,
-            } }, sx) }, rest)));
+            } }, sx), disabled: disabled }, rest)));
 };

package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof RadioGroup>;
 export default meta;
 type Story = StoryObj<typeof RadioGroup>;
 export declare const Default: Story;
+export declare const Disabled: Story;

package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.js

@@ -16,8 +16,11 @@ const options = [
 ];
 const StatefulRadioGroup = (props) => {
     const [checked, setChecked] = useState(new Set());
-    return (_jsx(RadioGroup, Object.assign({}, props, { checked: checked, options: options, onChange: setChecked })));
+    return (_jsx(RadioGroup, Object.assign({}, props, { checked: checked, options: props.options || options, onChange: setChecked })));
 };
 export const Default = {
     render: () => (_jsx(Row, { children: _jsx(StatefulRadioGroup, {}) })),
 };
+export const Disabled = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulRadioGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
+};

package/dist/components/elements/Fields/RadioGroup/index.d.ts

@@ -3,6 +3,7 @@ import { Key } from '../option';
 type Option<K extends Key = string> = {
     value: K;
     label: string;
+    disabled?: boolean;
 };
 type RadioGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
     onChange: (value: K) => void;

package/dist/components/elements/Fields/RadioGroup/index.js

@@ -24,5 +24,5 @@ export function RadioGroup(_a) {
                         }, checked: checked === option.value, id: labelTargetId, sx: {
                             mr: 2,
                             flexShrink: 0,
-                        } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
+                        }, disabled: option.disabled }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.92",
+  "version": "0.0.94",
   "type": "module",
   "sideEffects": false,
   "files": [